React项目环境配置和HelloWorld
1 环境配置
React技术栈：React + Redux + Dva + UI库
React开发采用的架构是：Webpack + CMD（import/export）+ ES6 + babel-loader + React
API文档：https://facebook.github.io/react/docs/hello-world.html
现在开始配置一个基础项目。
创建项目文件夹：C:\Users\Danny\Desktop\React_day1
npm init
创建package.json文件
下面的所有安装，都是--save-dev，因为运行的时候，不需要这些依赖，只是在开发的时候需要。
cnpm install --save-dev ***
cnpm install --save-dev webpack
webpack安装完毕（当然你要之前-g也装过webpack），此时就能构建CMD程序，为一个all.js文件了。
cnpm install --save-dev babel-core cnpm install --save-dev babel-loader cnpm install --save-dev babel-preset-es2015
此时先不要继续往下配置了，先测试一下，看看webpack+babel-loader是否能够构建ES6的语法。
创建webpack.config.js文件，来指导webpack的工作。途径：
l 去webapck的官网拿这个文件，https://webpack.js.org/configuration/
webpack.config.js： const path = require('path'); //webpack是nodejs程序，所以这里是nodejs语法： module.exports = { entry: "./app/main.js", //程序主入口 output: { //程序的编译出的文件 path: path.resolve(__dirname, "dist"), //文件夹名字 filename: "all.js" //文件名字 }, module: { //挂载的一些模块 rules: [ { test: /\.js$/, //所有以js结尾的 loader: "babel-loader", //请使用babel-loader的加载器 options: { presets: ["es2015"] } } ] }, watch : true }
此时我们创建app文件夹，创建main.js文件和People.js文件：
main.js：
import People from "./People.js"; var xiaoming = new People(); xiaoming.haha();
People.js：
class People{ constructor(){ } haha(){ alert("你好"); } } export default People;
此时运行webpack
webpack
注意，这是一个裸奔的webpack命令，没有写入口、出口，因为在webpack.config.js中已经写明了，webpack很聪明自己看自己的配置文件。
dist文件夹出现了，all.js构建完毕。
创建index.html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript" src="dist/all.js"></script> </body> </html>
至此我们的文件结构是：
目前可以证明，webpack + babel-loader已经可以正常工作。下面我们添加react。
cnpm install --save react
cnpm install --save react-dom
现在程序中要出现一个叫做jsx的语法，注意浏览器不能裸奔跑jsx语法，所以此时有两种办法，任选其一：
l 安装新的loader， react-loader ， 让webpack测试.js结尾的文件，不仅仅要通过babel-loader还要通过react-loader
l 给现有的babel增加一个新的babel-preset-react
cnpm install --save-dev babel-preset-react
然后改变webpack.config.js文件，增加新的preset配置：
const path = require('path'); //webpack是nodejs程序，所以这里是nodejs语法： module.exports = { entry: "./app/main.js", //程序主入口 output: { //程序的编译出的文件 path: path.resolve(__dirname, "dist"), //文件夹名字 filename: "all.js" //文件名字 }, module: { //挂载的一些模块 rules: [ { test: /\.js$/, //所有以js结尾的 loader: "babel-loader", //请使用babel-loader的加载器 options: { presets: ["es2015","react"] } } ] }, watch : true //实时监听 }
恭喜到目前为止已经配置完毕所有的webpack+babel+react环境：
package.json文件：
{ "name": "react_day1", "version": "1.0.0", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "webpack": "^3.0.0" }, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1" } }
至此就可以跑HelloWorld了！
