????????我們知道，目前React框架-------這個(gè)專注于渲染用戶界面的JavaScript庫在前端火得不行，本人這幾天經(jīng)過對(duì)webpack這個(gè)前端工具的小小研究，并結(jié)合ES6語法，對(duì)百度的Echarts官方示例，寫了一段小小的React代碼，不過思想還是很重要的。
第一步，通過安裝NodeJS，獲得npm安裝工具，這個(gè)可以直接去官網(wǎng)下載。
【nodejs官網(wǎng)】 https://nodejs.org/en/download/
第二步，初始化項(xiàng)目的運(yùn)行參數(shù)，生成package.json文件（默認(rèn)你已經(jīng)建立好項(xiàng)目的文件夾 ）
npm init
第三步，安裝webpack工具
npm install webpack --save-dev
第四步，建立webpack打包的配置文件，這是webpack的默認(rèn)入口文件，一般命名為webpack.config.js，如果要自定義命名，運(yùn)行時(shí)要在前邊加上 --config，以下是這個(gè)小程序需要的一些配置參數(shù)。
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。由于這里我們用到了異步請(qǐng)求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();
}
//組件加載后調(diào)用的hook函數(shù)
componentDidMount() {
var myChart = echarts.init(document.getElementById(this.props.id));
myChart.setOption(option);
$.get('./app/data.json').done(function (data) {
// 填入數(shù)據(jù)
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列
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文件只是定義了圖表的基本結(jié)構(gòu)
var option = {
title: {
text: '異步數(shù)據(jù)加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
};
export default option
data.json數(shù)據(jù)很簡單，這里只是為了測試異步請(qǐng)求ajax提交json文件到我們的react項(xiàng)目中
1.png
第六步，感興趣的小伙伴可以去試試強(qiáng)大的前端開發(fā)工具——"browser-sync",同樣可以用npm安裝。Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html、js、css、sass、less等）并自動(dòng)刷新頁面，大大提高開發(fā)人員的工作效率。命令行在正常運(yùn)行時(shí)，效果如下圖：
2.png
最后，如前面配置文件里所說的，我們把我們所有的js文件打包到"bundle.js"文件里邊，然后我們html文件很簡單，就只是引用這個(gè)文件即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通過webpack檢驗(yàn)在react中引用Echarts圖表</title>
</head>
<body>
<div id="main"></div>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>
如上所述，我們的這樣一個(gè)小程序完成了，鏘鏘鏘！上效果圖
3.png
