React 实践项目（四）

AaronYuan 发布于2019-08-20 18:15 / 1951人阅读

摘要：在上已经有接近的数了，是目前最热门的前端框架。为了检验效果当然是选择部署到服务器。下篇文章将会介绍利用的镜像部署应用。完整项目代码地址

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项目实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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