React 学习（一）环境的搭建

环境搭建

1. npm 在项目目录下安装 react， react-dom

$ npm install react --save$ npm install react-dom --save

1. 安装babel 来对react，es6 解析转码

$ npm install babel-core$ npm install babel-loader$ npm install babel-preset-react$ npm install babel-preset-es2015

1. 安装webpack
   
   • 全局安装 webpack， webpack-dev-server

$npm install webpack -g$npm install webpack-dev-server -g

• 项目文件中安装

$npm install webpack --save$npm install webpack-dev-server --save

1. webpack配置文件
   在根目录下新建一个webpack.config.js 的配置文件来 通过 cmd 执行完成打包；

   例如：

ar webpack=require('webpack');var path=require('path'); module.exports={     context:__dirname+'/src',      entry:'./js/index.js',  //入口文件     output:{        path:__dirname+'/src/js/', //输出地址        filename:'bundle.js'  //输出文件名     },     module:{        loaders:[{            test:/\.js?$/, //正则匹配文件后缀            exclude:/(node_modules)/, //不进行解析的文件夹            loader:"babel-loader", // 指定loader            query:{                presets:['react','es2015'] //指定loader 解析的类型            }        }]     }, }

命令
webpack 来打包文件；
webpack –watch 监听代码更新 自动打包
webpack-dev-server 搭建虚拟服务器来访问；