In the last blog, we looked at how to get started with ReactJS. In this blog, we will see what JSX is along with its uses.
Why JSX?
Before getting started with JSX we should understand what is JSX and why it is used in React. From our research, without JSX in React, you can’t render UI elements or display data that you pass through your webpage.
Technically, if we summarize, JSX inherently couples the rendering logic with other UI logic such as event handling, state changing, data displaying etc. The purpose of JSX is to make coding easier.
What is JSX
To work with React you have to find a syntax extension to JavaScript called JSX, which looks like an XML tag (but is not). This syntax extension describes the look of the UI. JSX is the alternative of React.createElements. It is a JavaScript extension that allows us to define React elements using syntax that looks similar to HTML.
In JSX, an element’s type is specified with a tag. The tag’s attributes represent the properties. The element’s children can be added between the opening and closing tags.
Example
const companyName= 'Acadgild';
const element = <h1>Hello, {companyName}</h1>; //JSX
The above example illustrates JSX. In the first line, we declared a constant – company name, which is a String. It is not a JSX.
In the second line, we declared a constant by element. This funny tag syntax is neither a string nor HTML. It is a JSX. CompanyName is been enclosed within flower curly braces in HTML element h1 with opening and closing tags.
It will render the message Hello Acadgild in the web page.
Therefore, we can say that JSX syntax helps us render content in the UI.
You can try it out here.
When we compile react, it transpiles the code into ES5 because the browser doesn’t support ES6. Therefore, Babel is a transpiler which compiles JSX down to React.createElement() calls.
Note: JSX will look similar to HTML. Most of the rules result in syntax that is similar to HTML. Let’s take one example below:
In HTML unordered list
<ul class=”Acadgild”> <li>Data Science</li> <li>Data Analytics</li> <li>Full Stack </li> <li>Android</li> </ul>
In JSX unordered list
<ul class=”Acadgild”> <li>Data Science</li> <li>Data Analytics</li> <li>Full Stack </li> <li>Android</li> </ul>
In the above example, you can see it gives an error because the class is a keyword which is reversed in React for other purposes. So instead of class, we can write className.
You can see className is used instead of class to differentiate plain HTML and React.
In the right-hand side of the above image, we can see how babel transpiles our code into a code which can be recognized by React to create Objects that can be used to construct the DOM.
How JSX is used in Component
JSX can also be used in the React Component. Below example will help you understand how to write JSX in the component.
The above example shows how JSX is used in React. You can see that there are a group of tags from line number 9 to 16 which are enclosed in a div tag. This entire code from line number 9 to 16 is JSX. If you see at line number 11 there is something called Users, this is a user-defined Component. As you can see, we have used it a number of times. This is possible because of JSX.
We have defined Users Component as:
If you look closely, we have defined this component completely different from the previous one. We have used this User component in the previous Component by exporting it. In the above example, we have written some markup, which is also a JSX, that will be transpiled as:
Further, if you check the UserList Component transpilation, it will be as shown as:
So, if there was no JSX, we would have to write lots of lines of code which is not in line with the philosophy of React.
JSX Tips
Now some useful tips when you are working with JSX:
1.Nested Component
JSX allows you to add components as children of other components. As you can see in above example, in the UserList Component, we have created nested Component as User.
2. JavaScript Expression
You can’t write if statement in JSX example as follows:
As you see, it gives an error.
You can check it when you write a JSX in the component and set it up locally. After rendering, you will find h1 value is 2 in the console. It means the operator can be passed to the certain operation.
We can also use conditional operators as well. Below example illustrates the use of a conditional operator in JSX.
Evaluation
The JavaScript that is added in between the curly braces will get evaluated. This means that operations such as concatenation or addition will occur. The below code illustrates the invocation.
<h1>{"Hello" + this.props.title}</h1>
<h1>{this.props.title.toLowerCase().replace}</h1>
function appendTitle1({this.props.title}) {
console.log(`${this.props.title} is great!`);
}
Mapping Array to JSX
We can map an array to the JSX element. The below example will make you understand how to use Javascript Array helper Method map().
This is the App.js file. Here, we have created an Object literal inside render() which will be passed to Home Component.
As you can see, we have passed a child Component Home to the div tag. This Home Component takes User as props for displaying User Skills.
The below example describes the mapping of an Array. Home Component renders Skills of User. So inside Home Component render() method, we will write:
We have created an unordered list for describing the Skills of a User
<ul>
{
this.props.User.Skills.map(()=>{
<li key={i}>{Skill}</li>
})
}
</ul>
The above code uses the Array Helper method map() for rendering list of Skills for a User.
Conclusion
JSX looks clean and readable, but it can’t be interpreted with a browser. The drawback of JSX is that it is not readable by the browser. Before our code can be interpreted by the browser, it needs to be converted from JSX into pure React. All JSX must be converted into createElement calls or factories. Luckily, there is an excellent tool for this task: Babel which translates into createElement calls.
The main advantage of JSX is it provides us with a nice, clean way to express React elements in our code that makes sense to us and is immediately readable by the engineers that make up our community. In the coming blogs, we will understand Components and Props.
