table of Contents

1. Why use Create React App

Through the front script way although it can complete React.js development, but there is now a very important front-end features - modular, it can not be used.

2.Create React App Introduction

Create React App is a use Node.js command line tool written by which you can help us to quickly generate React.js project and built Babel , Webpack and other tools to help us achieve ES6 + resolution, modular analytical package , that is, through it we can use a modular and ES6 + some features such as updates. It also built ESLint grammar detection tools, Jest unit testing tool . There are a based Node.js of WebServer help us better in local preview application, there is more.

These are by Create React App help us installed and configured, out of the box

3. Installation and Use

By npm , the Yarn , NPX can.

Scaffolding create-react-app defaults to using yarn for installation. If you have problems using yarn install dependencies, can create-react-app react-demo --use-npm command used for mounting various npm dependent manner.

3.1 Installation

asl

npm i -g create-react-app

npm start automatically open the application server, and open the default browser;
npm test: run Jest test
Build RUN NPM : packaged application (on-line preparation)

yarn

yarn global add create-react-app

yarn start to start a development application server;
yarn build used to build a good development project;
yarn test for test code
yarn yeild is not recommended. Remove some dependencies and configuration files and some other development process. It can help analyze the source code and content to achieve, but this command is irrevocable.

3.2

After installation is complete, you can use the create-react-app command

create-react-app <项目名称>

Or by npx manner

npx

npx create-react-app <项目名称>

4. Project directory structure

After running the command, which you run the following command to create a directory name with the name of the directory project

node_modules directory: store third-party dependencies
public directory: to store static files such as index.html file in the project.
src directory: The most important documents
index.js: entry file

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

5. command script

create-react-app also provides some additional commands to help us develop

npm start: start a built-in local WebServer , the root directory is mapped to './public' directory, the default port: 3000
npm test: run Jest test
npm run build: packaged application (on-line preparation), the main code package

Finally, to compile the package will automatically compile webpark JS, packaged automatically via npm run build command, and to insert mode to generate bulid folder. Files in the directory is the real bulid on online file used in the project.

Bulid directory files under the code running on the real line.

A server can open their own test: Go to bulid directory, the command npx http-server -c-1 can open a designated local server

1275012490

Published 95 original articles · won praise 115 · views 120 000 +

Private letter concerns

React (a) - Scaffolding Tools create-react-app