10 Things You Should Know About JSX

Published in

The Startup

3 min readNov 4, 2020

JSX is a Markup language that looks similar to HTML but actually is a syntax extension for JavaScript. It’s easier to write code instead of pure Javascript. It allows developers to use HTML syntax to compose JavaScript components. Since it is a javascript extension, so the browser will not understands it unless you use a JSX compiler such as Babel. JSX used in order to create React elements. It provides syntactic sugar for the React.createElement(component, props, …children) function.

JSX as variables

JSX elements can act as values for identifiers. The following example shows how to declare a variable with a JSX element as the value.

const javascript = <h1 className = "heading"> Hello Javascript </h1>

Behind the Scenes

How does JSX work behind the scenes?

JSX code:

const javascript = <h1 className = "heading"> Hello Javascript </h1>

Compiles into:

const javascript = React.createElement {
       type: "h1",
       props: {
           className: "heading",  
           children: "Hello Javascript",
          };
    };

Here we can clearly see that JSX compiles into a regular javascript object.

JavaScript Expressions as Children

SX supports all JavaScript Expressions. You can pass any JavaScript expression as children, by enclosing it within curly braces {}.

<span>Sum: 2+3 = {2+3} </span>
const year = "Current year: {new Date().getFullYear()}"

Nesting in JSX

You can write multiple lines in JSX within one parent element.

const name = (
        <div>
           <h1>Name one </h1>
           <h2>Name 2</h1> 
        </div>
    );

It will not work,

const name = (
        <div>
           <h1>Name one </h1>
           <h2>Name 2</h1> 
        </div>        <div>
           <h1>Name one </h1>
           <h2>Name 2</h1> 
        </div>    );

you must have used only one parent element.

now it will work.

const name = (
        <div>
          <div>
             <h1>Name one </h1>
             <h2>Name 2</h1> 
          </div>
          <div>
            <h1>Name one </h1>
            <h2>Name 2</h1> 
          </div>
        </div>
);

Use className instead of class

We all know for and class is JavaScript reserved keywords. So that we can't use these in JSX. class attribute will be replaced with className and use htmlFor instead of for. One additional thing is comments are no longer written as <! — comment — >, but instead are written like {/* comment */}

<div className="name">Your First name</div>
<label htmlFor="">Label</label>
{/* Your comment here */}

camelCase

JSX properties make use of camelCase naming convention instead of HTML attribute names.

<button onClick = {handleClick}>Click Me</button>
<div className = "hello"> Hello From Div </div>
<label htmlFor="">Label</label>

Booleans, Null, and Undefined Are Ignored

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

In the above example, JSX expressions will all render the same thing. This can be useful to conditionally render React elements.

<div>
  {showTable && <Table />}  
</div>

Don’t forget the Keys

Keys are similar to id and they are used internally by React to keep track of the list items. So when you create a list in JSX, should include a key attribute.

const products = (
        <ul>
            <li key = "product-1">Chair</li>
        </ul>
    );

Props in JSX

The values assigned to each attribute are passed down as properties (props) to the React element.

const Profile = (props) => (
  <div className="product">
    <h3>Product name: {props.name}</h3>
    <p>Description: {props.description}</p>
  </div>
);

And there you have it, 10 things you should know about JSX. Hopefully, you learned something today. Happy Coding.