After reviewing the React documentation these days, WE are ready to build a basic framework for react development.

Since I have always used VUE and rarely used React for project development, this construction mainly refers to vUE project experience.


The main knowledge points involved in the project

  • Webpack configuration and optimization

  • React-router-dom react-router-config is used when the react-router is upgraded to 4.0

  • React-router Asynchronous Four types of asynchronous loading configurations


Project githubGithub.com/wangweiange…

React and Vue have the same development model: componentization, modularization, unified state management, routing… Etc., so I think as a developer, we just need to understand the respective apis, and the general implementation principles of each one to get started.

Switching technology stacks doesn’t cost much, and hands-on development is easier because there is so much consistency.


One: Optimized configuration of WebPack I covered in detail in a previous article

Please refer to:blog.seosiwei.com/detail/9

The configuration of WebPack in VUE and React is almost the same. The only difference is the configuration of Loader. I won’t go into details here.


2: the react – router4

The React-Router4 version is very different from V2 and V3, and is completely refactored.

In react-Router4, it is split into

  1. react-routerThe core function
  2. react-router-domBrowser-specific routing
  3. react-reouter-nativeRoute for native end

React-router-redux, react-router-config, react-router-config, etc.


Before Router4, we used getComponent to load on demand. The getComponent method has been removed from Router4.

Take a look at the online article, the basic introduction is not very comprehensive, so in this summary, and give the actual source code for your reference.

This section focuses on the configuration loaded on demand for VERSION V4.

(1) Code Splitting uses react-loadable, babel-plugin-syntax-dynamic-import

Reference address: github.com/ReactTraini…

www.npmjs.com/package/rea…

The specific project configuration is as follows:

1. Install dependencies

// install react-loadable --save-dev NPM install babel-plugin-syntax-dynamic-import --save-devCopy the code

2. Webpack parses import() configuration:



3. Configure the router




(2) Bundle-loader loading mode on demand, official document case

Refer to the address: www.npmjs.com/package/bun…

Reacttraining.com/react-route…

1. Install dependencies

NPM install bundle-loader --save-devCopy the code

/ SRC /components add bundle. JSX component as follows:



3. Configure the router



(3) Change the scheme import of 2 to load on demand

Refer to the link: www.jianshu.com/p/547aa7b92…

Reactjs.org/blog/2017/0…

1. Install dependencies

npm install babel-plugin-syntax-dynamic-import --save-devCopy the code

2. Webpack parses import() configuration:





3. Add BundleImport. / SRC/Components add bundleImport. JSX as follows:




4. Configure the router





(4) Create an Async Componen Create an Async component for asynchronous loading

Reference link: serverless-stack.com/chapters/co…

Reactjs.org/blog/2017/0…

Babeljs. IO/docs/usage /…


1. Since we need to support async,await syntax, let’s install babel-polyfill

npm install babel-polyfill --save-dev
npm install babel-plugin-syntax-dynamic-import --save-devCopy the code

2. Configure babel-polyfill in webpack entry, and configure syntax-dynamic-import plugin in babel-loader





3. Add AsyncComponent. / SRC/Components Add asyncComponent. JSX as follows:



4. Configure the router




Summary: There are many ways to load the React -router on demand. All the on-demand source code is in the./ SRC /app.jsx file.


See the following article for a configuration supplement for react-router-config

React-router4 route splitting and on-demand loading based on react-router-config



Follow my blog: Zane’s personal blog

React16 WebPack3 builds the basic framework of front-end SPA react16 Webpack3