JSX in ReactJS

React JSX
JavaScript XML or JSX is an XML or HTML like JavaScript syntax extension used by ReactJS. Processed into JavaScript calls of React Framework, it extends the ES6. This allows the HTML-like text to co-exist with JavaScript react code. This syntax is also used by the preprocessors with the purpose of converting the HTML-like syntax into standard JavaScript objects.

Nested Elements:
Nested Elements in JSX are needed to wrap with one container element.

Example: div as a container element.
App.JSX:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>HELLO</h1>
<h3>WORLD</h3>
</div>
);
}
}
export default App;
import React, { Component } from 'react'; class App extends Component{ render(){ return( <div> <h1>HELLO</h1> <h3>WORLD</h3> </div> ); } } export default App;
import React, { Component } from 'react';  
class App extends Component{  
render(){  
return(  

HELLO

WORLD

); } } export default App;

Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
HELLO
WORLD
HELLO WORLD
HELLO
WORLD

Explanation: Here the container element div contains two nested elements within it.

JSX Attributes:
JSX uses camelcase naming convention for attributes and also allows the user to create his/her own custom attributes. To specify attribute values in JSX, there are two ways:

As String Literals: Here the values of the attributes are specified in double-quotes.
Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 classname="first">Hello World</h1>
<p data-demoattribute="second">Have a great day!</p>
</div>
); } }
export default App;
import React, { Component } from 'react'; class App extends Component{ render(){ return( <div> <h1 classname="first">Hello World</h1> <p data-demoattribute="second">Have a great day!</p> </div> ); } } export default App;
import React, { Component } from 'react';  
class App extends Component{  
render(){  
return(  

Hello World

Have a great day!

); } } export default App;

Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Hello World
Have a great day!
Hello World Have a great day!
Hello World
Have a great day!

As Expressions: Here, the values of attributes are specified as expressions using curly braces {}.

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 classname="first">{100+10}</h1>
</div>
); } }
export default App;
import React, { Component } from 'react'; class App extends Component{ render(){ return( <div> <h1 classname="first">{100+10}</h1> </div> ); } } export default App;
import React, { Component } from 'react';  
class App extends Component{  
render(){  
return(  

{100+10}

); } } export default App;

Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
110
110
110

JSX Comments:
In JSX comments begin with /* and ends with */. The comment is then wrapped in curly braces {}.

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{/* Comment in JSX */}
{/* Comment in JSX */}
{/* Comment in JSX */}   

JSX Styling:
Inline-styles are recommended for React.

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React, { Component } from 'react';
class App extends Component{
render(){
var X = {
fontSize: 60,
fontFamily: 'Courier',
color: '#003300'
}
return (
<div>
<h1 style="{X}">Hello World</h1>
</div>
);
} }
export default App;
import React, { Component } from 'react'; class App extends Component{ render(){ var X = { fontSize: 60, fontFamily: 'Courier', color: '#003300' } return ( <div> <h1 style="{X}">Hello World</h1> </div> ); } } export default App;
import React, { Component } from 'react';  
class App extends Component{  
render(){  
var X = {  
fontSize: 60,  
fontFamily: 'Courier',  
color: '#003300'  
}  
return (  

Hello World

); } } export default App;

Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Hello World
Hello World
Hello World

JSX features:

  • While translating the code to JavaScript, JSX performs optimization and is thus faster than regular JavaScript.
  • React uses components that contain markup and logic.
  • Most of the errors can be detected at the time of compilation and are thus type-safe.
  • Creating templates is also an easy process.