React, React – Router 4, Mobx build my mobile Web

These days FINALLY in my spare time to PC website geek tutorial geek tutorial made a simple mobile Web, do a relatively simple, look at the effect picture:

, temporarily only see the function of the article, the rest slowly add again. The main purpose of this tutorial is to learn how to update the React stack.

1. Start

Clone my github code:

git clone https://github.com/cllgeek/geekjc-antd-mobile.gitCopy the code

then

cd geekjc-antd-mobile
npm install
npm startCopy the code

Once you’re ready to boot up, open your browser, type http://localhost:3000, and switch to mobile browsing mode.

The directory structure

Set up the mobile version of my website development environment

2. Route (react-route 4)

About routing, in this project, adopted

import {BrowserRouter as Router,Route,Link,withRouter} from 'react-router-dom'@observer class ArticleDetail extends Component{componentWillMount(){
        const { props } = this
        const id = props.match.params.id
        const type = props.match.params.type
        newState.initData(`/fetch/post/${id}`,type)}render() {return(
          <div>
            <NavBar
              mode="light"
              icon={<Icon type="left" />}
              onLeftClick={() => this.props.history.push('/')}
              rightContent={[
                <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                <Icon key="1" type="ellipsis" />,
              ]}
            >{newState.type&&newState.type}</NavBar>
            <div className="articleDetailContainer">
              <h2>{newState.data&&newState.data.post.title}</h2>
              <div className="articleDetailInfo">
                <span>{newState.data&&newState.data.post.author}</span>
                <div className="right">
                   <span className="time">{moment(newState.data&&newState.data.post.meta.updateAt).format('MM/DD/YYYY')}</span>
                   <span>{newState.data&&newState.data.post.pv}</span>
                </div>
              </div>
              <div className="articleDetailContent" dangerouslySetInnerHTML={{ __html:newState.data&&newState.data.post.content }} />
            </div>
          </div>
        )
    }
}

export default withRouter(ArticleDetail)Copy the code

The React-Router provides a withRouter component that can wrap any custom component, passing in the history,location, and match objects of the React-Router. There is no need to pass the React-Router attributes one by one. When the router attributes need to be used, withRouter the component layer to obtain the required routing information. This code uses a layer of the withRouter high-order component and then uses the history property to jump routes,this.props.history.push(). Router 4 is a very powerful device. For more information about react-Router 4, see Learning React-Router 4.x

3. State Management (MOBx)

Here is why I abandoned Redux. Writing Redux is tedious and I don’t like to write actions and reducer. In work, it was used for redux at first, but gradually abandoned and returned to the original this.setState. However, using this.setState also has many disadvantages, because React state is asynchronous. In this case, you have to look for a replacement for Redux, find that mobx is universally accepted on the Internet, learn slowly, and find that MOBx is really easy to use and simpler than Redux, look at the code in the project,

import React,{ Component } from 'react'
import { NavBar, Icon } from 'antd-mobile'
import {BrowserRouter as Router,Route,Link,withRouter} from 'react-router-dom'

import {observable, action, useStrict, runInAction} from 'mobx'
import { observer } from 'mobx-react'
import moment from 'moment'
import marked from 'marked'

import './ArticleDetail.less'

import request from '.. /.. /utils/request'

useStrict(true)

class ArticleDetailState {
  @observable data = null
  @observable type = null
  @action initData = (url,type) => {
      request.get(url)
      .then((response)=>{
          runInAction("Get article content",()=>{
          this.data = response.data
          this.type = type
          })
    })
  }
}

const newState = new ArticleDetailState()

@observer
class ArticleDetail extends Component{
    componentWillMount(){
        const { props } = this
        const id = props.match.params.id
        const type = props.match.params.type
        newState.initData(`/fetch/post/${id}`,type)}render() {return(
          <div>
            <NavBar
              mode="light"
              icon={<Icon type="left" />}
              onLeftClick={() => this.props.history.push('/')}
              rightContent={[
                <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                <Icon key="1" type="ellipsis" />,
              ]}
            >{newState.type&&newState.type}</NavBar>
            <div className="articleDetailContainer">
              <h2>{newState.data&&newState.data.post.title}</h2>
              <div className="articleDetailInfo">
                <span>{newState.data&&newState.data.post.author}</span>
                <div className="right">
                   <span className="time">{moment(newState.data&&newState.data.post.meta.updateAt).format('MM/DD/YYYY')}</span>
                   <span>{newState.data&&newState.data.post.pv}</span>
                </div>
              </div>
              <div className="articleDetailContent" dangerouslySetInnerHTML={{ __html:newState.data&&newState.data.post.content }} />
            </div>
          </div>
        )
    }
}

export default withRouter(ArticleDetail)Copy the code

Mobx was pretty good anyway. For more information on Mobx, see mobx.js or use mobx instead of Redux

4. The last

Never stop learning, programming language is also knowledge tools, the future should pay more attention to the deepening of the foundation and programming.