Diving Deeper into JSX - ReactJS

We have already learned in the last tutorial that JSX is a syntax extension to JavaScript. However, it is also a preprocessor step that adds XML syntax to JavaScript. In the previous section, we saw that this helps in creating elements, in a much simpler and elegant way as compared to the createElement method.

Though it looks very similar to HTML but its a Javascript XML. It is recommended to use JSX to describe what UI should look like. JSX allows React to show more useful error and warning messages.

JSX and Babel

JSX uses a toolchain called Babel to transform JSX to plain JavaScript.

For example: Let's consider the following React element,

const el = <h1> Hello World <h1>

What Babel will do, it will covert this JSX code to plain JavaScript Code, shown as below,

React.createElement("h1", null, "Hello World")

Let's take another example,

const el = <h1 className="bg"> Hello World <h1>

The difference to be noted over here is the name of the attribute, which would be class attribute in basic HTML code, but in JSX it is className because in JavaScript, the class is a reserved word.

This will get converted to,

React.createElement("h1", {className:"bg"}, "Hello World")

Let's create another React component,

const el = <Student />

This will get converted to,

React.createElement(Student, null)

JavaScript Expressions in JSX

We can put any valid JavaScript expression inside the curly braces in JSX. You can pass any JavaScript expression as children, by enclosing it within {}.

The syntax is simple,

{JS Expression}

For example:

var el = <h1>{10+20}</h1>

Here, 10 + 20 is an expression, that will evaluate and give the result. Or to enhance the output we can also write:

var el = <h1>Value: {10+20}</h1>

So the output will show Value: 30, whenever we'll render this element.

Time for an Example

So, open your VSCode, and start your server by writing the following command on the terminal:

npm start

Your development server will start after a few seconds.

We will work in the three files i.e. App.js, index.js, and index.html.

1. To call app.js in index.js we are exporting the element created, using the statement export default el;

2. For importing elements from app.js and rendering to index.js with the element id as root, we do the following,

ReactDOM.render(el, document.getElementById("root"));

3. And you will find this root id in index.html, as shown below:

The el element will get rendered in the div element with id="root"

And you can see the output on the web page as:

So, in the above 3 steps, we created an element using JSX in our app.js file, mapped it with a div tag in the index.js and then created a div tag in the index.html in which it gets rendered.

JSX with JavaScript Expression

Now, instead of a simple string, let's put some mathematical expression, using the curly braces.

And the output will be:

See the magic world of JSX

Similarly, you can display a dynamic value of a variable, by making the following changes in the App.js file:

import React from "react";

// using a variable
var name = "Jaz";
const el = <h1>Hello {name}</h1>;

export default el;

You can also define a function and render it through JSX.

import React from "react";

// using a function
function show(name){
   return name;
}

const el = <h1>Welcome to the world of {show("JSX")}</h1>;

export default el;

This will give the output as:

Let's work on Object Property:

import React from "react";

// using Object Property

let user = {
   firstname : "Jaz"
};

const el = <h1> Hello {user.firstname} </h1>

And the output will be:

Stay tuned guys, there's more to it.