react and reduct 学习手记2

chap3 run in chrome

执行顺序 工程根目录，npm install，npm run build，npm start

1.APP使用前面编写的

2.render in chrome 使用 react-dom 中的 render方法

render(<App />,document.querySelector('#app'))

3.webpack打包 babel-loader编译 也可以先用 Babel中的CLI进行编译

3.1 npm install --save-dev webpack babel-loader babel-core

3.2 添加webpack.config.js 指定打包编译的配置信息

module.export = {

entry:'./src/client',//这里没有.js

output:{

path:__dirname+'/static/dist',

filename:'main.js'   //这里没有，

},

module:{//只有这里指定打包编译的信息

loaders:[{test:/\.js$,exclude:'node_modules/',loaders:['babel']}] // 这里的loaders 已经改为rulers

}

}

3.3 安装es2015和react 

npm install --save-dev babel-preset-es2015 babel-preset-react

3.4 添加.babelrc文件

{“preset”:['react','es2015']}

 

注意：

1.安装 babel-loader@7会有提示

2.npm install --save-dev http-server

生成的main.js文件可以引入html中进行dom操作