react、react-router、redux 也許是最佳小實踐1

時間  2019-11-07
標籤 react router redux 也許 最佳 實踐 欄目 React 简体版
原文   原文鏈接

小前言

這是一個小小的有關react的小例子，但願經過一個小例子，可讓新手更好的瞭解到react、react-router4.0、redux的集中使用方法。css

  1. 這是基於create-react-app來開發的，一種簡單的快速建立 React web 項目的方式是使用 Create React App 工具，至關於一個react手腳架，此工具由 Facebook 開發並維護。若是你尚未使用過 create-react-app，你須要先安裝。而後就能夠經過它建立一個新項目。html

  2. React Router4.0 號稱一次學習，隨處路由。經過聲明式編程模型定義組件，是 React 最強大的核心功能。 React Router 能夠爲您的應用已聲明式的方式定義導航組件最強大的核心功能。 不管是 Web App 的瀏覽器書籤 URLs，仍是 React Native 的導航功能， 只要是可使用 React 的地方，就可使用 React Router。react

  3. Redux 是一個用來管理JavaScript應用中 data-state(數據狀態)和UI-state(UI狀態)的工具，對於那些隨着時間推移狀態管理變得愈來愈複雜的單頁面應用（SPAs）它是比較理想。阮老師redux的教程git

下面咱們看看完成後的小 demo

react-plan

開始用create-react-app建立咱們的 app

首先 安裝好create-react-app，已經安裝好了就不用重複安裝啦。github

npm install -g create-react-appweb

mac不成功記得用 sudonpm

安裝完畢以後:編程

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

安裝會有點慢，耐心等待一下redux

安裝完畢以後，在瀏覽器地址欄輸入localhost:3000，就能夠瀏覽到剛纔建立的 app 啦，這個手腳架很簡單。以下圖segmentfault

react-plan

代碼開始

建立好應用以後，咱們就開始寫咱們的代碼了，在 src文件夾下面建立一個components文件夾，而且在這個文件夾下面建立一個home.js的文件,而後寫上咱們首頁的內容。

react-plan

首頁介紹組件

src/components/home.js

import React, { Component } from 'react'
class Home extends Component {
    constructor(props) {
        super(props);
    }
    render () {
        return (
            <div>
                <h2>首頁</h2>
                <p>這是一個 react 學習的基本操做的小栗子</p>
                <p>經過本次學習能夠清楚的掌握， react-router、redux的基本使用方法</p>
                <br/>
                <br/>
                <br/>
            </div>
        )
    }
}
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 (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        // 使用 home 組件
        <Home />
      </div>
    );
  }
}
export default App;

寫好以後咱們就能夠成功的寫完了home.js組件啦，是否是很簡單，是否是很happy？

react-plan

一氣呵成，完成全部組件

繼續在components文件夾建立一個plan.js(計劃表)、detail.js(計劃詳情)、pupop.js(添加計劃)、的js文件和comment.css(組件的樣式),咱們這時候不涉路由的跳轉，只要把全部靜態的組件先一氣呵成寫好來。

tips：這個例子小，爲了方便，我把全部的組件樣式文件都寫到comment.css裏面了，這時候寫好的了 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%;
}

計劃組件

src/components/plan.js

import React, { Component } from 'react'

class Plan extends Component {
    constructor(props) {
        super(props);
    }
    render () {
        return (
            <div>
                <div className="plant">
                    <h3>計劃表</h3>
                    <p>添加計劃</p>
                </div>
                <table className="planlist">
                    <thead>
                        <tr>
                            <th>標題</th>
                            <th>操做</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td className="plan-title">計劃1</td>
                            <td className="plan-delect">刪除</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        )
    }
}

export default Plan;

測試的時候直接把App.js剛纔寫的import Home from './components/home.js'改爲 import Home from './components/plan.js',就能夠測試plan 組件啦。是否是很簡單？下面的同理。

計劃詳情組件

src/components/detail.js

import React, { Component } from 'react'

class Detail extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div style={{padding: '20px'}}>
                <h3>計劃詳情</h3>
                <p>id： 123</p>
                <p>標題： 測試標題</p>
                <p>內容： 測試內容</p>
            </div>

        )
    }
}
export default Detail

添加計劃組件

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 (
      <section className="popup" style={{display: 'block'}}>
        <div className="pbox">
          <span className="close">X</span>
          <div>
            <h4>計劃標題</h4>
            <input value={this.state.title} placeholder="請輸入計劃標題"/>
          </div>
          <div>
            <h4>計劃內容</h4>
            <textarea value={this.state.content} placeholder="請輸入計劃內容" rows="3"></textarea>
          </div>
          <div className="pBtn">
            <span>取消</span>
            <span>確認</span>
          </div>
        </div>
      </section>
    )
  }
}
export default Pupop

呼~~~終於把全部組件都寫好了。下面咱們就用路由把他們全都串聯起來吧。實現點擊跳轉咯

加入路由

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

history這個模塊是用來作 js 的跳轉，後面咱們會介紹到。

安裝完成路由模塊以後，在src/components/下面咱們在增長一個測試二級路由的文件testrouter.js,裏面的內容很簡單，直接把官網的拿進來。

src/components/testrouter.js

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

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

class TestRouter extends Component {
    constructor(props) {
        super(props);
        console.log(this.props)
    }
    render () {
        return (
            <div>
            <h2>二級路由</h2>
            <ul>
              <li>
                <Link to={`${this.props.match.url}/rendering`}>
                  使用 React 渲染
                </Link>
              </li>
              <li>
                <Link to={`${this.props.match.url}/components`}>
                  組件
                </Link>
              </li>
              <li>
                <Link to={`${this.props.match.url}/props-v-state`}>
                  屬性 v. 狀態
                </Link>
              </li>
            </ul>

            <Route path={`${this.props.match.url}/:topicId`} component={Topic}/>
            <Route exact path={this.props.match.url} render={() => (
              <h3>請選擇一個主題。</h3>
            )}/>
          </div>
        )
    }
}
export default TestRouter

而後在App.js作一點改動，引入全部須要的模塊，看註釋

src/App.js

import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import logo from './logo.svg'
// 引入4個模塊組件
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()
// 開始代碼
class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2 className='App-title'>Welcome to React Plan</h2>
          </div>
          <div>
            // 路由配置
            <Router history = {history}>
               <div className="contentBox">
                  // 編寫導航
                  <ul className="nav">
                    <li><Link to="/">首頁</Link></li>
                    <li><Link to="/plan">計劃表</Link></li>
                    <li><Link to="/test">二級路由</Link></li>
                  </ul>
                  // 路由匹配
                  <div className="content"> 
                    <Route exact path="/" component={Home}/>
                    <Route path="/plan" component={Plan}/>
                    <Route path="/test" component={TestRouter}/>
                    <Route path="/detail/:id" component={Detail}/>
                  </div>
              </div>
            </Router>
          </div>
          <Popup/>
      </div>
    );
  }
}

export default App

不是結束的結束：好啦~~~路由也配置好，打開瀏覽器，在代碼正確的狀況下，能夠愉快的實現跳轉咯。以後咱們再把 redux 加入進來，這樣子就能夠，每一個組件就能夠操做全局的數據了。稍後奉上。react、react-router、redux 也許是最佳小實踐2

github地址，以爲有幫助的話，請點擊一下 start，嘿嘿

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程