摘要：通過(guò)聲明式編程模型定義組件，是最強(qiáng)大的核心功能。無(wú)論是的瀏覽器書(shū)簽，還是的導(dǎo)航功能，只要是可以使用的地方，就可以使用。二級(jí)路由使用渲染組件屬性狀態(tài)請(qǐng)選擇一個(gè)主題。也許是最佳小實(shí)踐地址，覺(jué)得有幫助的話，請(qǐng)點(diǎn)擊一下，嘿嘿

這是一個(gè)小小的有關(guān)react的小例子，希望通過(guò)一個(gè)小例子，可以讓新手更好的了解到react、react-router4.0、redux的集中使用方法。

這是基于create-react-app來(lái)開(kāi)發(fā)的，一種簡(jiǎn)單的快速創(chuàng)建 React web 項(xiàng)目的方式是使用 Create React App 工具，相當(dāng)于一個(gè)react手腳架，此工具由 Facebook 開(kāi)發(fā)并維護(hù)。如果你還沒(méi)有使用過(guò) create-react-app，你需要先安裝。然后就可以通過(guò)它創(chuàng)建一個(gè)新項(xiàng)目。

React Router4.0 號(hào)稱一次學(xué)習(xí)，隨處路由。通過(guò)聲明式編程模型定義組件，是 React 最強(qiáng)大的核心功能。 React Router 可以為您的應(yīng)用已聲明式的方式定義導(dǎo)航組件最強(qiáng)大的核心功能。 無(wú)論是 Web App 的瀏覽器書(shū)簽 URLs，還是 React Native 的導(dǎo)航功能， 只要是可以使用 React 的地方，就可以使用 React Router。

Redux 是一個(gè)用來(lái)管理JavaScript應(yīng)用中 data-state(數(shù)據(jù)狀態(tài))和UI-state(UI狀態(tài))的工具，對(duì)于那些隨著時(shí)間推移狀態(tài)管理變得越來(lái)越復(fù)雜的單頁(yè)面應(yīng)用（SPAs）它是比較理想。阮老師redux的教程

首先 安裝好create-react-app，已經(jīng)安裝好了就不用重復(fù)安裝啦。

npm install -g create-react-app

mac不成功記得用 sudo

安裝完畢之后:

create-react-app react-plan 
cd react-plan/
npm start

安裝會(huì)有點(diǎn)慢，耐心等待一下

安裝完畢之后，在瀏覽器地址欄輸入localhost:3000，就可以瀏覽到剛才創(chuàng)建的 app 啦，這個(gè)手腳架很簡(jiǎn)單。如下圖

創(chuàng)建好應(yīng)用之后，我們就開(kāi)始寫我們的代碼了，在 src文件夾下面創(chuàng)建一個(gè)components文件夾，并且在這個(gè)文件夾下面創(chuàng)建一個(gè)home.js的文件,然后寫上我們首頁(yè)的內(nèi)容。

首頁(yè)介紹組件

src/components/home.js

import React, { Component } from "react"
class Home extends Component {
    constructor(props) {
        super(props);
    }
    render () {
        return (
            

                
首頁(yè)
                
這是一個(gè) react 學(xué)習(xí)的基本操作的小栗子
                
通過(guò)本次學(xué)習(xí)可以清楚的掌握， react-router、redux的基本使用方法
                

                

                

            
        )
    }
}
export default Home

寫好了 home.js 之后我們先引入我們的 app 看看

然后在src/App.js引入我們的 home.js，App.js就變成了

src/App.js

import React, { Component } from "react";
import logo from "./logo.svg";
// 引入 homejs
import Home from "./components/home.js"
import "./App.css";

class App extends Component {
  render() {
    return (
      

        

          
          
Welcome to React
        
        

          To get started, edit src/App.js and save to reload.
        
        // 使用 home 組件
        
      
    );
  }
}
export default App;

寫好之后我們就可以成功的寫完了home.js組件啦，是不是很簡(jiǎn)單，是不是很happy？

繼續(xù)在components文件夾創(chuàng)建一個(gè)plan.js(計(jì)劃表)、detail.js(計(jì)劃詳情)、pupop.js(添加計(jì)劃)、的js文件和comment.css(組件的樣式),我們這時(shí)候不涉路由的跳轉(zhuǎn)，只要把所有靜態(tài)的組件先一鼓作氣寫好來(lái)。

tips：這個(gè)例子小，為了方便，我把所有的組件樣式文件都寫到comment.css里面了，這時(shí)候?qū)懞玫牧?css 記得在App.js里面引入

src/App.js增加一句 import "./components/comment.css"

src/components/comment.css

.main {
  padding: 10px;
  flex-direction: row;
  display: flex;
}
.NavBox {
    width: 250px;
    margin-right: 20px;
}
.listNav{
    text-align: center;
}
.listNav li {
    line-height: 40px;
}
.listNav li a {
    text-decoration: none;
}
.listNav li.active{
    background: #00a6f7;
}
.listNav li.active a{
    color: #fff;
}
.side{
    width: 100%;
}
.slist{
    font-size: 14px;
}
.addBtn {
    font-size: 14px;
    font-weight: normal;
    background: skyblue;
    display: inline-block;
    padding: 10px;
    margin-left:  10px;
    color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
}
.slist li{
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: solid 1px cornflowerblue;
}

.slist li h3{
    font-weight: normal;
}

