webpack 搭建react环境

**在之前的服务器基础上,实际上是webpack+es6+react才是react环境**

安装react环境

1、安装
	cnpm install --save react react-dom
	cnpm install --save-dev babel-preset-react //将jsx->js

2、编写webpack.config.js配置文件
	在module->rules中添加:
	{
		test:/\.(js|jsx)$/,
		use:"babel-loader",

		//options为webpack2.0版本,已过时
		//options:{
			//prestes:["es2015","react"]
		//}
	}
3、在项目根路径创建.babelrc文件
	在文件中添加
	{
	  "presets": ["es2015", "react"],
	}

代码示例:
react.js文件:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(    <h1>Hello World123222</h1>,
    document.getElementById('root')
)

.babelrc文件:

{
  "presets": ["es2015","react"],
}

执行命令:
npm run dev

发布了387 篇原创文章 · 获赞 3 · 访问量 9098

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/104236698