# 8. 用 webpack 和 babel 配置 react 开发环境
相信这个话题很多人都感兴趣，这里就用几个简单的命令就可以搭建出 react 的开发环境。
## 1. 安装 react
要使用 react，就必须装下面两个包的。
``` bash
$ npm install --save react react-dom
```
## 2. 建立 babel
可能你不懂 `babel` 是什么，你可以把它理解为编译器，它能把 `react` 代码转成一般浏览器可读可执行的代码，通常可以用它来转化 `react` 或 `vue` 这样的前端代码，或者把 `es6` 代码转成普通的 javascript 代码等等。
如果还不理解的话，可以看我这篇文章 [babel 入门指南](https://www.rails365.net/articles/babel-ru-men-zhi-nan)。
要让 `babel` 很好的转化 `react` 代码，首先要安装好 `babel`，再装 `babel` 转化 `react` 的包。
运行下面的命令。
``` bash
$ npm install --save-dev babel-core babel-preset-react babel-preset-env
```
创建 `.babelrc` 文件。
```
{
"presets": ["env", "react"]
}
```
为什么我知道要这么做呢？
因为我是分别结合 `babel` 和 `react` 的官网给的最新官方指南。
可以参考下面两个链接：
- [React preset](https://babeljs.io/docs/plugins/preset-react/)
- [React Installation](https://reactjs.org/docs/installation.html)
## 3. 在 webpack 使用 babel-loader
最后我们需要在 webpack 中使用一个 loader 来转化 react 的代码。
首先，安装。
``` bash
$ npm install --save-dev babel-loader
```
**webpack.config.js**
``` javascript
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/app.js',
...
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'sass-loader']
})
},
// 这两行是处理 react 相关的内容
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
]
}
};
```
## 4. 写 react 组件
接着我们来准备一些 react 的代码，要来测试一下。
**src/index.html**
``` html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
```
**src/app.js**
``` javascript
import css from './app.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import Root from './Root';
ReactDOM.render(
<Root></Root>,
document.getElementById('root')
);
```
**src/Root.js**
``` javascript
import React from 'react';
export default class Root extends React.Component {
render() {
return (
<div style={{textAlign: 'center'}}>
<h1>Hello World</h1>
</div>);
}
}
```
效果如下：
参考链接：
- [Setting up Webpack, Babel and React from scratch, revisited](https://stanko.github.io/webpack-babel-react-revisited/)
- [Setup a React Environment Using webpack and Babel](https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel)
- [Setting up React with Webpack 3.0, Yarn and Babel](https://www.codementor.io/goodnesskay/setting-up-react-with-webpack-3-0-yarn-and-babel-9ftd5phqz)
先说这么多吧。
- 0. 开始
- 1. 介绍
- 2. 安装
- 3. 实现 hello world
- 4. webpack 的配置文件 webpack.config.js
- 5. 使用第一个 webpack 插件 html-webpack-plugin
- 6. 使用 loader 处理 CSS 和 Sass
- 7. 初识 webpack-dev-server
- 8. 用 webpack 和 babel 配置 react 开发环境
- 9. 用 clean-webpack-plugin 来清除文件
- 10. 配置多个 HTML 文件
- 11. 如何使用 pug (jade) 作为 HTML 的模板
- 12. 如何使用模块热替换 HMR 来处理 CSS
- 13. 生产环境 vs 开发环境
- 14. 如何打包图片
- 15. 加载和打包 Twitter Bootstrap 框架
- 16. 使用 ProvidePlugin 插件来处理像 jQuery 这样的第三方包
- 17. 轻松通过两个实例来理解 devtool: 'source-map' 是什么意思
- 18. 构建开发和生产环境-分离配置文件