JSX in ReactJS

JSX is Syntax Extension to JavaScript. You may have seen some template languages like Handlebars, Mustache etc. But JSX is different.
JSX creates HTML elements for particular component. And ReactJS renders it to DOM.

Why use JSX?

ReactJS does not separate HTML and JavaScript by putting them into separate files. It separates HTML and JavaScript logically.
It is not mandatory to use JSX in ReactJS. But JSX makes component development very easy and simple. It is more near to JavaScript than HTML. So that you can use JavaScript expressions inside JSX.

Add JSX in component

We will start by adding JSX into a component.


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

class App extends React.Component{
    render(){
        return (<h1>This is React Application.</h1>);
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

Open above code in codepen.

In above code, In App component, <h1>This is React Application.</h1> is JSX. It is just like HTML but it is a lot different. And <App /> is also JSX.

So basically, component's HTML is rendered by JSX you return in render() method.

Nested elements in JSX

You can have multiple elements in JSX but remember to wrap them with a single element. Let us have a look at an example.


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

class App extends React.Component{
    render(){
        return (
            <div>
                <h1>This is React Application.</h1>
                <h2>Make your self an application in ReactJS.</h2>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

As you can see from above code, App component has multiple elements in JSX which is wrapped by div.

User-defined components in JSX

It is very easy to use user-defined components in JSX. Have a look at the below example.


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

class MyComponent extends React.Component{
    render(){
        return(
            <div>
                It is very easy to use this component in JSX.
            </div>
        );
    }
}

class App extends React.Component{
    render(){
        return (
            <div>
                <MyComponent />
                <MyComponent />
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

In above example, we have used <MyComponent /> is JSX. User-defined component is self closing.

Naming Convention

HTML tags in JSX should be used just as it is. So <div> in JSX will be same <div>. But user-defined objects should always start with capital letter like <MyComponent />.

So it is recommended to always start the name of your components with a capital letter.

Attributes in JSX

JSX will be compiled by ReactJS before adding it to DOM. So attributes are named in camelCase. Please have a look at the below example.


import React from 'react';
import ReactDOM from 'react-dom';
import logo from '../images/logo.png';

class App extends React.Component{
    render(){
        return (
            <div className="introduction">
                <div tabIndex="0"> This is a component </div>
                <img src={logo} />
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

As per above code, we have used className instead of class and tabIndex instead of tabindex.
You can use expression in attributes as we have imported logo image and assign it to src attribute.

Expressions in JSX

You can add JavaScript expressions in JSX. You need to wrap them between { and }.
Let us have a look at an example.


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

class App extends React.Component{
    render(){
        var showName = true;
        return (
            <div>
                <h3>{1+4}</h3>
                <h4> {showName ? "LearnPerDay" : "Not telling you"} </h4>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

Open above code in codepen.

As per the above code, you can add JavaScript expressions easily in JSX and it is very useful.
You can use if statements in expression.


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

class App extends React.Component{
    render(){
        let number = 2;
        let description = "";
        if(number === 2){
            description = <Description />
        }
        return (
            <div>
                {description}
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

As per the above code, you can also use user-defined components in conditional statements in JSX.

Styling in JSX

Styling in JSX is a little different than HTML. Let us have a look.


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

class App extends React.Component{
    render(){
        return (
            <div style={{color:'red', fontSize:'30px', backgroundColor:'blue'}}>
                This is test html.
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

Open above code in codepen.

As you can see, style attributes are in camelCase instead of a hyphen. So font-size will be fontSize in JSX.

Comments in JSX

Adding comment in JSX is little different than HTML or JavaScript. You need to add curly brackets for comment. Then for single line comment, // is used and for multiline comment /*...*/ is used.


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

class App extends React.Component{
    render(){
        return (
            <div style={{color:'red', fontSize:'30px', backgroundColor:'blue'}}>
                This is test html.
                {
                    //This is single line comment
                }
                {
                    /* 
                        This is multiline comment in 
                        which you can have multilines,
                        Here is your multilines.
                    */
                }
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

React should be there

When you are using JSX, React library should always be imported because JSX finally gets compiled to React.createElement.
Let us have a look at an example.


import React from 'react';
import ReactDOM from 'react-dom'; 
import App from './App';

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

In above code, We are not using React library. We are using App and ReactDOM, but still we need to import it. Because, while using JSX, React must be present ( It should be in scope. )

Conclusion

In this section, we have learned about JSX in ReactJS.
In the next section, you will learn about states in ReactJS.