what is create-react-app

create-react-app is an official scaffolding tool for building React single-page applications produced by FaceBook's React team; it integrates Webpack itself and is configured with a series of built-in loaders and default npm scripts. You can develop React applications with zero configuration.

Recommendation: "react video tutorial"

Create React App is an officially supported creation of React single-page application procedural methods. It provides a modern build setup with zero configuration.

Quick Start

npx create-react-app my-app
cd my-app
npm start

(npx comes from npm 5.2 or higher, check the instructions for npm old versions)

Then open http://localhost:3000/ to view your Applications.

When you are ready to deploy to a production environment, use npm run build to create a compressed bundle.

npm start

Get Started Now

You don’t need to install or configure tools like Webpack or Babel. They're preconfigured and hidden so you can focus on your code.

Just create a project and that's it.

Creating the Application

You need Node >= 6 on your local development machine (but not on the server). You can easily switch Node versions between projects using nvm (macOS/Linux) or nvm-windows.

To create a new app, you can choose one of the following methods:

npx
npx create-react-app my-app
(npx 来自 npm 5.2+ 或更高版本, 查看 npm 旧版本的说明)
npm
npm init react-app my-app
npm init <initializer> 在 npm 6+ 中可用
Yarn
yarn create react-app my-app
yarn create 在 Yarn 0.25+ 中可用

Output

Running any of these commands will create a new app named my-app in the current directory Table of contents. In that directory it will generate the initial project structure and install the dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

There is no configuration or complex folder structure, just the files needed to build the application. After the installation is complete, you can open the project directory:

cd my-app
Scripts

In the newly created project, you can run some built-in commands:

npm start 或 yarn start

Run the application in development mode. Open http://localhost:3000 to view it in your browser.

If you change the code, the page will automatically reload. You will see build errors and lint warnings in the console.

Build errors
npm test 或 yarn test

Run the test watcher in interactive mode. By default, tests related to files that have changed since the last commit are run.

Learn more about testing.

npm run build 或 yarn build

Build the production environment application into the build directory. It correctly packages React into production mode and optimizes the build for optimal performance.

The build will be compressed and the hash will be included in the filename.

Now your application is ready to be deployed.

The above is the detailed content of what is create-react-app. For more information, please follow other related articles on the PHP Chinese website!