Course: Section

Get Started with Modern React: Intro, Setup, and ES6 Basics

Episode: Title

S01・V05: Try React with JSX for Production

Date Created: July 17th, 2019
Last Updated: 27 days ago

Objectives
  1. We will set up a basic HTML page, which loads a React component from a separate file.
  2. We will install some software packages to compile our JSX code into JavaScript, in a preprocessing step.
  3. With this toolchain, we can create production-ready React applications.
Watch Video
Duration: 7m 13s

Set Up

First, we will create a folder for our project in Terminal.

mkdir try-react-with-jsx-for-prod

Change directory into the new folder.

cd try-react-with-jsx-for-prod

Create an index.html file.

touch index.html

Open this file in the browser, so that we can view our progress while building the app.

open index.html

Now, let’s create a src/ folder.

mkdir src

Inside this folder, create a file called: like_button.js.

touch src/like_button.js

Now that we have our folders and files set up, we can start writing our application. Open the project within the Atom code editor.

atom .

HTML

Go into the index.html file. We will start creating a simple HTML page.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Try React with JSX for Production</title>
  </head>
  <body>
    <h2>My Website</h2>
    <p>This could be a very simple website somewhere on the web.</p>
    <p>Imagine there is some content here...</p>
  </body>
</html>

View it in the browser.

We can load the React modules that we need in the head of the document, instead of within the body. These are the minified production modules.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Try React with JSX for Production</title>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>  </head>
  <body>
    <h2>My Website</h2>
    <p>This could be a very simple website somewhere on the web.</p>
    <p>Imagine there is some content here...</p>
  </body>
</html>

Now, as we did in the previous video, we will add a div container under the content, to render our React component to. Instead of writing our React code within script tags, we will load it from another file by specifying a src attribute on the opening script tag.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Try React with JSX for Production</title>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
  </head>
  <body>
    <h2>My Website</h2>
    <p>This could be a very simple website somewhere on the web.</p>
    <p>Imagine there is some content here...</p>
    <div id="like_button_container"></div>    <script src="like_button.js"></script>  </body>
</html>

Note that this is not referencing the like_button.js file in the src/ folder. It is referencing the file in the base folder of the project.

This base-level file is generated during the JSX preprocessing stage, which we will get to shortly. Let’s move to the like_button.js file in the src/ folder, and write our React component in JSX syntax. Here we will add the same JSX code for the LikeButton React component as we did in the previous video.

function LikeButton () {
  const [liked, setLiked] = React.useState(false);
  if (liked) {
    return "You liked this";
  }
  return <button onClick={() => setLiked(true)}>Like</button>;
}
const element = <LikeButton />;
const domContainer = document.getElementById("like_button_container");
ReactDOM.render(element, domContainer);

Save the file and move to Terminal.

JSX Preprocessor

Now, we have come to the stage of adding a JSX preprocessor. During the development phase, we will use a compiler to convert our JSX code into pure JavaScript, so that the browser can read it.

We will need to install two packages to accomplish this. We will use the “node package manager”, or “npm” for short, to set up and install the packages. First, we will run the command npm init -y, which will initialize our project with a package.json file, with the default options selected.

npm init -y

Second, we will install two Babel packages.

npm install babel-cli@6 babel-preset-react-app@3

Finally, we will use a package runner called npx, that comes with the “node package manager”. It will run the Babel compiler we just downloaded, which looks into our src/ folder for any JSX files, and compiles them into pure JavaScript files with the same name in our base-level folder.

npx babel --watch src --out-dir . —presets react-app/prod
  • npx is the package runner.
  • babel is the JSX-to-JavaScript compiler.
  • --watch src will watch the JSX files in the src/ folder for any changes, and compile them automatically if any change is made.
  • --out-dir . specifies the folder the compiled files will be generated in, namely the base-level folder, which is what the . signifies.
  • —presets react-app/prod instructs the Babel compiler that the code should be compiled for a React production app.

Hit “Enter”, and the automated watcher for JSX preprocessing will start. You can see the JSX file that has been processed, and where it has been compiled to. In Atom, you can see the compiled file in the base folder. Click it to see what the compiled file looks like. Finally, reload the page in your browser, to make sure it is functioning correcly.

We have successfully set up a toolchain for preprocessing JSX to create a production-ready React application.

Summary

We set up a basic HTML page, which loaded a React component from a separate file. We installed some software packages to compile our JSX code into JavaScript, in a preprocessing step. With this toolchain, we showed that we were able to create production-ready React applications.

Next Up…

In the next video, we will look at the popular “Create React App” toolchain.