Signup/Sign In

Diving Deeper into JSX - ReactJS

Posted in Programming   LAST UPDATED: DECEMBER 1, 2019

    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;

    Using JSX with ReactJS

    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"));

    Using JSX in ReactJS

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

    Using JSX with ReactJS

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

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

    Using JSX with ReactJS

    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.

    JSX with JavaScript expression in ReactJS App

    And the output will be:

    JSX with JavaScript expression in ReactJS App

    See the magic world of JSX surprise

    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:

    JSX with JavaScript expression in ReactJS App

    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:

    JSX with JavaScript expression in ReactJS App

    Stay tuned guys, there's more to it.smiley

    Published by: jasmeetkr