Project address: github.com/Nealyang/Re…

React, react-Router4.x, React-Redux, WebPack3. x, Redux-saga, CSS-Module, ES6, Babel…

I saw this video on MOOCs, but I really can’t afford it. Lucky to see the source code, but I see the code… I don’t agree with the Use of the React stack. Then he wrote a demo.

Project screenshots

  • loading


  • Home page


  • Details page

  • City selection

Project Running Display (GIF)

The traffic party enters carefully

The project is small, but involves three pages, mainly for learning new things. Redux-saga used in the project was also learned the day before yesterday. The structure of the project is also under various discussions recently. Still beg big god to give directions more ~

Project Technical Summary

  • React Technology stack project structure explore
  • At the beginning of story – saga experience
  • Configuration instructions for WebPack in the project

Project Brief Description

  • In the development of React-Redux, my personal understanding is that Redux embodies the programming concept of hierarchical code and separation of responsibilities, with logic and view strictly separated. And a network of this set of code, logic is written to view component layer, component needs to care about how to obtain data, how to deal with data, such component layer is not easy to reuse, the use of Redux is incomplete. Even in this case, instead of Redux, you define a global state variable that all components manipulate directly.

  • There are still many areas to be improved, including the use of Redux-Saga, the structure of the project, the code optimization of Webpack 3.x with React, the Universal rendering of React and even the coding of back-end nodes. Welcome all the gods to come to advise ~

Project implementation

  • The react hot update
  • CSS – module is used
  • React-redux asynchronous processing
  • React-router Transmits and obtains parameters from the browser
  • Story – saga
  • Pull up to load more
  • Global monitoring Loading

  • .

  • [] Universal render can refer to my other project Webpack1.x

Installation steps

# clone this demo 
git clone.# install dependencies
npm i (or yarn)

# serve with hot reload at localhost:8000
npm startCopy the code

more

We will continue to improve the technology in the future. If we have time, we will write a full stack demo, focusing on the use of back-end Node and Mongo. The react stack is still used to complete the front end.

(^_^) / ~ ~

Like friends welcome to pay attention to wechat public number: front end of the whole Station Road