1. We will give a short description of React.
2. We will introduce our first React function, which is called a “component”.
3. Then we will render the component to the DOM. That is, we will display the React component on our page.
4. We will show the HTML output of our component in the index html page using Chrome‘s developer tools.

React is…

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

It lets you compose complex UIs from small and isolated pieces of code called “components”.

React Component

In this video, we will make our first React component, and render it to the DOM. First, make sure your development server is running in Terminal, by using yarn start.

We will switch over to Atom. In index.js, we will create a function that we will call Game.

const Game = () => {
  return (
    <div>
      Game
    </div>
  );
};

Note that we will use ES6 arrow function notation within this section.

You can see that the function returns something that looks like HTML. However, it is neither HTML, nor is it a string. It is “JSX”. JSX is a syntax extension to JavaScript. JSX stands for “JavaScript XML”.

During Create React App’s build process, JSX compiles to pure JavaScript. For example, the returned JSX compiles to:

/* The JSX `<div>Game</div>` compiles to:

React.createElement("div", null, "Game");

*/

React does not require using JSX, but it is recommended because it looks similar to HTML. In addition, JSX is easy to read and write.

In the browser, you will see: “Failed to compile”. React must be in scope when using JSX. So, let’s import React at the top of our file.

import React from 'react';

Save the file. We can see that the app compiles. However, we still see a blank screen.

Rendering Components to the DOM

The Game function is a React component. We need to render the Game component to the DOM.

In order to do that, we first need to import the react-dom package.

import ReactDOM from 'react-dom';

Now that we have imported the ReactDOM library, we can use its render method.

The render() method takes two arguments:

1. The component to render to the DOM.
2. The node in the DOM to render the component to.

We will call the DOM node, where we want to render our component to, the “target node”, or the “target container”.

Let’s open the index.html file in the public folder. We can see a div tag, with an id of root. This is our target node for rendering. React will render our components here.

Let’s return to our index.js file. Go to the bottom of the file, and invoke the render method of ReactDOM.

ReactDOM.render();

The first argument is the Game component, using JSX notation. The second argument is the target node with an id of root. We will access this target node using JavaScript’s document.getElementById() method.

ReactDOM.render(
  <Game />, // component to be rendered
  document.getElementById('root') // target DOM node
);

Code Snapshot

import React from 'react';
import ReactDOM from 'react-dom';

const Game = () => {
  return (
    <div>
      Game
    </div>
  );
};

/* The JSX `<div>Game</div>` compiles to:

React.createElement("div", null, "Game");

*/

ReactDOM.render(
  <Game />, // component to be rendered
  document.getElementById('root') // target DOM node
);

Chrome DevTools

We can also see our component render in HTML from Chrome’s Developer Tools. We can open Chrome DevTools, and select the “Inspect Elements” tab, using the key combination of “Option-Command-C”.

We can inspect the div with the id of root. Within it, there is a div containing the text Game, mirroring the JSX returned by our Game component.

Summary

We showed what React was, we created a very simple function component, we rendered that function component to the DOM, and we showed the HTML representing the component within Chrome Developer Tools.

Next Up…

In the next video, we will add some basic CSS styling to our game app.