Detailed steps to build a React development environment using create-react-app

This time I will give you a detailed explanation of the steps to use create-react-app to build a React development environment. What are the precautions for using create-react-app to build a React development environment. The following is a practical case. Let’s take a look.

Commonly used scaffolding

1. react-boilerplate

2. react- redux-starter-kit

3. create-react-app (most followed on git)

Use create- react-app quickly builds a React development environment

create-react-app comes from Facebook. With this command, we can quickly build a React development environment without configuration.

create-react-app The automatically created project is based on Webpack ES6.

Execute the following commandCreate project:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

tips:

If using npm is very slow, you can use Taobao’s customized cnpm (gzip compression Support) command line tool instead of the default npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

How to compile less

1. Expose the configuration file

npm run eject

2.Installless-loader and less

npm install less-loader less --save-dev

3. Modify webpack configuration

Modify webpack.config.dev.js and webpack. config-prod.js configuration file

test: /\.css$/ 改为 /\.(css|less)$/

Find use under this test, add loader

{
  loader: require.resolve('less-loader') // compiles Less to CSS
}

Okay, re-run the project less has been compiled

Project structure

src directory

The src directory is used to store our own code. You can create subdirectories under src, only src Files in the root directory will be compiled by webpack, so the files must be placed in the src root directory, otherwise they will not be recognized.

public directory

Only files in the public directory will be referenced by public/index.html

tip: index under public and src. The html file must exist and cannot be renamed

Common commands

1Start command

npm start

2Compile and package command. Compile the code in the production environment and place it in the build directory to correctly package the code, optimize, compress, and use hash to rename the file

npm run build

3. Test after the file is modified

npm test

4 .structure command. The configuration command of webpck is exposed. Originally in the scaffolding, the configuration item is invisible and needs to be modified before executing this command (this is a single command, once structured, it is irreversible.)

npm run eject

5.httpsRun

set HTTPS=true&&npm start

6. Online compilation

This is a big highlight of create-react-app. It allows your application to decode the code and compile the files that run in the online production environment. It is very small, and the file name also has a hash value, which is convenient for us to cache, and it also provides a server so that we can see similar effects to the online production environment locally, which is really super convenient.

Just one line of command:

npm run build

7.api development

Just add a configuration item to the package.json file.

"proxy": http://localhost:3001/,

8.ajax?
Instead of using fetch

npm install whatwg-fetch

import 'whatwg-fetch'
fetch('/power-mnjy-mobile/intf/h5/user/login?mobile=13000000001&pwd=a111111&ignoreCsrfToken=true')
  .then(res => res.json())
  .then((data) => {
   this.setState({ value:data });
  });

Debugging tool react developer tools (https://github.com/facebook/react-devtools)

Add the extension react developer tools in chrome, remember Restart the browser (restart, restart, restart, say important things three times), and the react option will appear in the chrome development tools.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use AngularJS to implement tab switching

How to use Koa2 to develop WeChat 2D Scan the QR code to pay

The above is the detailed content of Detailed steps to build a React development environment using create-react-app. For more information, please follow other related articles on the PHP Chinese website!