React新手入门教程

一、安装React

1、React windows安装要求

安装React 需要在计算机上安装 Node.js >= 6 和 npm >= 5.2。

2、通过npm 使用 React

1）全局安装：

npm install -g create-react-app

2）构建项目

create-react-app my-app（项目名称 自定义）

cd my-app

npm start

3）项目目录结构：

manifest.json 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头。

我们可以打开 src 文件夹内的 App.js 对页面进行修改：（添加 Hello World）

修改后，打开页面 （页面会自动更新）：

React 可以直接下载使用，用<script>标签添加到HTML页面中，可以在官网 https://reactjs.org/ 下载最新版。

二、React 路由模块创建及使用

1、首先安装router

npm install --save react-router

然后使用一个支持 CommonJS 或 ES2015 的模块管理器，例如 webpack：

/ 使用 ES6 的转译器，如 babel
import { Router, Route, Link } from 'react-router'

// 不使用 ES6 的转译器
var ReactRouter = require('react-router')
var Router = ReactRouter.Router
var Route = ReactRouter.Route
var Link = ReactRouter.Link

也可以在 unpkg 上构建 UMD 格式：

<script src="https://unpkg.com/react-router/umd/ReactRouter.min.js"></script>

2、安装react-router-dom

首先进入项目目录，使用npm安装react-router-dom：

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令

3、路由的使用

1）src下创建route文件夹，文件夹内创建index.js;

2）src/page页面下创建home文件夹，文件夹内创建home.js、home.css页面：

import React from "react";
export default class home extends React.Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
  }
  render() {
    return <div>Home</div>;
  }
}

3）route/index.js中导入home页面

import React, { Component } from "react";
import { HashRouter, Switch, Route } from "react-router-dom";
import home  from '../page/home/home';
class RouterIndex extends Component {
  render() {
    return (
      <HashRouter>
        <Switch>
          <Route exact path="/" component={home} />
        </Switch>
      </HashRouter>
    );
  }
}

export default RouterIndex;

4）app.js页面引入route/index.js文件

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import RouterIndex from "./route/index"; //引入路由管理js
import "./App.css";

function App() {
  return (
    <div className="App">
      <RouterIndex />
    </div>
  );
}
export default App;

三、React如何设置代理

1、设置代理

以需要代理的服务器地址https://127.0.0.1:8888为例。

先安装插件axios

npm install axios

方法一：

在package.json文件中添加一个参数

"proxy": "http://127.0.0.1:8888",

方法二：

1.先下载代理包

npm install http-proxy-middleware --save

2.在src中新建文件夹，命名为 setupProxy.js

3.导入包：

const proxy  = require('http-proxy-middleware')
//由于http-proxy-middleware更新，网上的const proxy= require('http-proxy-middleware')已经不可以用了，换成了const { createProxyMiddleware } 

下面加代码：

module.exports = function (app) {
  app.use(proxy.createProxyMiddleware('/qwl', {    // 'qwl'  需要转发的请求
    target: 'https://baidu.com',  //接口服务器地址
    // target: 'http://192.168.9.116:8080',
    // target: 'http://192.168.9.17:8080', 
    // target: 'http://192.168.9.19:8080', 
    changeOrigin: true,
    pathRewrite: {
      '^/qwl': ''
    },
  }));
}

后面请求就是

axios.get(/api/XXXX)

api就是把你要代理的地址添加在/api/XXXX前面，然后把/api替换为""，就变成了http://127.0.0.1:8888/XXXX

2、React数据交互

import React, { Component } from 'react'
import axios from "axios"
export default class index extends Component {
    componentDidMount(){
        axios.get("/api/db/in_theaters").then(res=>{
            console.log(res)            
        })
    }

    render() {
        return (
            <div>
                proxy
            </div>
        )
    }
}

四、react项目引入echarts插件

参考npm文档：https://www.npmjs.com/package/echarts-for-react

由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装

第一步：npm安装echarts-for-react

npm install --save echarts-for-react
npm install echarts --save //如果有报错找不到echarts模块，需要在安装一下exharts'

第二步：引入模块和组件

引入组件

