First, react experience of the NODEJS environment construction

First, Nodejs installation

I have related articles in my blog and I will not repeat them here.

Second, the relevant module installation

Some related modules need to be installed when using react:

1, Babel

　　NPM Install Babel-g--save-dev

(where--save-dev indicates that the Babel module is placed under devdependencies of the current project's Package.json file, representing the dependent module of the current development environment.)

--save indicates that the Babel module is placed under dependencies of the current project's Package.json file, representing the dependent module of the current running environment. ）

The main role of Babel is to convert the associated ES6 syntax in the code to the ES5 accepted by most browsers today.

2, Webpack

　　NPM Install Webpack-g--save-dev

Webpack main role is to package the current project resources, generate a JS file for the front page to introduce loading.

3, Webpack-dev-server

　　NPM Install Webpack-dev-server-g--save-dev

The primary role of Webpack-dev-server is to create servers.

Specifically, to understand the module installation related methods, please visit: Http://javascript.ruanyifeng.com/nodejs/npm.html#toc8

Third, create the project root file Package.json

This file mainly statistics on the current project's various information, such as project name, version, dependency, development environment dependency and so on.

Create this file with NPM init, then follow the prompts to fill in the relevant content. (If you don't want to fill it out, you can use NPM init--yes or NPM init--y), and then continue adding changes in Package.json.

{  "Name": "Apptest",//project name"Version": "1.0.0",//project current version"Main": "Main.js",//The entry file when loading the module, all the modules eventually converge here ."Dependencies": {//Dependency module at Project runtime
},  "Devdependencies": {//modules that are dependent on project development

},  "Scripts": {//write execute NPM Run < command >,If running NPM [run] start is equivalent to performing a webpack-dev-server--hot
"Start": "Webpack-dev-server--hot"
},
"keywords": [],
"Author": "",
"  License": "ISC",
"      description": "",
}

Package.json the meaning of the items in the document, please visit: http://javascript.ruanyifeng.com/nodejs/packagejson.html

Iv. adding related plugins

1, react related plug-in

①npm Install react--save

React's core module.

②npm Install react-dom--save

The react is used to render the created virtual component onto the DOM.

2. Babel related plugins

NPM Install Babel-core

NPM Install Babel-loader

NPM Install Babel-preset-react

NPM Install Babel-preset-es2015

These modules deal primarily with ES6 compatibility issues.

Follow-up will be updated, please pay attention.

First, react experience of the NODEJS environment construction