React has close to 70,000 stars on Github and is currently the most popular front-end framework. React+Redux React+Redux

Last time, when we talked about using Redux-Saga to manage asynchronous Redux applications, the application still had only one home page. Now build a new submission page and use the React-Router for route management.

React Practice Project (1) React Practice Project (2) React Practice Project (3) React Practice Project (4)

– First let’s build the submission page

Create a 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: 'successful ', message:' contributed successfully ', duration: 1500}); this.setState({form: { title: '', content: '', original: true, originalUrl: null, english: false, type: 'article', }}); } else if (nextProps. Entries.get ('error')) {notification. error({title: 'error', 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(<div className=" submitentry-container "> <div className="head"> <h2> </p> </div> <div className="entry-form"> < form model={this.state.form} labelWidth="80" OnSubmit = {this. HandleSubmit} > < Form. The Item label = "share url" > < Input value = {this. State. Form. OriginalUrl} onChange={this.handleChange.bind(this, 'originalUrl')}/> </ form.item > < form.item label=" title "> <Input value={this.state.form.title} onChange={this.handleChange.bind(this, 'title')}/> </ form.item > < form.item label=" description "> <Input value={this.state.form.content} onChange={this.handleChange.bind(this, 'content')}/> </Form.Item> <Form.Item > <Switch value={this.state.form.original} onChange={this.handleChange.bind(this, </Switch> </ form.item > < form.item > <Switch value={this.state.form.english} onChange={this.handleChange.bind(this, </Switch> </ form. Item> < form. Item> <Button type="primary" OnClick ={this.handlesubmit} loading={this.state.loading}> Post </Button> </ form. Item> </Form> </div> </div>)}}Copy the code

The related Redux section has been covered. I won’t repeat the introduction, but you can see the sample code if you are interested

• With the page created, start using React-Router to manage routes

• The first is to add dependencies

The editor package. Json

// react-router-dom contains react-router "react-router-dom": "^4.1.1",Copy the code

• Edit 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> <div className="App"> <Route component={Header}/> <Route exact path="/" component={Index}/> <Route exact path="/submit-entry" component={SubmitEntry}/> </div> </Router> ) } }Copy the code

Router:

There are three routers, and we used the common browserHistory

BrowserHistory H5 history hashHistory The history memoryHistory node environment of older browsers, stored in memory

Route :

Each Route tag corresponds to a UI page, and its job is to render the UI when the page’s access address matches the path on the Route.

has no path, which means that Header components are rendered on every page.

exact :

Only matches ‘/’. Will not match ‘/submit-entry’

will match all paths starting with ‘/’

history:

Commonly used method

Push (path, [state]) adds a new entry to the history stack. Often used to jump to a page, for example: this.props.history.push(‘/’); Jump to home page

Replace (PATH, [state]) replaces the current entry in the history stack. The difference between a push and a replace(path, [state]) is that it cannot return to the page before the jump through the history stack

GoBack () is equivalent to the browser’s back key

match:

The match object contains information about how a Route matches a URL and has the following properties:

Params: object path parameter that retrieves key-value pairs by parsing the dynamic part of the URL

IsExact: bool Indicates true. All urls must be matched

Path: string Matching path pattern, used to create nested

Url: string Matching part of the URL, used for nesting

There are often used to obtain the parameters in the path a routing < the Route path = “/” id “component = {Child} / > in the Child can access to this id parameter. The props. Match. Params. Id

• conclusion

Now that we have a human-friendly application, most of the rest is business code. To test the effect, of course, deploy to the server. The next article will introduce how to deploy React using nginx docker images. Full project code address: github.com/DigAg/digag…