React JSX Basics

Over the last year I've been on a mission to learn modern JavaScript. Much of the language has changed and improved since my initial exposure to it, and I've found no shortage of things to explore. I've also landed on React as my front-end framework of choice and have been enjoying working with it immensely.

For some time I've wanted to sit down and think through the different basic building blocks of React, so this will be the first of a series of posts covering React fundamentals as I understand them.

Today let's talk about JSX.

What is JSX?

JSX, or JavaScript XML, was introduced as React's syntax extension to JavaScript. React embraces the idea that rendering logic should be coupled with other UI logic -- things like how events are handled, how data flows through the application, and how to deal with changes to application state over time.

It's worth noting that JSX is not a requirement for using React: you can do everything without JSX that can be done with JSX. However, many people find JSX to be a useful tool for working with UI elements inside React's .jsx files. It also helps React produce more useful error and warning messages.

Let's look at a basic example of JSX:

let greeting = <h1 className="greeting">Hello, world!</h1>

If we run this code in a normal JavaScript file it will immediately throw a SyntaxError at the < because it isn't valid JavaScript syntax.

We're able to mix what looks like HTML with JavaScript here because under the hood it gets 'translated' into valid JavaScript at runtime with a tool called Babel.

An explanation of Babel is beyond the scope of this post. Their documentation is excellent if you'd like to learn more!

The output from Babel will look like this:

let greeting = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!"
)

Note that because React does all the heavy lifting of turning our JSX into React.createElement calls, React must always be in scope in our JSX files.

Embed Expressions with JSX

We can use any valid JavaScript expression) (but not statements) inside curly braces in our JSX.

I like to think of curly braces in JSX as indicating that we are stepping out of HTML-land and into JavaScript-land.

As an example, imagine that we have an element of an application that displays a random number between 0 and 100 every time a user visits the website. Using JSX we can do something like this:

let randomNumber = Math.floor(Math.random() * 100)

;<p>Your random number is: {randomNumber}</p>

We can wrap JavaScript expressions in curly braces inline in our JSX and they will be translated into whatever value the expressions evaluate to at runtime.

Use JSX to Set HTML Attributes

We can also use JSX to set HTML attributes, allowing us to use dynamic values as attributes on HTML elements. Let's look at an example:

let element = <img src={userImage} />

When we use this element, we can render different images depending on the useImage value passed into the src attribute. This allows us to reuse the same element with different values, providing flexibility and reusability in our code. The useImage value could come from anywhere in our application -- an HTTP request, user input, etc. Our JSX is the same, it is only concerned with rendering the final value.

Children in JSX

JSX tags can also contain children, just like HTML elements:

let element = (
  <div>
    <h1>This is a nested heading!</h1>
    <p>We can nest as many children as needed!</p>
    <div>
      <ul>
        <li>Turtles</li>
        <li>All</li>
        <li>The</li>
        <li>Way</li>
        <li>Down!</li>
      </ul>
    </div>
  </div>
)

We wrap this JSX in parentheses to avoid issues with automatic semicolon insertion (ASI))

We can also use JavaScript anywhere in this hierarchy of children, just like with any other JSX element.

That wraps up our brief look at what JSX is and how it works. Remember that JSX is just syntactic sugar on top of normal JavaScript.