我们知道，目前React框架-------这个专注于渲染用户界面的JavaScript库在前端火得不行，本人这几天经过对webpack这个前端工具的小小研究，并结合ES6语法，对百度的Echarts官方示例，写了一段小小的React代码，不过思想还是很重要的。
第一步，通过安装NodeJS，获得npm安装工具，这个可以直接去官网下载。
【nodejs官网】 https://nodejs.org/en/download/
第二步，初始化项目的运行参数，生成package.json文件（默认你已经建立好项目的文件夹 ）
npm init
第三步，安装webpack工具
npm install webpack --save-dev
第四步，建立webpack打包的配置文件，这是webpack的默认入口文件，一般命名为webpack.config.js，如果要自定义命名，运行时要在前边加上 --config，以下是这个小程序需要的一些配置参数。
var path = require('path');
module.exports = {
entry: './src/main.js',
output: {
//打包以后js所放的路径
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
},
module: {
loaders:[
{
test: /\.js$/,
exclude: /node_modules/,
include: /app/,
loader: 'babel-loader',
query:{
presets: ['es2015','react']
}
},
{
test: /\.json$/,
exclude: /node_modules/
}
]
}
}
第五步，写我们的打包入口的main.js。由于这里我们用到了异步请求ajax传递json文件并且采用ES6的语法，所以我们需要安装一些包，包括loader和依赖库
npm install --save-dev babel-loader babel-core
npm install babel-preset-latest --save-dev
npm install babel-preset-react --save-dev
npm install react --save-dev
npm install react-dom --save-dev
npm install echarts --save-dev
import React, {Component} from "react";
import echarts from "echarts";
import ReactDom from "react-dom";
import $ from "jquery"
import option from "./option"
export default class Main extends React.Component {
//初始化
constructor () {
super();
}
//组件加载后调用的hook函数
componentDidMount() {
var myChart = echarts.init(document.getElementById(this.props.id));
myChart.setOption(option);
$.get('./app/data.json').done(function (data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});
}
render () {
return (
<div id={this.props.id} style={{width:this.props.width + 'px',height:this.props.height + 'px'}}>
</div>
)
}
}
ReactDom.render(<Main id="xm" width='1000' height='500' />, document.getElementById('main'));
其中option.js文件只是定义了图表的基本结构
var option = {
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
};
export default option
data.json数据很简单，这里只是为了测试异步请求ajax提交json文件到我们的react项目中
1.png
第六步，感兴趣的小伙伴可以去试试强大的前端开发工具——"browser-sync",同样可以用npm安装。Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面，大大提高开发人员的工作效率。命令行在正常运行时，效果如下图：
2.png
最后，如前面配置文件里所说的，我们把我们所有的js文件打包到"bundle.js"文件里边，然后我们html文件很简单，就只是引用这个文件即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过webpack检验在react中引用Echarts图表</title>
</head>
<body>
<div id="main"></div>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>
如上所述，我们的这样一个小程序完成了，锵锵锵！上效果图
3.png
