Create React App: Get React Projects Ready Fast

Create React App (CRA) Quick View

Facebook's command line tool Create React App (CRA) simplifies the creation of React projects. It preconfigured the webpack build process, eliminating the trouble of building complex build pipelines.

CRA can be run from npm or Yarn, and it sets up a project structure containing the react-scripts package, which contains all configuration and build scripts. The tool also includes a local development server and supports ES6 and ES7 features, CSS modules, Jest unit tests, and ESLint.

Use npm run build to create a production environment package, generate an optimized application version, and prepare for deployment. It also supports environment variables, code segmentation, TypeScript, progressive web applications, and performance measurement using web vitals.

If the CRA provides insufficient functionality, the user can choose to run npm run eject, which will copy the webpack configuration and build scripts into the project, allowing customization. Alternatively, users can fork react-scripts package and maintain their own branches, adding the required features.

How does Create React App work

Create React App is a standalone tool that can be run using npm or Yarn. Generate and run a new React application in a new folder with just a few commands:

Using npm:

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

Using Yarn:

yarn create react-app new-app
cd new-app
yarn start

Create React App will set the following project structure:

<code>new-app
├── .gitignore
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock</code>

It also adds a react-scripts package to your project with all configuration and build scripts. In other words, your project depends on the react-scripts package, not the create-react-app itself. Once the installation is complete, you can start the development server and start processing your project.

Main functions

• Local Development Server: npm start A webpack development server will be started, including a watcher, which will automatically reload the application after you change the content. Starting with v4, Create React App supports React's quick refresh as an alternative to hot module replacement.

• ES6 and ES7 support: Use babel-preset-react-app to support ES6 and ES7 features, such as async/await, object rest/spread properties, dynamic import(), etc.

• Resource Import: CSS files, images, or fonts can be imported from JavaScript modules. After the application is built, the Create React App copies the files to the build folder.

• Style: Supports importing CSS files, and all CSS files are merged into one package when building. Supports CSS modules (*.module.css) and Sass (.scss files, and needs to be installed separately node-sass).

• Unit Test: npm test Run the test with Jest and start a watcher to rerun the test when you change the content.

• ESLint: During the development process, the code will be analyzed statically through ESLint.

• Create a production environment package: npm run build Create an optimized production environment package.

• Deployment: The generated build result is a static file that can be easily deployed to various environments.

• Environment variables: Supports the use of environment variables starting with REACT_APP_.

• Reverse proxy: You can proxy requests by configuring the package.json field in proxy.

• Code segmentation: supports dynamic import() for code segmentation.

• TypeScript Support: TypeScript projects can be created using the --template typescript option.

• Progressive Web Applications (PWA) Support: You can use the --template cra-template-pwa or --template cra-template-pwa-typescript options to create PWA projects.

• Web Vitals: Use the web-vitals library to track Web Vitals metrics.

Give up using CRA

If the CRA is not functional enough, you can use npm run eject to copy the webpack configuration and build scripts into your project for customization. Alternatively, you can fork react-scripts package and maintain your own branches.

Summary

Create React App is a convenient tool to start a new React project, simplifying the build process and providing rich features. Whether it is a rapid prototype or a large project, it saves a lot of development time.

(The FAQs part is omitted because it is duplicated with the article and is too long.)

The above is the detailed content of Create React App: Get React Projects Ready Fast. For more information, please follow other related articles on the PHP Chinese website!