Home > Common Problem > body text

what is create-react-app

藏色散人
Release: 2020-12-17 16:36:28
Original
4142 people have browsed it

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.

what is create-react-app

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
Copy after login

(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
Copy after login

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+ 中可用
Copy after login

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
Copy after login

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
Copy after login

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

npm start 或 yarn start
Copy after login

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
Copy after login

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
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template