What is JSX in React js

In this React js tutorial, we will learn all about JSX in React js and also we will understand how to use JSX in React JS. So we will cover:

• What is JSX in React JS
• Why we use JSX in React js
• Understand JSX in React js with example
• if condition in jsx react js
• if else in jsx react js
• for loop in jsx react js

What is JSX in React JS

JSX stands for Javascript XML, it is an extension of Javascript syntax, which is used in React to write HTML and Javascript together. It makes the React code simpler.

Syntax:

const unit = <h1 > Hello World<h1>;

The above tag syntax is not HTML or string, it is known as JSX. This is used with React to represent what the User Interface should look like. JSX comes with full-power Javascript, which means inside the JSX code we can write some javascript expressions, ultimately JSX is translated into Javascript which is understood by the browser.

For example, here we will use a Functional component, so first we will declare a variable with a value, then we will use that variable with the JSX inside the component.

const print= "Hello World"
function Hello(){
return <h1>{print}</h1>
}
export default Hello

In JSX we will display the variable or expression using the {}, so this set of code will return the Hello World in the browser. This is how we can declare the expression in JSX.

Read Components in React js

Why do we use JSX in React js?

Here we will see Why we use JSX in React js.

This is the reason why we use JSX in React js:

• JSX is quicker than regular javascript because it performs optimization while translating the JSX code to Javascript.
• Instead of splitting technologies by putting markup and logic in separate files, but React component contains both.
• React js is type-safe, and most of the bugs find in the compilation time.
• React js makes it easier to create templates.

Read Props in React js

How to use JSX in React js with example

Here we will see how to use JSX in React JS for an example.

To see the examples we are using VS code editors, so here I have created a file with the name ‘jsxexample.js’. And we have another index.html file, which contains a div element in the body part i.e.

 <div id="root"></div>

ReactDOM.createRoot()

First, we will see what is ReactDOM.render() is?. The ReactDOM renders the component or JSX element to the DOM(Document object model). And the render() is used to render the app in the browser.

ReactDOM.render() takes two arguments, the first argument is the element or component you want to render, and the second argument is the HTML element or the target node to which we want to append it.

Syntax:

ReactDOM.render(element,container[,callback])

Write the below code to show the hello world in the browser

ReactDOM.render(<h1>Hello World!</h1>, document.getElementById('root'))

ReacDOM.render() is no longer supported for React 18 version. If you are using the previous version, then you can use the above syntax and code to show Hello World.

If you are using React 18, instead of ReactDOM.render() we will use ReactDOM.createRoot() to render the app in browser.

To render the react element first pass the DOM element to ReactDOM.createRoot(), then pass the React element/component to root.render()

Syntax:

const root= ReactDOM.createRoot(document.getElementById('root'));
root.render(
  element


);

To print Hello World in the browser we will use the below code:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <h1>Hello World!</h1>
);

Run the React app with the npm start command, you can see the below output on your screen

JSX expression

React js expression allowed us to use normal javascript expression with JSX and expressions are used in JSX inside the {} braces.

For example, use the below code, to print Good Evening Alex, here Alex is the expression that is assigned to the name variable.

import React from 'react';
import ReactDOM from 'react-dom/client';

const name = "Alex";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <h1> Good evning {name}</h1>
);

The above code will show you the below result:

Read State in React js Hooks

JSX attribute

JSX uses the camelcase convention for attributes, instead of using a normal naming convention of Html. The class in Html becomes className in JSX, so the reason behind this is some attributes in HTML are the reserved keyword in JSX.

We can also define custom attributes in JSX, so to define custom attributes we need to use the data -prefix. In the below example we will use the custom attribute data-demoAttribute as an attribute for the <h1> tag

import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<div> <h1 data-demoAttribute = "demo">Welcome to react js</h1> </div>
);

The above code will return ‘Welcome to react js’

Styling

React allows us to use inline style. To set inline style we need to use camel-case syntax.

For example :

import React from 'react';
import ReactDOM from 'react-dom/client';
var styles = {    
    fontSize: 50,
    color:'blue'
 }

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<div> <h1 style = {styles}>Welcome to react js</h1> </div>);

The output for the above code will return ‘Welcome to react js’ with font color blue:

Comments in React

We can comment in jsx with /* and ends with */. Also, we can add comments in JSX by wrapping them in the curly braces.

Syntax:

{/* This is jsx */}

Read What is react js and react native

If condition in JSX react js

Here we will see an example of the if condition in JSX in react js.

So inside JSX, the if-else statement does not work, because JSX is syntactic sugar for object construction and function call. We can create an if else condition outside the JSX to determine which components should be used.

So here we will create a file hello.js present in the component folder which is present in the src folder.

Then we will create a function component, that will check if the value of i is greater than 3, then it will return ” value is greater than 3″, else it will return ‘value is less than 3″. Next, we will export the component to index.js.

So write the below code in the hello.js file:

function Hello(){
    var i=5;
    if (i<=3) {
        return <h1>"value is less than 3"</h1>
    }
    else{
      return <h1>"value is greater than 3"</h1>
    }
  }
 export default Hello

And then import the component into the index.js file, then call the component inside the render method.

import React from 'react';
import ReactDOM from 'react-dom/client';
import Hello from './Components/Hello';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <Hello />
);

As value of i =5, so the output will be ‘value is greater than 3’, which you can see in the browser.

And if value of i=2, so the output will be ‘value is less than 3’, you can see in the browser.

This is an example of the If condition in JSX react js.

Read React js form tutorial

For loop in jsx react js

Here we will see an example to print a simple for loop in JSX react js.

In this example, we will create an empty array, and then with the for loop, we will push the value from 1 to 5 using push(), and then we will print the value.

So, in the hello.js file, we will write the below code:

function Hello(){
    const printNumbers0To5 = () => {
        const row = [];
        for (var i = 0; i < 5; i++) {
          row.push(<p key={i}>{i}</p>);
        }
        return row;
      };
    
      return (
        <div>
          {
            printNumbers0To5()
          }
        </div>
      );
}


 export default Hello

And in index.js, we will call the function, so write the below code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import Hello from './Components/Hello';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <Hello />

);

Once you run the app, you can see the below output:

This is how we can create for loop in JSX react js.

Read State in React js

Conclusion

In this React js tutorial, we understand about jsx in the react js. And also we covered the below topics:

• What is JSX in React JS
• Why we use JSX in React js
• Understand JSX in React js with example
• if condition in jsx react js
• for loop in jsx react js