Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What does create-react-app mean?

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Internet Technology >

Share

Shulou(Shulou.com)06/02 Report--

Editor to share with you what create-react-app refers to, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Create-react-app is an official scaffolding tool for building React single-page applications from FaceBook's React team; it integrates Webpack and is configured with a series of built-in loader and default npm scripts to develop React applications with zero configuration.

Create React App is an officially supported way to create React single-page applications. It provides a modern build setting with zero configuration.

Quick start

Npx create-react-app my-appcd my-appnpm start

(npx is from npm 5.2 + or later, see the description of the older version of npm)

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

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

Npm start

Start immediately

You do not need to install or configure tools such as Webpack or Babel. They are pre-configured and hidden, so you can focus on the code.

All you have to do is create a project.

Create an application

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

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

Npxnpx create-react-app my-app (npx from npm 5.2 + or later, see the description of the previous version of npm) npmnpm init react-app my-appnpm init is available in npm 6 + Yarnyarn create react-app my-appyarn create is available in Yarn 0.25 +

Output

Running any of these commands creates a directory called my-app in the current directory. In this directory, it generates the initial project structure and installs 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-appScripts

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

Npm start or yarn start

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

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

Build errorsnpm test or yarn test

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

Learn more about the test.

Npm run build or yarn build

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

The build will be compressed and the file name will contain a hash.

So your application is ready to deploy.

The above is all the contents of this article "what does create-react-app mean?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Internet Technology

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report