Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use create-react-app to quickly build a React development environment". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use create-react-app to quickly build a React development environment" can help you solve the problem.

Commonly used scaffolding

React-boilerplate

React-redux-starter-kit

Create-react-app (the most followed on git)

Using create-react-app to quickly build a React development environment

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

Projects created automatically by create-react-app are based on Webpack + ES6.

Execute the following command to create the project:

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

Tips:

If using npm is 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

two。 Install less-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 files

Test: /\ .css $/ changed to /\. (css | less) $/

Find use under the test and add loader

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

All right, rerun the project. Less has been compiled.

Project structure

Src directory

The src directory is used to store our own code. We can create subdirectories under src. Only the files under the src root directory will be compiled by webpack, so we must put the files in the src root directory, otherwise we will not recognize them.

Public directory

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

Index.html files under tip:public and src must exist and cannot be renamed

Common command

1 start command

Npm start

2 compile the packaging command. Compiling the code in a production environment and placing it in the build directory correctly packages the code and optimizes, compresses, and renames files using hash

Npm run build

3. Test after file modification

Npm test

4. Structural command. Expose the webpck configuration command, originally in the scaffolding, the configuration item is not visible, need to modify to execute this command (this is a single command, once the structure, irreversible. )

Npm run eject

5.https operation

Set HTTPS=true&&npm start

6. Online compilation

This is a big highlight of create-react-app, it allows your application to deceive the code running in the online production environment, the compiled file is very small, and the file name also has a hash value, which makes it convenient for us to do cache, and it also provides a server that allows us to see similar effects in 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?

Alternative fetch

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

Debugging tool react developer tools

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

That's all for "how to use create-react-app to quickly build a React development environment". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.