JSX is an acronym for “JavaScript extension”. Leveraging the power of JSX, we can write JavaScript in a code editor in the same way just like we write HTML code. Simply speaking, JSX is an HTML-like syntax used by React to extend ECMAscript functionality thereby front end developer with an ample understanding of HTML can easily manage to code in React.
With the help of JSX code, you can write DOM like tree structure in the same file in which you normally write JavaScript code. Subsequently, preprocessor like Babel will completely transform your JSX code in JavaScript code. As the JSX is similar to XML/HTML structure, therefore, it has JSX tags, has tag names, attributes, and children.
An example of JSX in React
To keep that in perspective, let’s write a simple JSX code and see the preprocessed JavaScript output:
JSX code:
<div>Welcome to React JSX tutorials</div>
Corresponding JavaScript Output:
React.createElement(“div”, null, ‘welcome to react JSX tutorials’);
The above-mentioned code snipped creates a React element and takes three arguments as an input wherein the first one is an element name which is div tag in this code sample, the second one is the attribute passed in the div tag and the last is the content which you would like to display which in this case is “welcome to react JSX tutorial”
Why do We Use JSX?
- It is faster and efficient than regular JavaScript.
- The reason for its prominence in the development community is due to the fact it optimizes the code amidst transforming it into JavaScript. As it performs both the task simultaneously therefore, it has a competitive edge over JavaScript because of this feature.
- It simplifies the process of template creation
- React unleashes components that synergies both the markup and technologies instead of segregating technologies in a separate file
- JSX reduced the development time and frustration because almost all the errors arise at the compilation time.
- JSX is highly useful for novice developers as it is type-safe.
Nested Elements in JSX
In order to use numerous elements in a single component, you must have to wrap all of them in one container element. In this code example, we’ve nested all the elements within a single <div> container.
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Welcome to React JS tutorials </h1>
<h2>React is the well-known Javascript Library</h2>
<p>In these tutorials, we’ll teach you React JSX.</p>
</div>
);
}
}
export default App;
JSX Attributes
JSX use attributes with the HTML element just like we generally use with the regular HTML. Contrary to the regular HTML, JSX uses the camel case naming convention. For instance, class in HTML will transform to className in JSX because the class is the reserved name in JavaScript.
In order to deepen our understanding, see the below code example wherein we are using user-defined data demoAttribute for the <p> tag.
Code Snippet:
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Welcome to React Tutorials</h1>
<h2>React is the front-end Javascript Library</h2>
<p data-demoAttribute = "demo">Developed by Facebook</p>
</div>
);
}
}
export default App;
In JSX, we can incorporate attribute value in two of the following ways:
- As String Literals
We can describe the value of an attribute in double-quotes as depicted in the code below
var element = <h2 className = “firstAttribute”>Great Learning Platform</h2>;
This is how you can do it in the code example:
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 className = "hello" >Great platform for learning cutting-edge technologies</h1>
<p data-demoAttribute = "demo">Here you’ll find the best learning resources</p>
</div>
);
}
}
export default App;
- As Expressions
Using curly braces, we can easily specify the value of an attribute.
var element = <h2 className = {varName}> Never give up learning </h2>;
Code Example:
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 className = "demo" >{95+80}</h1>
</div>
);
}
}
export default App;
How to write JSX Comments
JSX allows us to put comments within our code so that anyone who views our code understands it easily. A comment starts with /* and ends with */. Besides, these forward and backward slashes are wrapped in curly braces.
An example
import React from 'react';
class App extends React.Component{
render(){
return(
<div>
<h1 className = "cats" >Never give up learning</h1>
{/* that’s the method of putting comments in JSX */}
</div>
);
}
}
export default App;
How to style JSX?
ReactJS only accepts inline styling. To set inline styles, you need to strictly adhere to the camelcase syntax. React compiler automatically incorporates ‘px’ following the number value of the specific element. The following code example depicts how to use styling in the element:
import React, { Component } from 'react';
class App extends Component{
render(){
var myStyle = {
fontSize: 80,
fontFamily: 'Times New Roman',
color: '#0000'
}
return (
<div>
<h1 style = {myStyle}>www.javatpoint.com</h1>
</div>
);
}
}
export default App;
Follow along with this code example, write it on your favorite code editor and see how the output would look like.