DEV Community

Sarah Chima
Sarah Chima

Posted on

9 Things you should know about JSX

    const hello = <h1>Hello World</h1>
Enter fullscreen mode Exit fullscreen mode

The line of code above is written in JSX. JS what??

You might have come across the term JSX before but don't know what it is. You probably have even used it or are creating applications with it. In any case, this article should interest you. It discusses 9 things you should know about JSX. This includes what JSX is and how it can be used. Let's get started already.

What JSX is

JSX is a syntax extension for JavaScript. Basically, it extends JavaScript so that HTML/XML like structures can be used with JavaScript. It allows developers to use HTML syntax to compose JavaScript components. This makes it possible to have a clear and familiar syntax for defining DOM tree structures with attributes.

Although it looks a lot like HTML, it actually belongs to a JS file. Since it's an extension for JavaScript, your browser will not understand it unless it is compiled into plain JavaScript. So you need to use a JSX compiler such as Babel for it.

JSX is a JavaScript Expression

JSX expressions are JavaScript expressions too. When compiled, they actually become regular JavaScript objects. For instance, the code below:

const hello = <h1 className = "greet"> Hello World </h1>
Enter fullscreen mode Exit fullscreen mode

will be compiled to

    const hello = React.createElement {
       type: "h1",
       props: {
           className: "greet",  
           children: "Hello World" 
          }
    }
Enter fullscreen mode Exit fullscreen mode

Notice that className was used instead of class. I'll explain that shortly.

Since they are compiled to objects, JSX can be used wherever a regular JavaScript expression can be used. It can be saved in variables just like we did above, used in loops, passed as arguments to functions, can be returned from functions, stored in arrays and objects... wherever JavaScript expressions can be used.

Nesting in JSX

Just like HTML you can nest several lines of JSX within one element. To do that though, you need to nest all of them in brackets () like the example below.

    (
       <div>
            <h1> Hello World!!! </h1>
            <p> I am a human </p>
       </div>
    )
Enter fullscreen mode Exit fullscreen mode

One outermost element please

A JSX expression must have only one outer element.Therefore, while this will work

    const headings = (
        <div id = "outermost-element">
           <h1>I am a heading </h1>
           <h2>I am also a heading</h1> 
        </div>
    );
Enter fullscreen mode Exit fullscreen mode

this will not work

    const headings = (

       <h1>I am a heading </h1>
       <h2>I am also a heading</h1>

      );
Enter fullscreen mode Exit fullscreen mode

For the love of camelCase

Since JSX is closer to JavaScript than HTML, JSX properties make use of camelCase naming convention instead of HTML attribute names. That was why in point 2, className was used and tabIndex is used instead of tabindex. This is also true of event listeners in JSX. While lowercase is used for event listeners in HTML, camelCase is used in JSX.

    This will work in JSX
    <button onClick = {handleClick}>Click Me</button>

    This will not work in JSX
    <button onclick = {handleClick}>Click Me</button>
Enter fullscreen mode Exit fullscreen mode

JavaScript in JSX

You can embed JavaScript in JSX, but to do this, you need to make use of curly braces. For instance if you want to add 2+3 in a JSX expression, you'll do this like this.

    <p> 2+3 = {2+3} </p>

    will result to 

    2+3 = 5
Enter fullscreen mode Exit fullscreen mode

Displaying JSX

For JSX to appear on the screen of a browser, it has to be rendered. ReactDOM.render() is the most common way to render JSX. ReactDOM is a JavaScript library which contains several methods that deal with the DOM in some way.

ReactDOM.render() takes the JSX expression, creates corresponding tree nodes and adds it to the DOM. That way your JSX expression appears on the screen. To get your JSX to appear onscreen, you pass two arguments to the ReactDOM.render(). The first argument is the JSX you want to render, which could the raw JSX itself or the name of a variable which contains JSX. The second argument is the target element in the html file where you want the JSX to be appended to.
To understand better, look at the following example.

    const names = (
        <ul>
            <li>Sarah</li>
            <li>Annabel</li>
        </ul>
       );

    ReactDOM.render(names , document.getElementById("app"));
Enter fullscreen mode Exit fullscreen mode

Try it on Codepen

Self Closing Tags in JSX

For HTML elements that have self closing tags such as <img>, <hr>, <input> and br, the forward slash before the closing angle bracket should be included in JSX. While this is optional in HTML, it is compulsory in JSX.

    while this is good in JSX
    <hr />

    this is not good in JSX
    <hr>
Enter fullscreen mode Exit fullscreen mode

Don't forget the Keys

When making a list in JSX, your list should include a JSX attribute called Keys. Keys are similar to id and they are used internally by React to keep track of the list items. Without this, React might scramble the order of the list. So if the order of your list is important, the key attribute is important. Below is how you use keys.

   const toDO = (
        <ul>
            <li key = "todo-1"> Design </li>
            <li key = "todo-2"> Develop </li>
            <li key = "todo-3"> Be Awesome </li>
        </ul>
    );
Enter fullscreen mode Exit fullscreen mode

And there you have it, 9 things you should know about JSX. Did I miss anything? I'll love to know about it.

Top comments (4)

Collapse
 
metric152 profile image
Ernest

This was a nice list of gotchas for JSX. I'm not a big fan of the syntax but this will help someone getting started for sure.

Collapse
 
michaelbraae profile image
Michael Braae • Edited

Good thing to note,

JSX uses camel for the name and the original syntax for the value for some styles. EG:

<div style={{ wordWrap: 'break-word' }} ></div>

Collapse
 
katzy687 profile image
Natti Katz

Niceee article. About to dive into React shortly and this helps greatly. JSX has been the most offputting syntax aspect for me, but this article cleared up a lot for me.

Collapse
 
sarah_chima profile image
Sarah Chima

I'm glad you like it Natti. Thanks for reading.😊