react项目搭建

首先确定node.js和npm已经安装完成。

此处使用git bash进行安装。

（1）npm install -g create-react-app  //安装脚手架

（2）create-react-app first-demo //first-demo为项目名称

（3）cd first-demo 

（4）npm start   //npm run start 启动项目

 

使用antd UI框架以及sass配置。

（5）npm install antd --save  //下载antd UI框架

        在App.css文件中引入：

        @import  '~antd/dist/antd.css';

（6）npm install node-sass --save-dev  //配置sass

 

使用echarts图表。

（7）npm install echarts-for-react --save   //下载react的echarts插件

         npm install --save echarts

         在js文件中引入：

         import ReactEcharts from ''echarts-for-react;

import React from 'react'
import ReactEcharts from 'echarts-for-react'; 
export default class echartsList extends React.Component{
    render(){
    var option = {
        color: ['#1AB394'],
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri' ]
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: this.props.echartsData,
        type: this.props.type,
        boundaryGap: false,
        barWidth: '40%' 
    }]
};    
        return(
            <ReactEcharts
            option={option}  
            style={{width: '100%',height:'300px'}}
        />
        )
    }
}