學習資料
入門教程: http://caibaojian.com/react/
帶路由的項目: https://github.com/super918180/imooc-tabbar
(備注: 下載項目后,需npm install.然后才能啟動項目 npm start)
1.創(chuàng)建項目
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內(nèi)容如下:
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.導航的內(nèi)容寫成一個高階組件
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'
