React 實(shí)踐項(xiàng)目（四）

AaronYuan 發(fā)布于2019-08-20 18:15 / 1975人閱讀

摘要：在上已經(jīng)有接近的數(shù)了，是目前最熱門的前端框架。為了檢驗(yàn)效果當(dāng)然是選擇部署到服務(wù)器。下篇文章將會(huì)介紹利用的鏡像部署應(yīng)用。完整項(xiàng)目代碼地址

React在Github上已經(jīng)有接近70000的 star 數(shù)了，是目前最熱門的前端框架。而我學(xué)習(xí)React也有一段時(shí)間了，現(xiàn)在就開始用 React+Redux 進(jìn)行實(shí)戰(zhàn)！

上回說到使用Redux-saga 管理 Redux 應(yīng)用異步操作,應(yīng)用還是只有一個(gè)首頁(yè).現(xiàn)在開始構(gòu)建一個(gè)新的投稿頁(yè)面并使用 React-Router 進(jìn)行路由管理.

React 實(shí)踐項(xiàng)目（一）
React 實(shí)踐項(xiàng)目（二）
React 實(shí)踐項(xiàng)目（三）
React 實(shí)踐項(xiàng)目（四）

- 首先我們來構(gòu)建投稿頁(yè)面

創(chuàng)建 src/containers/SubmitEntry.js

/**
 * Created by Yuicon on 2017/7/13.
 * https://github.com/Yuicon
 */
import React, {Component} from "react";
import {Button, Form, Input, Switch, Notification} from "element-react";
import {connect} from "react-redux";
import {createEntryAction} from "../../redux/action/entries";
import "./SubmitEntry.css";

@connect(
  (state) => {
    return ({
      entries: state.entries,
    });
  },
  {createEntryAction: createEntryAction}
)
export default class SubmitEntry extends Component {

  constructor(props) {
    super(props);

    this.state = {
      form: {
        title: "",
        content: "",
        original: true,
        originalUrl: null,
        english: false,
        type: "article",
      },
    loading: false,
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.entries.get("saveSuccess")) {
      Notification.success({
        title: "成功",
        message: "投稿成功",
        duration: 1500
      });
      this.setState({form: {
        title: "",
        content: "",
        original: true,
        originalUrl: null,
        english: false,
        type: "article",
      }});
    } else if (nextProps.entries.get("error")) {
      Notification.error({
        title: "錯(cuò)誤",
        message: nextProps.entries.get("error"),
        type: "success",
        duration: 1500
      });
    }
    this.setState({loading: false});
  }

  handleSubmit = () => {
    this.props.createEntryAction(this.state.form);
    this.setState({loading: true});
  };

  handleChange = (key, value) => {
    this.setState({
      user: Object.assign(this.state.form, {[key]: value})
    });
  };

  render(){
    return(
      
        
          推薦文章到掘金
          感謝分享，文章的審核時(shí)間約1-2個(gè)工作日
        
        
          
            
              
            
            
              
            
            
              
            
            
              
              
            
            
              
              
            
            
              
            
          
        
      
    )
  }
}

相關(guān)的Redux部分已經(jīng)講過.就不重復(fù)介紹了,感興趣的可以查看示例代碼

頁(yè)面創(chuàng)建好了,開始使用 React-Router 管理路由

首先是添加依賴

編輯 package.json

     // react-router-dom 包含 react-router
    "react-router-dom": "^4.1.1",

編輯 App.js

/**
 * Created by Yuicon on 2017/6/25.
 */
import React, { Component } from "react";
import {BrowserRouter as Router,Route} from "react-router-dom"
import "./App.css";
import Index from "../Index/Index";
import Header from "../Header/Header";
import SubmitEntry from "../SubmitEntry/SubmitEntry";

export default class App extends Component {

  render(){
    return(
    
      
        
        
        
      
    
    )
  }

}

Router:

Router 一共有三種，我們采用的是常用的 browserHistory

browserHistory h5的history
hashHistory 老版本瀏覽器的history
memoryHistory node環(huán)境下的history，存儲(chǔ)在memory中

Route :

每個(gè) Route 標(biāo)簽都對(duì)應(yīng)一個(gè)UI頁(yè)面,它的職責(zé)就是當(dāng)頁(yè)面的訪問地址與 Route 上的 path 匹配時(shí)，就渲染出對(duì)應(yīng)的 UI 界面。
而是沒有 path 的,這意味著在每個(gè)頁(yè)面都會(huì)渲染出 Header 組件.

exact :

