Photo by Jamie Street on Unsplash

Using create-react-app

The create-react-app build tool does a ton of heavy lifting when developing and launching a React app.

How much heavy lifting exactly?

What goes into developing and running a React app

Building a deployable React app isn’t just a walk in the park Kazansky. Building a React app involves compiling various files, rendering the app on a development server, producing build files, and troubleshooting. Fortunately the create-react-app package handles all of this beautifully.

The Compile

The first step in producing a React app is compiling all of the various files into one bundle of build files. This includes compiling CSS files, JS modules and Files, JSX, and new JS syntax (ES6 and ES7 for example) all together into one build. The typical build includes an index.html file where your root div element will be defined that will import your CSS and JS files. Next your build will also include a CSS main file which will include all of your compiled CSS. And finally your build will include the main JS file which will include all of your imported NPM packages and modular JS files.

The create-react-app package largely handles this using Babel and Webpack. Babel is a JS library that converts JSX and the likes of ES6 and ES7 into plain JavaScript, while Webpack is a web bundler that takes all of your files and brings them together into one build.

Fortunately for us, create-react-app already comes with Babel and Webpack both installed and configured. Installing and configured Babel and Webpack can be a chore all on their own (trust me… Google ‘how to configure Babel and Webpack’- it’s a little more involved than you would think).

The Troubleshoot

Next is troubleshooting- it’s nice to have some warning beforehand if some code won’t compile or if a function decides to go AWOL. Create-React-App comes pre-loaded and pre-configured with ES lint- a fancy tool for finding compile errors before running your code. It will help you find things like undefined variables, missing syntax, and even identity unused variables. Those errors will be delivered right to your command line and even in your browser.

Failed compile in the command line

Failed compile in the browser

The Development Server

Oh boy- now how can we see our app? It’s not as easy as launching index.html in Chrome- you have to have a server running to serve up your index.html file for React to work. You can go all grass roots and use SimpleHTTPServer in Python, but fortunately Create-React-App has a development server built in that will launch and run your app while in development.

One of the best things about create-react-app is that you can be constantly updating your application and the create-react-app will automatically load the new changes every time you save. This is called ‘hot reloading’. Basically it allows you to see the results of your new changes without stopping and restarting your development server.

The Build

The last step is creating the build for the application. This is the process of taking all of the files used in your application and compiling them into three main files (your HTML, CSS, and JS files).

The build files are optimized for running in the browser, and will be the actual assets that you use when deploying your application. When you are ready, create-react-app makes it very easy to generate a build with one simple command.

How to use it

Hopefully by now you see the benefits of create-react-app, and now you want to get your hands on this luxurious tool. Let’s walk through how to use creat-react-app.

Install

The create-react-app package installs just like any other NPM package. Run the following command to install create-react-app globally via NPM.

npm install -g create-react-app

Create App

Now let’s use create-react-app. You will run the ‘create-react-app’ command followed by the name of the app, in this case ‘my-first-react-app’.

create-react-app my-first-react-app

It may take a few minutes, but once the process is complete you will have a new directory titled with the app name (‘my-first-react-app’ in this case). Move into the directory to access the rest of the create-react-app commands.

cd my-first-react-app

Run

The create-react-app package will already come pre-loaded with a simple app to help you get started. Run the following command to bundle the development files and launch the development server.

npm start

This will run the linting prior to launching your app on your local server at port 3000. Open a web browser and navigate to http://localhost:3000/ to see the app. It should look something like this:

The create-react-app default app page

Hot Reloading

Now here’s one of the best parts about create-react-app: hot reloading. Anytime you save changes to your app the pre-configured webpack will recognize the save, lint your files, bundle your files, re-compile the code, and launch your app (usually within a matter of seconds). All you have to do is save changes to a file in the ‘src’ directory.

Build

When you are finished developing on your app you can run the build command for create-react-app to build your deployable files. Run the following command to create your build.

npm run build

After running the build command you will see a ‘build’ folder in your app directory.

Serve

Now that you have you build up, let’s go ahead and serve up the app using the ‘serve’ npm package. If you don’t have serve installed, go ahead and install it using the following command.

npm install -g serve

After installing serve, you can run you build from the app root directory with the following command.

serve -s build

The serve package will serve the files locally and copy the address location to your clipboard. Open up the app by navigating to the address in your browser.

Now you are ready to take the world by storm with your create-react-app know-how!

If you like learning about React, then subscribe to the Byte-sized React weekly newsletter to get articles like this in your email.