The way ahead is so long without ending, yet high and low I’ll search with my will unbending.

background

Completely for practical purposes, in a small business, the latest React project luked over. Although it is a small business, two people also developed nearly a week, seven working days.

contribution

Hence this article and the out-of-the-box scaffolding project, where the Options option can be removed by itself. The good news is that with the scaffolding project, I will follow up the maintenance and make sure that react and the libraries around its ecology are the same in the first place. React v16.x React-router v4.x react-router v4.x

Out of the box: ICepy /fighting

  • The react v16.0 +
  • react-router 4.x
  • webpack 3.x
  • redux

Options

  • ant design
  • less
  • iconfont
  • mock server
  • axios
  • Nailing H5 SDK

Fighting uses the MIT protocol. Welcome to join us.

To the chase

Before starting to prepare to write business with V16.x, or under a hard work, spend a day to roughly scan the fit with other things, then dare to try, otherwise it will really pit yourself.

Since PureComponent has been used in V15.x, it is still used in V16.X. Generally speaking, V16.X is more of an improvement in the “kernel”. The writing process is well consistent with the knowledge accumulated in the previous version, but there are some different things. Such as error catching [a method in the lifecycle], returning an array directly, etc. The thing that really took some time with React was the form processing, and it wasn’t until the final launch that the warning was resolved. If you can read the Fighting project, you can basically know how I think about this project.

Standard Redux, define actions, reducers, and use redux-thunk for asynchronous processing.

// constants.js export const DEFAULT_SYNC_DEFAULT = 'DEFAULT_SYNC_DEFAULT'; export const DEFAULT_ASYNC_DEFAULT = 'DEFAULT_ASYNC_DEFAULT'; // actions import { DEFAULT_SYNC_DEFAULT, DEFAULT_ASYNC_DEFAULT } from './constants'; export const getDefault = (params) => { return { type: DEFAULT_SYNC_DEFAULT, payload: { data: 'wower' } } } export const getAsyncDefault = (params) => (dispatch) => { setTimeout(() => { dispatch((() => { return { type: DEFAULT_ASYNC_DEFAULT, payload: { data: 'icepy' } } })()) },2000) } // reducers import { DEFAULT_SYNC_DEFAULT, DEFAULT_ASYNC_DEFAULT } from './constants'; const initState = { name: '', asyncName: '... '}; export default function defaultReducers(state = initState, action){ const { type, payload } = action; switch (type){ case DEFAULT_SYNC_DEFAULT: return { ... state, name: payload.data } case DEFAULT_ASYNC_DEFAULT: return { ... state, asyncName: payload.data} default: return { ... state} } }Copy the code

The build is written based on WebPack 3.x and styles are autoprefixer processed.

Bash

Three commands were refined to complete the development of the project:

$NPM start // Project starts $NPM run mock-server // Start mock server $NPM run build // package resources that can be publishedCopy the code

The directory structure

The top-level directory structure is as follows:

  • SRC Project source file
  • Build build script
  • Config Specifies the configuration information that the build script depends on
  • Dist List of releasable resources built

The SRC directory structure is as follows:

  • Components Common components
  • Globals public reducers
  • Routers routing
  • Containers page-level components
  • Styles Public styles
  • Shared abstract request util, etc
  • store redux store
  • App. Js entrance. Js

The containers directory structure is as follows:

Create page-level components based on your business

  • Index. Js entrance. Js
  • .jsx page-level components
  • .less page-level styles
  • Components The page’s unique component
  • Flow The action reducers needed for this page

release

Use NPM run build to build resources to publish, ignoring index.html in the root directory.

Recommended publishing rules:

  • The packaged DIST is published in the CDN
  • Create your own index. HTML on the server and use the server output to reference a version variable
  • This variable corresponds to the version number of the CDN

legacy

Due to the reason of time, some remaining problems have not been dealt with well.

  • Clear mechanism for store data
  • Webpack-based asynchronous processing scheme
  • CSS Module with className
  • Routing Hook handling
  • Eslint rule configuration, currently only one pre-commit is added

Look forward to this interested friends to raise PR

If you’re lucky enough to be reading this, and you’re interested in cooking, check out my Weekly Routine. Of course, if you want to contact me, you can send me a private message or follow my official wechat account Fed-Talk.