相信这个话题很多人都感兴趣，这里就用几个简单的命令就可以搭建出 react 的开发环境。
1. 安装 react
要使用 react，就必须装下面两个包的。
$ npm install --save react react-dom
2. 建立 babel
可能你不懂 babel 是什么，你可以把它理解为编译器，它能把 react 代码转成一般浏览器可读可执行的代码，通常可以用它来转化 react 或 vue 这样的前端代码，或者把 es6 代码转成普通的 javascript 代码等等。
如果还不理解的话，可以看这篇文章 babel 入门指南。
要让 babel 很好的转化 react 代码，首先要安装好 babel，再装 babel 转化 react 的包。
运行下面的命令。
$ npm install --save-dev babel-core babel-preset-react babel-preset-env
创建 .babelrc 文件。
{
"presets": ["env", "react"]
}
为什么我知道要这么做呢？
因为我是分别结合 babel 和 react 的官网给的最新官方指南。
可以参考下面两个链接：
3. 在 webpack 使用 babel-loader
最后我们需要在 webpack 中使用一个 loader 来转化 react 的代码。
首先，安装。
$ npm install --save-dev babel-loader
// 可能报错，说如果你的babel-core版本是6.x，那么安装babel-loader@7
// npm install -D babel-loader@7
image.png
webpack.config.js
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].bundle.js'
},
devServer: {
hot: false,
port: 8888
},
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.jsx$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
hash: true,
minify: {
collapseWhitespace: true
}
})
]
}
4. 写 react 组件
接着我们来准备一些 react 的代码，要来测试一下。
src/index.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
import css from './style.less';
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './Header';
ReactDOM.render(
<Header />,
document.getElementById('root')
);
src/Header.js
import React, { Component } from 'react';
class Header extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
hello,everyone
<p>Lorem ipsum dolor sit amet consectetur. </p>
</div>
);
}
}
export default Header;
效果如下：
image.png
网友评论