.slist li div span{
    text-decoration: underline;
    padding: 0 10px;
}
.popup{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.popup .pbox {
    width: 50%;
    height: 320px;
    background: #ffffff;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
}
.popup .pbox h4{
    font-size: 14px;
}
.popup .pbox input {
    margin: 10px 0 20px 0;
}
.popup .pbox input, .popup .pbox textarea{
    display: block;
    width: 100%;
    height: 32px;
    border: 1px solid skyblue;
    text-indent: 10px;
}

.popup .pbox textarea {
    resize: none;
    height: 100px;
    margin: 10px 0;
}

.popup .pbox .close {
    position: absolute;
    width: 30px;
    height: 30px;
    background: red;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    color: #ffffff;
    right: -15px;
    top: -15px;
    transition: 0.5s;
    cursor: pointer;
}
.popup .pbox .close:hover{
    transform: rotate(180deg);
}
.popup .pbox .pBtn {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
.popup .pbox .pBtn span{
    padding: 10px 20px;
    background: skyblue;
    margin: 0 10px;
    font-size: 14px;
    color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
}
.plant{
    line-height: 50px;
    position: relative;
}
.plant p{
    position: absolute;
    right: 0;
    top: 0;
    font-size: 14px;
    background: blue;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    color: #fff;
}
.planlist{
    width: 100%;
    padding: 10px;
    border-collapse: collapse;
}
.planlist td, th{
    border: 1px solid blue;
    line-height: 32px;
    font-size: 14px;

}
.plan-delect{
    color: red;
    cursor: pointer;
}
.plan-delect:hover{
    color: blue;
    text-decoration: underline;
}
.plan-title{
    width: 80%;
}

計(jì)劃組件

src/components/plan.js

import React, { Component } from "react"

class Plan extends Component {
    constructor(props) {
        super(props);
    }
    render () {
        return (
            

                

                    
計(jì)劃表
                    
添加計(jì)劃
                
                

                    

                        

                            
標(biāo)題
                            
操作
                        
                    
                    

                        

                            
計(jì)劃1
                            
刪除
                        
                    
                
            
        )
    }
}

export default Plan;

測(cè)試的時(shí)候直接把App.js剛才寫的import Home from "./components/home.js"改成 import Home from "./components/plan.js",就可以測(cè)試plan 組件啦。是不是很簡(jiǎn)單？下面的同理。

計(jì)劃詳情組件

src/components/detail.js

import React, { Component } from "react"

class Detail extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            

                
計(jì)劃詳情
                
id： 123
                
標(biāo)題： 測(cè)試標(biāo)題
                
內(nèi)容： 測(cè)試內(nèi)容
            

        )
    }
}
export default Detail

添加計(jì)劃組件

src/components/popup.js

import React, { Component } from "react"

class Pupop extends Component{
  constructor (props) {
    super(props)
    this.state = {
      id: "",
      title: "1",
      content: "1"
    }
  }
  render() {
    let self = this;
    return (
      

        

          X
          

            
計(jì)劃標(biāo)題
            
          
          

            
計(jì)劃內(nèi)容
            
          
          

            取消
            確認(rèn)
          
        
      
    )
  }
}
export default Pupop

呼~(yú)~~終于把所有組件都寫好了。下面我們就用路由把他們?nèi)即?lián)起來(lái)吧。實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)咯

首先記得安裝路由 npm install react-router-dom history --save

history這個(gè)模塊是用來(lái)做 js 的跳轉(zhuǎn)，后面我們會(huì)介紹到。

安裝完成路由模塊之后，在src/components/下面我們?cè)谠黾右粋€(gè)測(cè)試二級(jí)路由的文件testrouter.js,里面的內(nèi)容很簡(jiǎn)單，直接把官網(wǎng)的拿進(jìn)來(lái)。

src/components/testrouter.js

import React, { Component } from "react"
import {
  BrowserRouter as Router,
  Route,
  Link
} from "react-router-dom"

const Topic = ({ match }) => (
  

    
{match.params.topicId}
  
)

class TestRouter extends Component {
    constructor(props) {
        super(props);
        console.log(this.props)
    }
    render () {
        return (
            

            
二級(jí)路由
            

              

                
                  使用 React 渲染
                
              
              

                
                  組件
                
              
              

                
                  屬性 v. 狀態(tài)
                
              
            

            
             (
              
請(qǐng)選擇一個(gè)主題。
            )}/>
          
        )
    }
}
export default TestRouter

然后在App.js做一點(diǎn)改動(dòng)，引入所有需要的模塊，看注釋

src/App.js

import React, { Component } from "react"
import {
  BrowserRouter as Router,
  Route,
  Link
} from "react-router-dom"
import logo from "./logo.svg"
// 引入4個(gè)模塊組件
import Plan from "./components/plan.js"
import Home from "./components/home.js"
import Popup from "./components/popup.js"
import TestRouter from "./components/testrouter.js"
import Detail from "./components/detail.js"
// 引入樣式文件
import "./App.css"
import "./components/comment.css"
// 引入路由
import createHistory from "history/createBrowserHistory"
const history = createHistory()
// 開(kāi)始代碼
class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      

          

            
            
Welcome to React Plan
          
          

            // 路由配置
            
               

                  // 編寫導(dǎo)航
                  

                    
首頁(yè)
                    
計(jì)劃表
                    
二級(jí)路由
                  
                  // 路由匹配
                  
 
                    
                    
                    
                    
                  
              
            
          
          
      
    );
  }
}

export default App

不是結(jié)束的結(jié)束：好啦~~~路由也配置好，打開(kāi)瀏覽器，在代碼正確的情況下，可以愉快的實(shí)現(xiàn)跳轉(zhuǎn)咯。之后我們?cè)侔?redux 加入進(jìn)來(lái)，這樣子就可以，每個(gè)組件就可以操作全局的數(shù)據(jù)了。稍后奉上。react、react-router、redux 也許是最佳小實(shí)踐2

github地址，覺(jué)得有幫助的話，請(qǐng)點(diǎn)擊一下 start，嘿嘿