Translator: iOSDevLog

The original link

Today, we will add a build process to store common build operations so that we can easily develop and deploy our application.

The React team noticed that running a React app requires a lot of configuration (and community help is bloated – including ours). Fortunately, some smart people in the React team/community got together to build/release an official generator application that makes it easier to get started and run quickly.

create-react-app

The Create-React-app project released via Facebook helps us quickly get the React application up and running on our system without having to customize our parts

This package is distributed as a Node package and can be installed using NPM.

nvm 和 nA plugin for

If the Node is not already installed on your system, the Node home page has simple documentation on how to install Node.

We recommend using NVM or N version management tools. These tools make it very easy to install/use multiple versions of nodes on your system at any time.

With Node installed on our system, we can install the create-react-app package:

`npm install --global create-react-app`

Copy the code

With create-react-app installed globally, we can use the create-react-app command anywhere on the terminal.

Let’s create a new application we’ll call 30Days, using the create-react-app command we just installed. Open a terminal window in the directory where you want to create the application.

On the terminal, you can use this command to create a new React application and add a name for the application to be created.

create-react-app 30days && cd 30days

Copy the code

Let’s launch our application in a browser. The create-React-app package comes with some built-in scripts created for us (in the package.json file). We can use the NPM start command _start_ to edit our application using the built-in web server:

npm start

Copy the code

This command will open a window in Chrome that will run the default URL in our application: http://localhost:3000/.

Let’s edit our newly created application. Looking at the directory structure it creates, we’ll see that we have a basic node application running public/index.html and several files in the SRC/directory that make up the application we’re running.

We open the SRC/app.js file and we’ll see that we have a very basic component that should be familiar. It has a simple rendering function that returns the results we see in the Chrome window.

The index.html file has a #root

node, and the application itself will be automatically mounted (this is handled in the SRC /index.js file). Any time we want to add Webfonts, styles, tags, etc., we can load them into the index.html file.

Shipping

We’ll be deploying in a few weeks, but temporarily know that the generator created a build command, so we can create a minimal, optimized version of our application that we can upload to the server.

We can build our application using the NPM run build command at the root of our project:

`npm run build`

Copy the code

As a result, we now have a real-time reload single page application (SPA) to develop. Tomorrow, we will use this new application where we build to render multiple components at run time