react项目搭建+axios+qs+echarts+react

学习资料

入门教程: http://caibaojian.com/react/
带路由的项目: https://github.com/super918180/imooc-tabbar
(备注: 下载项目后,需npm install.然后才能启动项目 npm start)

1.创建项目

npx create-react-app my-project
cd my-project
npm start

2.安装axios

npm install axios --save-dev
npm install qs --save-dev

//get请求用法
import axios from 'axios '
import qs from 'qs'

let params =  {
      ID: 12345
    }
axios.get('/user', qs.stringify(params ))
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  


//post请求用法
axios.post('/user',qs.stringify(params ))
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3.安装路由

//安装
npm install --save react-router-dom

//1.新建一个router.js内容如下:
import React from 'react'
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
import Home from './pages/home'
import Category from './pages/category'
import Car from './pages/car'
import User from './pages/user'

export default () => (
  <BrowserRouter>
    <Switch>
      <Route exact path="/" render={() => <Redirect to='/home'></Redirect>}></Route>
      <Route path='/home' component={Home} />
      <Route path='/category' component={Category} />
      <Route path='/car' component={Car} />
      <Route path='/user' component={User} />
    </Switch>
  </BrowserRouter>

//2.在app.js里引入router.js

app.png

//3.导航的内容写成一个高阶组件

T.png
1558419766(1).jpg

//4.每个页面里引入导航组件

home.png

4.react里使用echarts

//安装
npm install --save echarts-for-react
npm install --save echarts


//使用
import ReactEcharts from 'echarts-for-react';
<ReactEcharts
     option={this.getOtion()}
     style={{height: '350px', width: '1000px'}}
     className='react_for_echarts' />

5.react里使用d3.js

//安装
npm install --save d3

//使用
import d3 from 'd3'