1、安裝腳手架 npm install -g create-react-app / cnpm install -g create-react-app
2、創建項目 create-react-app 項目名稱（create-react-app --version 查看版本號）
3.安裝react-router-dom依賴
3.src下一般創建page,components,router文件夾
4.路由的引入
在router文件下創建router.js文件
//引入react jsx寫法的必須
import React from 'react';
//引入需要用到的頁面組件
import Home from '../pages/home';
import About from '../pages/about';
//引入一些模塊
import { BrowserRouter as Router, Route} from "react-router-dom";
function router(){
return (
<Router>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</Router>);
}
export default router;
此時，app.js要引入路由的加載，如下
import React, { Component } from 'react';
import Router from './router/router'
class App extends Component {
constructor(props){
super(props);
}
render() {
return (
<Router />
);
}
}
export default App;
其中index.js爲項目的入口文件
5.嵌套路由，例如在about路由上嵌套一個子路由other後，
router.js文件變爲
//引入react jsx寫法的必須
import React from 'react';
//引入需要用到的頁面組件
import Home from '../pages/home';
import About from '../pages/about';
import Other from '../pages/other';
//引入一些模塊
import { BrowserRouter as Router, Route} from "react-router-dom";
function router(){
return (
<Router>
<Route path="/home" component={Home} />
<Route path="/about" render={()=>(
<About>
<Route path="/about/other" component={Other} />
</About>
)}>
</Route>
</Router>);
}
export default router;
about.js文件變爲
//about.js
import React, { Component } from 'react';
export default class About extends Component {
render() {
return (
<h1>
歡迎，這裏是About
{this.props.children}
</h1>
)
}
}
other.js文件爲
//other.js
import React, { Component } from 'react';
export default class About extends Component {
render() {
return (
<div>
歡迎，這裏是About的子路由
</div>
)
}
}
注意事項
1/ render={()=>對象} 這裏的對象不需要大括號噢，如果你熟悉箭頭語法的話，那麼應該不用我多說
2/ 擁有子路由的路由不能添加 exact屬性，不然會無法訪問到子組件
6.重定向
有時候，我們需要把 "/" 重定向到我們的主頁，這樣用戶直接輸入"www.***.com"就可以了，而不用輸入"www.***.com/home"。
//router.js //需要import一下Redirect import {Redirect} from "react-router-dom"; return ( <Router> <Route path="/home" component={Home} /> <Route path="/" render={ ()=> ( <Redirect to="/home"/>)}> </Route> </Router>); } export default router;
7.axios的引入，數據的定義，方法的定義，如下home.js
//home.js
import React, { Component } from 'react';
import {Link} from 'react-router-dom'
import axios from 'axios'
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
show: '這是定義數據'
}
}
componentDidMount() {
this.getData();
}
getData(){
axios.post('http://192.169.2.35/dsp/userThread/count', {
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
display = () => {
this.setState({
show:'這是改變後的定義數據'
})
}
render() {
return (<h1>
歡迎，這裏是Home
{this.state.show}
<Link to="/about">about頁面</Link>
<button onClick={this.display}>改變數據</button>
</h1>)
}
}
8.父子組件傳值
父組件傳值給子組件，父組件通過state的方式傳值給子組件，而子組件通過props進行接收父組件傳過來的值
父組件about.js如下：
//about.js
import React, { Component } from 'react';
import Person from "./person"
export default class About extends Component {
constructor(props) {
super(props);
this.state = {
arr: [{
"userName": "fangMing", "text": "123333", "result": true
}, {
"userName": "zhangSan", "text": "345555", "result": false
}, {
"userName": "liSi", "text": "567777", "result": true
}, {
"userName": "wangWu", "text": "789999", "result": true
}]
}
}
render() {
return (
<h1>
歡迎，這裏是About
<Person aboutArr={this.state.arr}></Person>
{this.props.children}
</h1>
)
}
}
子組件person.js如下
import React from "react"
class ComentList extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="list">
<ul>
{
this.props.aboutArr.map(item => { //這個地方通過this.props.arr接收到父組件傳過來的arr，然後在{}裏面進行js的循環
return (
<li key={item.userName}>
{item.userName} 評論是:{item.text}
</li>
)
})
}
</ul>
</div>
)
}
}
export default ComentList;
子組件給父組件傳值，子組件通過props定義對應值如pfn，，，父組件通過props.pfn接收子組件的傳過來的值
子組件person.js如下
import React from "react"
class ComentList extends React.Component {
constructor(props) {
super(props);
this.state = ({
childText: "this is child text"
})
}
clickFun(text) {
this.props.pfn(text)//這個地方把值傳遞給了props的事件當中
}
render() {
return (
<div className="list">
<ul>
{
this.props.aboutArr.map(item => { //這個地方通過this.props.arr接收到父組件傳過來的arr，然後在{}裏面進行js的循環
return (
<li key={item.userName}>
{item.userName} 評論是:{item.text}
</li>
)
})
}
</ul>
{/* 通過事件進行傳值，如果想得到event，可以在參數最後加一個event，
這個地方還是要強調，this，this，this */}
<button onClick={this.clickFun.bind(this, this.state.childText)}>
click me
</button>
</div>
)
}
}
export default ComentList;
父組件about.js如下
//about.js
import React, { Component } from 'react';
import Person from "./person"
export default class About extends Component {
constructor(props) {
super(props);
this.state = {
parentText: "this is parent text",
arr: [{
"userName": "fangMing", "text": "123333", "result": true
}, {
"userName": "zhangSan", "text": "345555", "result": false
}, {
"userName": "liSi", "text": "567777", "result": true
}, {
"userName": "wangWu", "text": "789999", "result": true
}]
}
}
fn(data) {
this.setState({
parentText: data //把父組件中的parentText替換爲子組件傳遞的值
},() =>{
console.log(this.state.parentText);//setState是異步操作，但是我們可以在它的回調函數裏面進行操作
});
}
render() {
return (
<h1>
歡迎，這裏是About
{/* 通過綁定事件進行值的運算，這個地方一定要記得.bind(this)，
不然會報錯，切記切記，因爲通過事件傳遞的時候this的指向已經改變 */}
<Person aboutArr={this.state.arr} pfn={this.fn.bind(this)}></Person>
{this.props.children}
<p>
text is {this.state.parentText}
</p>
</h1>
)
}
}
第一全局axios請求
創建api的文件夾，
fetch.js如下
/**
* Created by Administrator on 2018/7/26.
*/
/* eslint-disable */
import axios from 'axios'
export function get(url, params = {}) {
if (Object.keys(params).length > 0) {
var queryString = '';
for (var key in params) {
queryString += '&' + key + '=' + params[key];
}
queryString = queryString.substring(1);
url += '?' + queryString;
}
return new Promise((resolve, reject) => {
axios({
method: 'get',
url:url,
}).then((response) => {
resolve(response.data);
}, err => {
reject(err);
})
.catch((error) => {
;
reject(error)
})
})
}
export function post(url, params = {}, config = {}) {
let contentType = 'application/x-www-form-urlencoded';
if (config && config.contentType) {
contentType = config.contentType;
}
let param = '';
for (let i in params) {
if (typeof params[i]=='string') {
// params[i] = params[i].replace('&','%26')
params[i] = encodeURIComponent(params[i]);
}
param += i + '=' + params[i] + '&';
}
if (param !== '') {
param = param.substring(0, param.length - 1);
}
return new Promise((resolve, reject) => {
axios({
method: 'post',
url: url,
contentType: contentType,
data: param,
}).then((response) => {
resolve(response.data);
}).catch((err) => {
console.log(err);
})
})
}
export function fetch(url, params = {}, config = {}) {
let method = 'post';
if (config && config.method) {
method = config.method;
}
let contentType = 'multipart/form-data';
if (config && config.contentType) {
contentType = config.contentType;
}
return new Promise((resolve, reject) => {
axios({
method: method,
url: url,
data: params,
contentType: contentType,
}).then((response) => {
resolve(response.data);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
}
export function postParams(url, params = {}, config = {}) {
let contentType = 'application/x-www-form-urlencoded';
if (config && config.contentType) {
contentType = config.contentType;
}
return new Promise((resolve, reject) => {
axios({
method: 'post',
url: url,
params: params,
dataType: 'json',
}).then((response ) => {
resolve(response.data);
}).catch((err) => {
console.log(err);
})
})
}
export function upload(url, params = {}) {
return new Promise((resolve, reject) => {
axios({
url: url,
data: params,
method: 'POST',
contentType: 'multipart/form-data',//text multipart/form-data
}).then(function (response) {
resolve(response.data);
},err => {
reject(err);
}).catch(function (error) {
reject(error)
});
})
}
export default {
get,
post,
fetch,
postParams,
upload
}
api.js如下
import {post} from './fetch'
export default {
homeGet(params) {
return post('接口請求地址',params)
}
}
在app.js下注冊如下
import React, { Component } from 'react';
import Router from './router/router'
import fetch from './api/api'
Component.prototype.$ajax = fetch;
class App extends Component {
constructor(props){
super(props);
this.state = {}
}
render() {
return (
<div>
<header>
這是公共頭部
</header>
<Router />
</div>
);
}
}
export default App;
home.js文件調用如下
//home.js
import React, { Component } from 'react';
import {Link} from 'react-router-dom'
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
show: '這是定義數據'
}
}
componentDidMount() {
this.getData();
}
getData(){
this.$ajax.homeGet().then(res =>{
console.log(res)
})
}
display = () => {
this.setState({
show:'這是改變後的定義數據'
})
}
render() {
return (<h1>
歡迎，這裏是Home
{this.state.show}
<Link to="/about">about頁面</Link>
<button onClick={this.display}>改變數據</button>
</h1>)
}
}