webpack从零开始构建react应用(三)

1.安装 react react-dom

npm install --save react react-dom

2.安装babel

浏览器是不能直接加载jsx，es6，es7的一些语法,这个时候就需要借助babel 来对js/jsx做转换
    npm install --save babel-core babel-loader babel-preset-env  babel-preset-react 
    babel-preset-env(转换es6 es7 es8)
    babel-preset-react (jsx转换)

3.babel配置

1.在项目根目录下面添加 .babelrc文件
2.添加如下代码
  {
    "presets":[
        "react",
        "env"
    ]
  }
3.在webpack.config.js中添加
module:{
    rules:[
         {
             test:/\.(js|jsx)$/,
             exclude:/node_modules/,  
             use :{
                 loader: 'babel-loader'
             }
         }
     ] 
},

3.使用source-map 调试

在webpack.config.js中添加
devtool:'source-map',

4.开始编写react代码

1.在src下面添加component目录；
2.在component目录下面创建App.js
import React from 'react';
class App extends  React.Component{
    render(){
        return (
            <div>
                <h1>hello react!</h1>
            </div>
        )
    }
}
export default App;

3.修改index.js 如下
import React from 'react';
import ReactDom from 'react-dom';
import App from './component/App.js';
ReactDom.render(
    <App />,
    document.getElementById('root')
)；

4.修改index.html，在body中添加<div id="root"></div>

5. npm run server 在浏览器端访问localhost:8100就能看到hello react
注：如何在npm run server之后自动让弹出页面呢？
    很简单，修改package.json下面的scripts，在webpack-dev-server 后面添加--open
    "scripts": {
        "server": "webpack-dev-server --open"
    }

一个最最最简单的react的架子已经搭好了，但是里面还有很多地方空缺，比如css的loader，图片的资源路径问题等等，后面继续添加。