• 1. 安装 react
  • 2. 建立 babel
  • 3. 在 webpack 使用 babel-loader
  • 4. 写 react 组件

    相信这个话题很多人都感兴趣，这里就用几个简单的命令就可以搭建出 react 的开发环境。

    1. 安装 react

    要使用 react，就必须装下面两个包的。

    1. $ npm install --save react react-dom

    2. 建立 babel

    可能你不懂 babel 是什么，你可以把它理解为编译器，它能把 react 代码转成一般浏览器可读可执行的代码，通常可以用它来转化 react 或 vue 这样的前端代码，或者把 es6 代码转成普通的 javascript 代码等等。

    如果还不理解的话，可以看我这篇文章 babel 入门指南。

    要让 babel 很好的转化 react 代码，首先要安装好 babel，再装 babel 转化 react 的包。

    运行下面的命令。

    1. $ npm install --save-dev babel-core babel-preset-react babel-preset-env

    创建 .babelrc 文件。

    1. {
    2.   "presets": ["env", "react"]
    3. }

    为什么我知道要这么做呢？

    因为我是分别结合 babel 和 react 的官网给的最新官方指南。

    可以参考下面两个链接：

    • React preset
    • React Installation

    3. 在 webpack 使用 babel-loader

    最后我们需要在 webpack 中使用一个 loader 来转化 react 的代码。

    首先，安装。

    1. $ npm install --save-dev babel-loader

    webpack.config.js

    1. var HtmlWebpackPlugin = require('html-webpack-plugin');
    2. const ExtractTextPlugin = require('extract-text-webpack-plugin');
    4. module.exports = {
    5.   entry: './src/app.js',
    6.   ...
    7.   module: {
    8.     rules: [
    9.       {
    10.         test: /\.scss$/,
    11.         use: ExtractTextPlugin.extract({
    12.           fallback: 'style-loader',
    13.           //resolve-url-loader may be chained before sass-loader if necessary
    14.           use: ['css-loader', 'sass-loader']
    15.         })
    16.       },
    17.       // 这两行是处理 react 相关的内容
    18.       { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
    19.       { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    20.     ]
    21.   }
    22. };

    4. 写 react 组件

    接着我们来准备一些 react 的代码，要来测试一下。

    src/index.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Hello World</title>
    6. </head>
    7. <body>
    8.   <div id="root"></div>
    9. </body>
    10. </html>

    src/app.js

    1. import css from './app.scss';
    3. import React from 'react';
    4. import ReactDOM from 'react-dom';
    5. import Root from './Root';
    7. ReactDOM.render(
    8.   <Root></Root>,
    9.   document.getElementById('root')
    10. );

    src/Root.js

    1. import React from 'react';
    3. export default class Root extends React.Component {
    4.   render() {
    5.     return (
    6.       <div style={{textAlign: 'center'}}>
    7.         <h1>Hello World</h1>
    8.       </div>);
    9.   }
    10. }

    效果如下：

    8. 用 webpack 和 babel 配置 react 开发环境 - 图1

    参考链接：

    • Setting up Webpack, Babel and React from scratch, revisited
    • Setup a React Environment Using webpack and Babel
    • Setting up React with Webpack 3.0, Yarn and Babel

    先说这么多吧。