React+webpack+redux+router+ant Framework React Development environment (1)

Software that needs to be installed

　　node. js

Npm

It is recommended to use the [email protected] version above, since the 6.3.0 version will come with NPM package management so there is no need to install NPM separately because of the Great Wall, so mind everyone changing the mirror,

After the installation is complete, open the terminal (MAC) window computer because it is cmd, enter the command node-v will see the current node version number,

This means that the installation is successful and the following steps are available.

Building projects

• Create a new Folder
• Use Webstorm to edit the folder, then open the console, enter NPM init to generate a Package.json folder (all the way back is OK, finally enter Yes , But I'd mind taking a look at the basic process before you go back to the website.

　

Now you can see our project about the situation, there is a Package.json , this is just NPM init generated, in the future team members only need this one file in the install OK.

Installing Webpack

• Global Install npm install webpack-g
• Local installation to the development environment NPM install Webpack--save-dev
• Local installation to production environment NPM install Webpack--save

The specific definitions of these three environments can be queried on their own.

Next need to install Babel (transcoding), React, React-dom, eslint (grammar detection), here I do not say the method of installation, directly put the configuration, we directlyInstall

"Devdependencies": {    "Babel-core": "^6.25.0",    "Babel-loader": "^7.1.1",    "babel-preset-es2015": "^6.24.1",    "Babel-preset-react": "^6.24.1",    "Babel-preset-react-hmre": "^1.1.1",    "Eslint": "^4.4.0",    "Eslint-config-airbnb": "^15.1.0",    "Eslint-loader": "^1.9.0",    "Eslint-plugin-import": "^2.7.0",    "Html-webpack-plugin": "^2.30.1",    "Prop-types": "^15.5.10",    "React-router": "^3.0.0",    "Webpack": "^2.7.0",    "Webpack-dev-server": "^2.6.1"  },  "Dependencies": {    "Key-mirror": "^1.0.1",    "React": "^15.6.1",    "React-dom": "^15.6.1",    "Redux": "^3.2.1"  }

Webpack Configuration

• Create a new webpack.config.js in the current directory

Specific explanation of webpack configuration of some basic ideas, I will directly write a copy of the configuration paste out, do not understand webpack students can see the following comments

1 varPath = require (' path ');//reference node's path module2 varWebpack = require (' Webpack ');//load Webpack3 varHtmlwebpackplugin = require (' Html-webpack-plugin ');//load Html-webpack-plugin function is to generate an HTML file (I used to do my program's entry file)4 5 6 /**7 * The __dirname node global variable stores the file directory where the file resides8 * The __filename node global variable stores the file name9 * Path.resolve parses a string into an absolute path. Ten  */ One  A //Common Paths - varRoot_path = Path.resolve (__dirname);//get the current file path - varApp_path = Path.resolve (Root_path, ' entry ');//get the path to the file entry script the varBuild_path = Path.resolve (Root_path, ' build ');//get the input location for a packaged file -  -  -Module.exports = { + entry: { -App:path.resolve (App_path, ' index.js ')//specify webpack to start packing in App_path's Idnex.js file +     }, A output: { atPath:build_path,//output to that folder -FileName: "Bundle.js"//output to a file in this folder -     }, -Devtool: ' Eval-source-map ',//For debugging because you are running the compressed code on the line, do not see the specific error, this method is to let the source code and compression code generated mapping, convenient and quick to locate to specify your file, -  -Devserver: {//can open a local Web server inHistoryapifallback:true, -Hottrue, toInlinetrue, +port:8081 -     }, the  * module: { $Loaders: [//featured loader for WebpackPanax Notoginseng             { -Test:/\.jsx?$/, theLoaders: [' Babel-loader '], + include: [App_path,store_path,src_path] A             } the         ] +     }, -Plugins: [//featured plugins for Webpack $         NewHtmlwebpackplugin ({ $Title: ' My first React ' -         }) -     ], theResolve: {//configure some rules to increase resolution speed -Extensions: ['. js ', '. Jsx ']Wuyi     } the  -};

Writing the React Portal file

• Create new folders and files (to align with your webpack configuration)

Index.js Inside Write

1Import React, {Component} from ' React ';2Import reactdom from ' React-dom ';3 4 5 class App extends Component {6 Constructor (props) {7 super (props);8     }9 Ten render () { One  A         return ( -<div classname= "Container" > - the  -</div> -         ) -     } + } -  +Console.log ("Hello, hello"); AConst APP = document.createelement (' div '); at Document.body.appendChild (app); -Reactdom.render (&LT;APP/&GT;, App);

Then configure it in the script in Package.json .

1 "Scripts": {2     "test": "Echo \" Error:no test specified\ "&& exit 1", C5>3     "Build": "Webpack",4     "dev": "Webpack-dev-server--hot"5   },

Open the console input npm run Dev

The compilation was successful,

Open the browser input localhost:8081 can see

It means that the building is successful, and today we will give you a detailed explanation of router's adding process.

　

React+webpack+redux+router+ant Framework React Development environment (1)