Rendering JSX

This byte assumes you have created an app using create-react-app.

Inside the project, take a look at index.js.

This file is the entry point of our app - everything else that goes on will happen via this one.

At the top we have a few import statements - import is just a more modern version of require, so import React from 'react'; is effectively the same as const React = require('react');

Since we are using Babel now, we can use the more modern syntax. We will be doing so, because it's good to get used to these things.

Whenever you are writing React code, you need to import the React library at the top of the file in this way so that it is in scope.

JSX

Now take a look at this code in app.js:

<h1>Learn React</h1>

Change this to:

<h1>Hello World!</h1>

This looks like HTML, but it isn't - it is actually JavaScript. More accurately, it is JSX, which is a syntax extention to JavaScript.

JSX produces React elements, which describe what you want to see on the screen. Elements are the smallest building blocks of React.

In HTML, we can set properties on elements. In React, we can do the same on elements - these work the same way as normal, the notable exception being that you have to use className instead of class to set the class attribute.

<h1 className="header">Hello World!</h1>

Anything which sits between two element tags will be rendered to the DOM as text.

If you look again at the browser, you'll see that's exactly what has happened.

You can also embed any JavaScript expression inside of JSX tags using curly braces.

If you change the code to the following:

<h1>{2 + 2}</h1>

Then you should see 4 being rendered to the screen, rather than the old Hello World! This is because the expression gets evaluated before the React element gets rendered.

What do you think will happen if you change the code to:

<h1>2 + 2</h1>

Can you explain why?

Rendering

Let's take a look at our index.js file.

We use the render function which we imported from react-dom to make our React element appear in the DOM.

render(<h1>Hello World!</h1>, document.getElementById('root'));

If you look at the index.html file, you will see the following:

<div id="root"></div>
<script type="text/javascript" src="app.js"></script>

First, note the <script> tag, which loads in a JavaScript file called app.js. This file contains the code for our application (this is what we have told webpack to call our bundled code).

Second, we have a <div> tag with an id="root" attribute.

Going back to our index.js file, this matches with the second argument we have passed to the render function - document.getElementById('root'). If you cast your minds back a few weeks to when we studied the DOM, we used the getElementById function to select a particular DOM node. Here, we are selecting the id="root" node, and telling react-dom to render our element into that node.

If you take a look in your browser dev tools at the HTML markup that has been rendered, then you will see that your <h1>Hello World!</h1> has been rendered as the first child of the root node.

Everything that happens in your app will happen inside of this root node.