React 實踐項目（四）

AaronYuan 發布于2019-08-20 18:15 / 1969人閱讀

摘要：在上已經有接近的數了，是目前最熱門的前端框架。為了檢驗效果當然是選擇部署到服務器。下篇文章將會介紹利用的鏡像部署應用。完整項目代碼地址

React在Github上已經有接近70000的 star 數了，是目前最熱門的前端框架。而我學習React也有一段時間了，現在就開始用 React+Redux 進行實戰！

上回說到使用Redux-saga 管理 Redux 應用異步操作,應用還是只有一個首頁.現在開始構建一個新的投稿頁面并使用 React-Router 進行路由管理.

React 實踐項目（一）
React 實踐項目（二）
React 實踐項目（三）
React 實踐項目（四）

- 首先我們來構建投稿頁面

創建 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: "錯誤",
        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(
      
        
          推薦文章到掘金
          感謝分享，文章的審核時間約1-2個工作日
        
        
          
            
              
            
            
              
            
            
              
            
            
              
              
            
            
              
              
            
            
              
            
          
        
      
    )
  }
}

相關的Redux部分已經講過.就不重復介紹了,感興趣的可以查看示例代碼

頁面創建好了,開始使用 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環境下的history，存儲在memory中

Route :

每個 Route 標簽都對應一個UI頁面,它的職責就是當頁面的訪問地址與 Route 上的 path 匹配時，就渲染出對應的 UI 界面。
而是沒有 path 的,這意味著在每個頁面都會渲染出 Header 組件.

exact :

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

history:

常用方法

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

replace(path, [state]) 在歷史堆棧信息里替換掉當前的條目
與 push 的區別是無法通過歷史堆棧返回跳轉前的頁面

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

match:

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

params: object 路徑參數，通過解析 URL 中的動態部分獲得鍵值對

isExact: bool 為 true 時，整個 URL 都需要匹配

path: string 用來匹配的路徑模式，用于創建嵌套的

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

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

結語

現在我們得到了一個可以見人的應用了，剩下的大部分是一些業務代碼。為了檢驗效果當然是選擇部署到服務器。下篇文章將會介紹利用 nginx 的 docker 鏡像部署 React 應用。

完整項目代碼地址：https://github.com/DigAg/diga...

GPU云服務器云服務器怎么部署react項目 php項目實踐 python實踐項目 python項目實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84249.html

React 實踐項目（五）Docker Nginx 部署 React

摘要：在上已經有接近的數了，是目前最熱門的前端框架。將整個應用打包發布，自動試用進行壓縮與優化。毫無疑問，這些重擔都將壓在企業開發人員身上團隊之間如何高效協調，快速交付產品，快速部署應用，以及滿足企業業務需求，是開發人員亟需解決的問題。 React在Github上已經有接近70000的 star 數了，是目前最熱門的前端框架。而我學習React也有一段時間了，現在就開始用 React+Red...

EscapedDog 2019-07-25 13:59 評論0 收藏0
React 實踐項目（五）Docker Nginx 部署 React

摘要：在上已經有接近的數了，是目前最熱門的前端框架。將整個應用打包發布，自動試用進行壓縮與優化。毫無疑問，這些重擔都將壓在企業開發人員身上團隊之間如何高效協調，快速交付產品，快速部署應用，以及滿足企業業務需求，是開發人員亟需解決的問題。 React在Github上已經有接近70000的 star 數了，是目前最熱門的前端框架。而我學習React也有一段時間了，現在就開始用 React+Red...

jsyzchen 2019-08-20 18:25 評論0 收藏0
React 實踐項目（五）Docker Nginx 部署 React

摘要：在上已經有接近的數了，是目前最熱門的前端框架。將整個應用打包發布，自動試用進行壓縮與優化。毫無疑問，這些重擔都將壓在企業開發人員身上團隊之間如何高效協調，快速交付產品，快速部署應用，以及滿足企業業務需求，是開發人員亟需解決的問題。 React在Github上已經有接近70000的 star 數了，是目前最熱門的前端框架。而我學習React也有一段時間了，現在就開始用 React+Red...

ephererid 2019-06-28 15:55 評論0 收藏0
一些基于React、Vue、Node.js、MongoDB技術棧的實踐項目

摘要：利用中間件實現異步請求，實現兩個用戶角色實時通信。目前還未深入了解的一些概念。往后會寫更多的前后臺聯通的項目。刪除分組會連同組內的所有圖片一起刪除。算是對自己上次用寫后臺的一個強化，項目文章在這里。后來一直沒動，前些日子才把后續的完善。歡迎訪問我的個人網站：http://www.neroht.com/? 剛學vue和react時，利用業余時間寫的關于這兩個框架的訓練，都相對簡單，有的...

tangr206 2019-06-26 17:34 評論0 收藏0
[前端工坊]第二屆京東技術節-前端技術實踐專場

摘要：本次舉辦的第二屆京東技術節，由高峰論壇專題演講兩個部分組成，內容涵蓋人工智能與業務應用京東云的開放之路大數據技術與應用移動開發實踐信息安全金融科技大促備戰解密電商之架構升級與優化前端技術實踐研發工具與實踐研發團隊建設與工程文化共個專題。本文首發于微信公眾號：前端工坊轉載請聯系前端工坊編輯授權; 歡迎關注有趣好玩的前端技術公眾號：前端工坊項目簡介 showImg(https://...

twohappy 2019-08-22 11:18 評論0 收藏0