React项目中用webpack工具引入Echarts官方示例

        我们知道，目前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 (  
            
  
            
  
        )  
    }             
}    
ReactDom.render(
, 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文件很简单，就只是引用这个文件即可

如上所述，我们的这样一个小程序完成了，锵锵锵！上效果图

3.png

写在结尾的话：

        其实本人也是刚刚踏入前端的大门，光明正大地吃了回前端的禁果，有写的不好的地方还望大佬们斧正。

        另外，送大家一句话：世上无难事，只要肯尝试！