1. We will explain why JavaScript build toolchains are necessary.
2. We will explain what “Create React App” is.
3. We will set up a project using Create React App, run it, and make an optimized production build.

Front-End Build Pipeline

Nowadays, the end users of web applications have high demands. They expect apps to be fast, visually pleasing, and have lots of features. Web applications have become increasingly complex over the last decade, to deal with the ever growing needs of end users.

To deal with the increasing complexity, most modern web applications make use of a toolchain of software packages. A JavaScript build toolchain typically consists of the following ...

• Package manager, such as “npm” or “Yarn”. A package manager lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
• Bundler, such as “webpack”. A bundler lets you write modular code and bundle it together into small packages to optimize load time.
• Compiler, such as “Babel”. A compiler lets you write modern JavaScript code or JSX, and converts it to a form of JavaScript that works in browsers.

Create React App

In Sections 2 and 3 of this video course, we will be using a build toolchain called “Create React App”, or “CRA” for short. Create React App creates a front-end build pipeline. It doesn’t handle back-end logic or databases. You can use Create React App with any back-end you want.

Under the hood, Create React app uses the Babel compiler and the webpack bundler, but you don’t need to know anything about them to use it.

Create React App is a comfortable environment for learning React. It sets up your development environment so that you can use the latest JavaScript features, and has several other features to provide a great developer experience.

Create React app is the best way to start building a new single-page application in React. A single-page application is an application that loads a single HTML page and all the necessary assets required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server, which means the page is not reloaded. This makes for a better end-user experience.

When you are ready to deploy your web app to production, you can easily create an optimized build of your app, by running a single command, which we will show you later in this video.

Set Up

Let’s get started in Terminal.

We will assume you have Node installed on your local development machine. Node.js is a free, open-source JavaScript server environment, that runs on various platforms, such as Mac OS, Linux, and Windows.

Run node --version to check that you have Node installed.

node --version

It should be at least version 8.10.

Next, check your current version of “npm”, which is distributed with Node.js. This means that when you download Node.js, you automatically get npm installed on your computer.

npm --version

It should be at least version 5.6.

We will also be using “Yarn”, which is an alternative package manager. Yarn is faster than npm for installing packages.

yarn --version

You can use either npm or Yarn during this course, so it isn’t a requirement to download it. If you only want to use npm, then substitute npm for yarn when it is typed in this video.

Next, we will use a package runner tool that comes with npm. This package runner tool is called “npx”. We will create a project called my-app, using the create-react-app package, run by the npx tool.

npx create-react-app my-app

This usually takes a few seconds to run.

Change directory into my-app.

cd my-app

Run CRA

Now, run the app on your local development machine using the command yarn start, or npm start.

yarn start

In a few seconds, your app, with its default view, will automatically show in your browser, at localhost:3000.

You can shut down your local development server with the key combination “Control, C”.

To create an optimized production build of your app, simply type yarn build, or npm build.

You have successfully built your app using Create React App! You can find out more in the official Create React App documentation.

Summary

We explained why JavaScript build toolchains are necessary. We explained what “Create React App” is. And, we set up a project using Create React App, ran it, and made an optimized production build.

Next Up…

In the next video, we will look at JavaScript variables, covering ES6 syntax.