Route 上的 exact props 表示采用嚴(yán)格匹配,頁(yè)面的訪問地址與 Route 上的 path 必須一樣
只會(huì)匹配 "/" , 不會(huì)匹配 "/submit-entry"
會(huì)匹配所有 "/" 開頭的路徑

history:

常用方法

push(path, [state]) 在歷史堆棧信息里加入一個(gè)新條目。
常用于頁(yè)面跳轉(zhuǎn)，如： this.props.history.push("/"); 跳轉(zhuǎn)至首頁(yè)

replace(path, [state]) 在歷史堆棧信息里替換掉當(dāng)前的條目
與 push 的區(qū)別是無法通過歷史堆棧返回跳轉(zhuǎn)前的頁(yè)面

goBack() 等同于瀏覽器的后退鍵

match:

match 對(duì)象包含了 Route 如何與 URL 匹配的信息，具有以下屬性：

params: object 路徑參數(shù)，通過解析 URL 中的動(dòng)態(tài)部分獲得鍵值對(duì)

isExact: bool 為 true 時(shí)，整個(gè) URL 都需要匹配

path: string 用來匹配的路徑模式，用于創(chuàng)建嵌套的

url: string URL 匹配的部分，用于嵌套的

常用于獲取路徑中的參數(shù)
有這樣一個(gè)路由
在 Child 中可以這樣獲取到 id 參數(shù) this.props.match.params.id

結(jié)語(yǔ)

現(xiàn)在我們得到了一個(gè)可以見人的應(yīng)用了，剩下的大部分是一些業(yè)務(wù)代碼。為了檢驗(yàn)效果當(dāng)然是選擇部署到服務(wù)器。下篇文章將會(huì)介紹利用 nginx 的 docker 鏡像部署 React 應(yīng)用。

完整項(xiàng)目代碼地址：https://github.com/DigAg/diga...

GPU云服務(wù)器云服務(wù)器怎么部署react項(xiàng)目 php項(xiàng)目實(shí)踐 python實(shí)踐項(xiàng)目 python項(xiàng)目實(shí)踐

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84249.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

AaronYuan

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

10分鐘了解Jmeter性能測(cè)試工具，懂事的已經(jīng)點(diǎn)進(jìn)來看了

閱讀 1367·2021-11-15 11:45
C語(yǔ)言實(shí)現(xiàn)通訊錄

閱讀 3134·2021-09-27 13:36
前端每日實(shí)戰(zhàn)：139# 視頻演示如何用 CSS 和 D3 創(chuàng)作光斑粒子交相輝映的動(dòng)畫

閱讀 2878·2019-08-30 15:54
轉(zhuǎn)載：瀏覽器常見兼容問題以及解決辦法

閱讀 995·2019-08-29 12:38
剖析簡(jiǎn)易計(jì)算器帶你入門微信小程序開發(fā)

閱讀 2915·2019-08-29 11:22
js 調(diào)用棧機(jī)制與ES6尾調(diào)用優(yōu)化介紹

閱讀 2996·2019-08-26 13:52
vue權(quán)限問題

閱讀 2042·2019-08-26 13:30
Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)

閱讀 595·2019-08-26 10:37

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

React 實(shí)踐項(xiàng)目（四）

推薦文章到掘金

相關(guān)文章

***React* 實(shí)踐項(xiàng)目（五）Docker Nginx 部署 *React***

***React* 實(shí)踐項(xiàng)目（五）Docker Nginx 部署 *React***

***React* 實(shí)踐項(xiàng)目（五）Docker Nginx 部署 *React***

一些基于React、Vue、Node.js、MongoDB技術(shù)棧的實(shí)踐項(xiàng)目

**[前端工坊]第二屆京東技術(shù)節(jié)-前端技術(shù)實(shí)踐專場(chǎng)**

發(fā)表評(píng)論

0條評(píng)論

AaronYuan

男|高級(jí)講師

TA的文章

10分鐘了解Jmeter性能測(cè)試工具，懂事的已經(jīng)點(diǎn)進(jìn)來看了

C語(yǔ)言實(shí)現(xiàn)通訊錄

前端每日實(shí)戰(zhàn)：139# 視頻演示如何用 CSS 和 D3 創(chuàng)作光斑粒子交相輝映的動(dòng)畫

轉(zhuǎn)載：瀏覽器常見兼容問題以及解決辦法

剖析簡(jiǎn)易計(jì)算器帶你入門微信小程序開發(fā)

js 調(diào)用棧機(jī)制與ES6尾調(diào)用優(yōu)化介紹

vue權(quán)限問題

Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

React 實(shí)踐項(xiàng)目 （四）

推薦文章到掘金

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

React 實(shí)踐項(xiàng)目（四）