3: Working with JSX

Learning Goals

At the end of this Tutorial, you will be able to:

• Understand JSX syntax and how it extends JavaScript to simplify the creation of components in React.

About JSX

JSX is syntax extension to JavaScript that makes is easier to build UI components with React.

Consider the React statement below.

root.render(
   <h1>Hello, world!</h1>
)

The part within parenthesis () is JSX. It looks like plain HTML that is written inside JavaScript.

JSX can accept variables, written inside curly braces { }. For example:

const firstName = 'John';
root.render(
   <h1>Hello, {firstName}</h1>
)

In fact, you can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2, user.firstName, formatName(user) – even loops and conditional if statements.

However, because JSX is not valid JavaScript, JSX code must be compiled into JavaScript. The transpiler Babel is a popular tool for this process.

Finally, one important thing to know about JSX is that it must return only a single element. This one parent element would wrap all of the other levels of nested elements.

React elements as JavaScript objects

The Babel transpiler compiles JSX down to React.createElement() calls that JavaScript objects with properties.

Exercise 3.1: Viewing DOM and React elements

Follow these steps

1. Open the index.html file. This contains a single div tag as shown below.

   <div id="root"></div>

2. Within the <script> tags, enter the following JavaScript code.

   // JavaScript
   const h1 = document.createElement("h1");
   h1.innerText = "Hello, JavaScript";
   h1.className = "header";
   document.body.append(h1)
   console.log(h1);
   console.log(h1.innerText);

3. And now enter some lines that combine plain JavaScript with JSX as follows.

   // JSX
   const root = ReactDOM.createRoot(document.getElementById('root'))
   const element = (
      <h1 className="header">Hello, JSX</h1>
   )
   console.log(element)
   root.render(
      element
   )

4. Save the index.html file and verify that both messages display correctly.

Now, let's look at the output from the file in the JavaScript console.

As you can see, what React is creating with JSX are JavaScript objects with properties (props) that describe the object. Text is a child object.

You can think of JSX as like a function that, when it's run, returns objects that React can interpret and use to create elements that are rendered on the web pages.

Declarative and imperative programming

Prograamming languages can be divied into two broad categories:

1. Declarative: What should be done? "Just tell me what to do and I will worry about how to get it done".
2. Imperative: How should it be done? "Describe to me every step on how to do something, aand I will do it."

In the example below, you can see all the steps needed with JavaScript to output some content to a container on a web page. This is very imperative - and a lot of typing for the developer.

// JavaScript
// create element
const h1 = document.createElement("h1");
// give element some text content		
h1.innerText = "Hello, JavaScript";
// add CSS class to element	
h1.className = "header";
// append element as aa child of web page	
document.body.append(h1);

With React, this can be achieved in a much more eclarative way.

// JSX
const root = ReactDOM.createRoot(document.getElementById('root'))
const element = (
   <h1 className="header">Hello, JSX</h1>
)
root.render(
   element
)

 Back to Top