//不是按需加载的话文件太大
//import echarts from 'echarts' 
//下面是按需加载
import echarts from 'echarts/lib/echarts'
import ReactEcharts from 'echarts-for-react';

输出html

render() {
        return (
            <ReactEcharts option={this.getOption()}></ReactEcharts>
        )
    }

配置项

getOption =()=> {
    let option = {
        title:{
          text:'用户骑行订单'
        },
        tooltip:{   //展示数据
          trigger:'axis'
        },
        xAxis:{
          data:['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis:{
          type:'value'
        },
        series:[
          {
            name:'订单量',
            type:'bar',
            data:[1000,2000,1500,3000,2000,1200,800]
          }
        ]
    }
    return option;
  }

完整代码

import React from "react";
import {Card} from 'antd';
//import echarts from 'echarts';
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';

export default class home extends React.Component {
    constructor(props) {
        super(props);
    }

    getOption = () => {
        let option = {
            title: {
                text: '用户骑行订单'
            },
            tooltip: {   //展示数据
                trigger: 'axis'
            },
            xAxis: {
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '订单量',
                    type: 'bar',
                    data: [1000, 2000, 1500, 3000, 2000, 1200, 800]
                }
            ]
        }
        return option;
    }

    render() {
        return (
            <ReactEcharts option={this.getOption()}></ReactEcharts>
        )
    }
}

显示样式

第三步：参考echarts官网实例添加option参数

参考官网：https://echarts.baidu.com/examples/

注意：由于引入echarts文件太大，所以一般按需引入，完整项目代码如下：

import React from 'react';
import {Card} from 'antd';
import echartTheme from './../themeLight'
//不是按需加载的话文件太大
//import echarts from 'echarts'
//下面是按需加载
import echarts from 'echarts/lib/echarts'
//导入折线图
import 'echarts/lib/chart/line';  //折线图是line,饼图改为pie,柱形图改为bar
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';
export default class Line extends React.Component{
  componentWillMount(){
    //主题的设置要在willmounted中设置
    echarts.registerTheme('Imooc',echartTheme);
  }
  getOption =()=> {
    let option = {
      title:{
        text:'用户骑行订单',
        x:'center'
      },
      tooltip:{
        trigger:'axis',
      },
      xAxis:{
        data:['周一','周二','周三','周四','周五','周六','周日']
      },
      yAxis:{
        type:'value'
      },
      series:[
        {
          name:'OFO订单量',
          type:'line',   //这块要定义type类型，柱形图是bar,饼图是pie
          data:[1000,2000,1500,3000,2000,1200,800]
        }
      ]
    }
   return option
  }

  render(){
    return(
      <div>
        <Card title="折线图表之一">
            <ReactEcharts option={this.getOption()} theme="Imooc"  style={{height:'400px'}}/>
        </Card>

      </div>
    )
  }
}

注意：按需加载是引入node_modules文件夹中的js文件，所以，如果记得改import ‘echarts/lib/chart/line’; 折线图不用改，饼图和柱形图line分别改为pie和bar

完整的代码可以看一下github上的项目https://github.com/topvae/echarts-in-React.git

五、React组件库Ant Design的安装与使用

1、什么是 Ant Design

1）Ant Design 提炼自企业级中后台产品的交互语言和视觉风格

2）Ant Design 使用 TypeScript 构建，提供完整的类型定义文件

2、Ant Design 的安装

1）在项目根目录终端引入：

npm install antd --save

2）在 index.js 中加入：

import 'antd/dist/antd.css';

3、Ant Design 的使用

这里引用 Ant Design 的 Spin 组件作为例子

（1）在页面的 script 中导入 Spin 组件

import { Spin } from 'antd';

（2）在 render() 中直接使用

render() {
    return (
      <React.Fragment>
        <Spin />
      </React.Fragment>
    )
  }

运行效果：

更多 MintUI 组件请参考 https://ant.design/docs/react/introduce-cn

以上可以简单的搭建一个react框架，并且可以显示图表，但是对于大数据方面的ant-design-pro框架来说还是不够的，接下来继续学关于这方面的知识。