What exactly is JSX?

JSX is simply HTML code inside of a JavaScript function. In a React application, we use components and inside components we write a JavaScript function. Inside the function we write codes using the JSX syntax to make the code work. JSX syntax looks a lot like regular HTML, but are stricter and displays dynamic results. So, they are feature loaded.

Note : JSX stands for JavaScript XML.

Difference between JSX and React?

The main point of difference between the two is that JSX is just a syntax extension used inside React components while on the other hand, React is a full-fledged JavaScript library.

How to convert HTML to JSX with an example

Suppose you have this pure HTML code below :

<h1>Table of Contents</h1>
      <ul>
        <li>Introduction</li>
        <li>Explanation with Examples</li>
        <li>In-depth analysis</li>
      </ul>

Now, to put it inside your React component you have to write it like this :

function TableOfContents() {
  return (
    <div>
      <h1>Table of Contents</h1>
      <ul>
        <li>Introduction</li>
        <li>Explanation with Examples</li>
        <li>In-depth analysis</li>
      </ul>
    </div>
  );
}

export default TableOfContents;

In the code block above, we’ve converted the HTML markup into JSX simply by creating a JavaScript function and returning all the HTML codes inside a single div tag.

The JSX Rules for writing code

1. Multiple tags should be wrapped inside a single root element

If you’re using multiple tags inside a component, wrap them with a single root element such as <div> & </div> or <> & </>. This is shown below :

function TableOfContents() {
  return (
    <div>
      <h1>Table of Contents</h1>
      <ul>
        <li>Introduction</li>
        <li>Explanation with Examples</li>
        <li>In-depth analysis</li>
      </ul>
    </div>
  );
}

// wrapped inside <div> and </div> 

You can also do this :

function TableOfContents() {
  return (
    <>
      <h1>Table of Contents</h1>
      <ul>
        <li>Introduction</li>
        <li>Explanation with Examples</li>
        <li>In-depth analysis</li>
      </ul>
    </>
  );
}

// wrapped inside <> and </>

2. You have to close all tags

You have to close all tags in JSX without fail. For example <p>lorem ipsum</p> or <h1>Hello</h1> which we usually do in HTML. Also self closing tags like <img> needs to be exclusively closed like <img />.

3. Camel-case should be used in most cases

We already use camel-case in most cases in web-dev, but you need to be extra careful while using JSX. For example, CSS classes inside JSX are generally represented by className like so :

function TableOfContents() {
  return (
    <div className= "TOC">
      <h1>Table of Contents</h1>
      <ul>
        <li>Introduction</li>
        <li>Explanation with Examples</li>
        <li>In-depth analysis</li>
      </ul>
    </div>
  );
}

// use 'className' instead of 'class'

Using curly braces with JSX with example

Use of single curly braces

Consider this code snippet from our other example :

import images1 from "../images/picture1.jpg";
import images2 from "../images/picture2.jpg";
import images3 from "../images/picture3.jpg";
import "../App.css";

function NextPage() {
  return (
    <div className="ImgBox">
      <h1>Follow these people</h1>
      <div className="Card">
        <img src={images1} alt="woman" />
        <img src={images2} alt="woman" />
        <img src={images3} alt="woman" />
      </div>
    </div>
  );
}

export default NextPage;

In the above code block we’ve used curly braces { } to render the import statement to display image1, image2, and image3 from other folder. The function works.

Let’s see another example :

export default function SpeechList() {
  const myName = 'Abraham Lincoln';
  return (
    <h1>This is {myName}'s most famous speech</h1>
  );
}

// output : This is Abraham Lincoln's most famous speech

Use of double curly braces

Double curly braces are generally used to pass Objects or even for passing inline styles in JSX since they are already wrapped in curly braces in CSS and JS respectively. For example <ul style={{ backgroundColor: ‘red’ }}> .

Here’s another real world example :

export default function MyProfile() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'white'
    }}>
      <li>I am 6 feet tall</li>
      <li>I love to read books</li>
      <li>I'm working on a ReactJS project</li>
    </ul>
  );
}