preface

Because of the influence of the outbreak, can only stay at home, in Denver recently saw a lot of outbreaks of h5 project, like hills on bosses of wuhan pneumonia outbreak real-time dynamic map of provinces and cities development, just recently a little time, therefore his framework built the react mobile end, before quickly developed a h5 page setup, share with you.

The page display

Project address and project preview

  • Project address view source code
  • Preview address Preview
  • Qr code

Project introduction

The project integrates react family bucket and mobile terminal development adaptation, such as 1PX problem, REM adaptation, TRANSFORMING PX to REM, and loading corresponding pixel pictures according to DPR. Support component asynchronous loading, etc., can be used to develop. The complete functions of scaffolding are as follows:

  • The React component is loaded asynchronously. There are two solutions: es6 import, which is encapsulated as a high-level component, and react-loadable
// Load components asynchronously through higher-order componentsexport default function asyncComponent({loader}){
   class AsyncComponent extends Component {
       constructor(props){
           super(props);
           this.state = {
               component: null
           }
       }
       componentDidMount() {// Implement external Promise loader().then(res=>{this.setState({component: res.default})})}render(){
           const C = this.state.component
           return C ? <C {...this.props}/> : null;
       }
   }
   return AsyncComponent;
}
Copy the code
  • Webpack hot update
  • Reducer for hot update
if (module.hot) {
    module.hot.accept('./reducer/main', ()=>{
        const nextRootReducer = require('./reducer/main.js').default;
        store.replaceReducer(nextRootReducer)
    });
}
Copy the code
  • React-redux, which you manually encapsulate yourself,Click to see the code
  • Webpack code segmentation
  • Encapsulating fetch requestsClick to see the code
  • Babel,eslint, postCSs-px-to-viewPort configuration
  • Multiple entry packing
/ / entrancefunction getEntry() {
	let entryMap = {};
	fs.readdirSync(pageDir).forEach((pathname) => {
		let fullPathName = path.resolve(pageDir, pathname);
		let stat = fs.statSync(fullPathName);
		letfileName = path.resolve(fullPathName, mainFile); // Determine that it is a file and the entry file existsif(stat.isDirectory() && fs.existsSync(fileName)) { entryMap[pathname] = fileName; }});return entryMap;
}
Copy the code
  • Integrated the react – the router – the dom, redux, react – redux, react – thunk, axios
  • Solve the problem of 1 pixel, REM adaptation, image adaptation of different DPR equipment
  • Deploy package, use gh-Pages, use NPM run deploy to automatically publish Git pages
  • The code is in the warehouse, if necessaryClick to see the code

Epidemic H5 procedure

  1. Epidemic H5 program is the H5 page quickly built by using this scaffold. The data comes from Dingxiang Garden, and the CAPTURED JSON data is temporarily used and stored in the local data file.
  2. I also provide a data interface (similar to ServerLess) in CloudFlare that can be called in real time to retrieve data
  • The interface address: data – ncov. Webfamily. Workers. Dev /
  • Js script file: Click to view the code

Quick start

# install dependencies
npm install

# development
npm run dev
# Pack and send version
npm run deploy
Copy the code

Deer – UI component library

Myself years ago and wrote a react component library deer – UI, the construction of the project including the scaffolding, stylelint, eslint, commitlint and automatic packaging edition, component implements the on-demand loaded, theme customization, etc. React works seamlessly with react. The basic components of the first version have been developed.

Component library code address

Component library preview address