1. 安装 react
要使用 react，就必须装下面两个包的。
`$ npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save react react-dom</span>
`
2. 建立 babel
可能你不懂 babel 是什么，你可以把它理解为编译器，它能把 react 代码转成一般浏览器可读可执行的代码，通常可以用它来转化 react 或 vue 这样的前端代码，或者把 es6 代码转成普通的 javascript 代码等等。
如果还不理解的话，可以看我这篇文章 babel 入门指南。
要让 babel 很好的转化 react 代码，首先要安装好 babel，再装 babel 转化 react 的包。
运行下面的命令。
`$ npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save-dev babel-core babel-preset-react babel-preset-env</span>
`
创建 .babelrc 文件。
{
<span class="hljs-attr">"presets"</span>: [<span class="hljs-string">"env"</span>, <span class="hljs-string">"react"</span>]
}
为什么我知道要这么做呢？
因为我是分别结合 babel 和 react 的官网给的最新官方指南。
可以参考下面两个链接：
3. 在 webpack 使用 babel-loader
最后我们需要在 webpack 中使用一个 loader 来转化 react 的代码。
首先，安装。
`$ npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save-dev babel-loader</span>
`
webpack.config.js
`<span class="hljs-keyword">var</span> HtmlWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'html-webpack-plugin'</span>);
<span class="hljs-keyword">const</span> ExtractTextPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'extract-text-webpack-plugin'</span>);
<span class="hljs-built_in">module</span>.exports = {
<span class="hljs-attr">entry</span>: <span class="hljs-string">'./src/app.js'</span>,
...
module: {
<span class="hljs-attr">rules</span>: [
{
<span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.scss$/</span>,
<span class="hljs-attr">use</span>: ExtractTextPlugin.extract({
<span class="hljs-attr">fallback</span>: <span class="hljs-string">'style-loader'</span>,
<span class="hljs-comment">//resolve-url-loader may be chained before sass-loader if necessary</span>
use: [<span class="hljs-string">'css-loader'</span>, <span class="hljs-string">'sass-loader'</span>]
})
},
<span class="hljs-comment">// 这两行是处理 react 相关的内容</span>
{ <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.js$/</span>, <span class="hljs-attr">loader</span>: <span class="hljs-string">'babel-loader'</span>, <span class="hljs-attr">exclude</span>: <span class="hljs-regexp">/node_modules/</span> },
{ <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.jsx$/</span>, <span class="hljs-attr">loader</span>: <span class="hljs-string">'babel-loader'</span>, <span class="hljs-attr">exclude</span>: <span class="hljs-regexp">/node_modules/</span> }
]
}
};
`
4. 写 react 组件
接着我们来准备一些 react 的代码，要来测试一下。
src/index.html
`<span class="hljs-meta"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>Hello World<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"root"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
`
src/app.js
`<span class="hljs-keyword">import</span> css <span class="hljs-keyword">from</span> <span class="hljs-string">'./app.scss'</span>;
<span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;
<span class="hljs-keyword">import</span> Root <span class="hljs-keyword">from</span> <span class="hljs-string">'./Root'</span>;
ReactDOM.render(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Root</span>></span><span class="hljs-tag"></<span class="hljs-name">Root</span>></span></span>,
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'root'</span>)
);
`
src/Root.js
`<span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Root</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{textAlign:</span> '<span class="hljs-attr">center</span>'}}></span>
<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Hello World<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>);
}
}
`
效果如下：
参考链接：
💬 评论