React - Introducing JSX

What is JSX?

Take a look at the example below:

import React from "react";

function App(){
    return (
       <div> 
          <Nav />
          <h3>This is a header</h3>
          <p>This is some text</p>
       </div>
    );
};

export default App;

JSX stands for 'JavaScript XML' and is a syntax extension for JavaScript. It is used to create DOM elements that are then rendered in the React DOM. Although it looks like HTML, it is actually an XML-like syntax specifically written for use in React. Interestingly, JSX is not valid JavaScript either. JSX needs to be compiled by a tool like Babel to be translated into regular JavaScript that a browser can understand. Put simply, JSX describes what the UI should look like, and React takes care of properly rendering it.

But this looks like HTML!

You can use all of the elements you would find in an HTML document in JSX, including <div>, <span>, <h1> - <h6>, <p>, <a> and many more. You can also add JSX attributes such as id and className (watch out, it's className rather than just class!). It's important to remember that this is not HTML and cannot be read as HTML by your browser.

Key Concepts

Top-level Elements and React Fragments

In the code example above, you may notice that a <div> encloses a number of child elements. JSX can only return one top-level element. The top-level element can be anything from a <div>, a <span>, an <a> tag, or even what is known as a react fragment. With a fragment, you simply enclose what you'd like to return in empty opening <> and closing tags </>. Fragments allow you to group a list of children without adding unnecessary nodes to the DOM.

We could refactor our example above to use a fragment:

import React from "react";

function App(){
    return (
       <> 
          <Nav />
          <h3 id="example">This is a header</h3>
          <p className="shortP">This is some text</p>
       </>
    );
};

export default App;

This will render the same elements to the DOM as the example above, but without an overarching <div> node.

JavaScript and JSX

JavaScript expressions can be embedded within JSX expressions, and must be places between { curly braces }. For example:

let sum = <p>{20 + 20}</p>;

All JavaScript code needs to be inside of curly braces. This is known as JSX Expression Syntax. Here are some valid things you can have inside of a JSX Expression:

• A string
• A number
• An array
• An object property that will evaluate to some value
• A map method (which will return a new array)
• More JSX

And there are things you cannot have in a JSX Expression:

• Any loop
• A variable declaration
• A function declaration
• If/else conditionals

JSX Conditionals

You cannot use if/else syntax in embedded JavaScript. You can express conditionals in other ways:

1. A ternary within curly braces
2. An if statement outside of a JSX element
3. Logical short circuit && operator

// Using a ternary operator

const toggleMode = (
   <button> 
        { isDarkMode ? 'Set Light Mode' : 'Set Dark Mode' }
   </button>
);

// Using an if statement outside of the JSX element

let option;

if (isDarkMode) { option = 'Set Light Mode' }
else { option = 'Set Dark Mode' }

const toggleMode = <button>{ option }</button>

// Using the && operator
<p>{isTrue && "This is also true"}</p>

Function Components & JSX

A function component must return JSX. Every function component in your React app must return one JSX element. This is where the single top-level element (or fragment) come into play.

Why use JSX?

JSX allows developers to write cleaner, easier to read code. You don't strictly need to use JSX, but it makes creating React applications easier by allowing programmers to use HTML-like syntax to describe what the UI should look like.

JSX represents objects. The React docs provide two examples, both of which will render identically:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

This is going to have exactly the same output as:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

In my opinion, JSX is easier to write and easier to read. JSX uses a declarative style of programming, which abstracts what Vanilla JavaScript takes a number of steps to do into a simple JSX expression of what we want to render. React then figures things out behind the scenes (with a little help from Babel, as I mentioned above).

For more information, try these links:
React Docs
Why use className instead of class?