React JSX

React JSX

As we know, all of the React components include a render function. The Render function specifies the HTML output of a React component. JSX is an acronym of JavaScript extension that allows writing JavaScript code that looks like HTML. JSX is an HTML-like syntax used by react which extends the ECMAScript so that HTML-like syntax can co-exist with JavaScript/React code. The syntax used by the preprocessors (i.e., transpilers like Babel) for transforming HTML-like syntax into standard JavaScript objects that a JavaScript engine will parse.

It provides you to write HTML/XML-like structures (e.g., DOM-like tree structures) within the same file where you write your JavaScript code, and then preprocessor will transform these expressions into actual JavaScript code. JSX tags also have a tag name, attributes, and children just like XML/HTML.

Why use JSX?

• It is faster in comparison to JavaScript as it performs optimization during translation of the code to JavaScript.
• Instead, the separation of technologies by putting markup and logic in separate files, React has the components that contain both.
• It is type-safe because most of the errors are found at compile time.
• It makes template creation easy.

Nested Elements in JSX

If you want to use more than one element, you require wrapping it with one container element. Here, the div is used as a container element that has three nested elements in it.

App.JSX
 import React, { Component } from 'react';
 class App extends Component{
 render(){
 return(
 

Hello World !!
This is TutorialandExample
Website with the best tutorials.

)
}
}
export default App; 

Output:

JSX Attributes

The attributes in JSX with the HTML elements are same as the regular HTML. The naming convention in JSX is in camelcase for attributes instead of standard naming convention of HTML like class in HTML becomes className in JSX. This is because the class is reserved keyword in JavaScript. There is also the use of custom attributes in JSX. We have to use data-prefix, for custom attributes.

The example given below shows the use of custom attribute data-customAttr as an attribute for the <p> tag.

For example:

import React, { Component } from 'react';
 class App extends Component{
render(){
return(
 
Hello World !!
This is TutorialandExample
Website with the best tutorials.
  
 
);
}
}
export default App;

JavaScript Expressions

The expressions of JavaScript can be used inside of JSX. We have to wrap it with curly brackets {}.

The following example shows it more clearly.

Example:

import React, { Component } from 'react';
class App extends Component{
render(){
return(

{12+28}
Hello World !!
This is TutorialandExample
Website with the best tutorials.

);
}
}
export default App;  

Output:

There is not any use of if else statements inside JSX, we have to use conditional (ternary) expressions. In the following example, the value of variable x equals to 1 so the browser will give true, if we replace this value with some other value, it will give false.

For Example:

import React, { Component } from 'react'; 
class App extends Component{
render(){ 
var x=1;
return(

{x == 1 ? 'True!' : 'False'}
This is TutorialandExample
Website with the best tutorials.

);
}
}
export default App;  

Output:

JSX styling

React recommends using inline styles. To set inline styles, we require camelCase syntax. React automatically appends px after the number value on specific elements.

The following example shows you the styling in JSX:

For example:

import React, { Component } from 'react'; 
class App extends Component{ 
render(){ 
var newStyle = {
fontSize: 90,
fontFamily: 'Times New Roman',
color: '#789067' 
} 
return(  
 
www.google.com
This is TutorialandExample
Website with the best tutorials.

);
}
}
export default App;  

Output:

JSX Comments

For writing comments, we have to put curly braces {}. The comments in JSX are begin with /* and ends with */ as in the case of JSX expressions. Below example clarifies how to use comments in JSX.

For example:

import React, { Component } from 'react';
class App extends Component{ 
render(){ 
var newStyle = {fontSize: 90, 
fontFamily: 'Times New Roman', 
color: '#789067'
}  
return( 

www.google.com
This is TutorialandExample
Website with the best tutorials.
 
{/* this is a comment of JSX*/ 

); 
}
}
export default App;