React was used to write the homepage, article page and login page of Jane Book, which was also a relatively complete React project and gained a lot. Know a project normal development process, directory organization, some common problems to deal with the plan, in this record.

Set up the project

  • Create a project using create-react-app
  • Install dependencies using YARN

The directory organization

  • project
    • src
      • Store (global store)
        • Index.js (Store exit)
        • Reducer.js (Combine reducer from other components)
      • Common (Common Components)
        • OneCommonComponent (an example of a common component)
          • Index.js (Component code exit)
          • Style.js (Styled CSS in JS style file written using Styled – Components, which privates the component’s CSS)
          • store
            • Index.js (Store export file)
            • Reducer. Js (Reducer of components)
            • Actiontypes.js (Action type is defined here as a constant)
            • Actionactionine.js (the function that creates the action, and the asynchronous request function wrapped as the action are defined here)
          • Components (Private components of components)
            • OnePrivateCom1.js
            • OnePriveteCom2.js
      • Pages (non-public component definition)
        • Home (example: a Home component)
          • Index.js (Component code exit)
          • Style.js (Styled CSS in JS style file written using Styled – Components, which privates the component’s CSS)
          • store
            • Index.js (Store export file)
            • Reducer. Js (Reducer of components)
            • Actiontypes.js (Action type is defined here as a constant)
            • Actionactionine.js (the function that creates the action, and the asynchronous request function wrapped as the action are defined here)
          • Components (Private components of components)
            • OnePrivateCom1.js
            • OnePriveteCom2.js

Data management

  • Use redux
  • Use React-redux to simplify redux operations
  • Use the Redux-Thunk middleware to support asynchronous action
  • Using immutable. Js
    • Make conventions for immutable naming, such as $list.get()
  • Split store, assembled via combineReducers
    • Use combineReducers provided by Redux-Immutable to make the reducer into immutabe
  • Use redux-immutable. Use immutable in redux
  • Use the redux-devTools debugging tool

CSS Solution

  • Styled – Components are used to manage the CSS
  • Vscode extends vscode-Styled – Components to provide syntax highlighting and auto-completion

routing

  • Use react-router@4 to manage routes

How to achieve animation effect

  • Manually switching class
  • By defining keyFrames
  • Using CSS – the transition – group

Data type checking

  • Use the propTypes provided by React to check data types

Performance tuning

  • Override the shouldComponentUpdate function to manually determine if rerender is needed
  • Components inherit pureComponent as much as possible (used with immutable. Js)