(如转载，请注明出处)
1.安装react
npm install react -D react react-dom
除了安装react, 我们还要安装babel babel-preset-react babel-preset-es2015
npm i -D babel babel-preset-react babel-preset-es2015
安装完成后我们需要在src目录下建立一个.babelrc文件,在文件内输入:
{
"presets": ["es2015", "react"]
}
当然, 还没算完,我们还要安装 babel-loader和babel-core
npm install --save-dev babel-loader babel-core
安装完成后在webpack.config.js中的rules内配置如下:
在app.js中引入 react 和 reactDOM, 然后渲染个元素试一下:
运行npm run dev之后,元素成功渲染了,是不是有点小兴奋呢! 不过别高兴太早,我们会在终端找到这么一行提示:
[BABEL] Note: The code generator has deoptimised the styling of "/Users/ruzhan/webpack/node_modules/react-dom/cjs/react-dom.development.js" as it exceeds the max of "500KB".
超出500KB最大值,问题在哪儿呢,原来在webpack.config.js中的配置有问题,我们把exclude: '/node_modules'上的引号去掉再运行试试,是不是很完美?
