Build a complete React project template from scratch (Webpack + React Hooks + Mobx + Antd)

Project description

This project is a background project framework template in React, which is convenient for rapid development of specific projects. Including Webpack4.0 configuration and packaging optimization, React family bucket (React + react-router + Axios + Mobx + Antd), ESLint and other project development specifications.

Git address: github.com/now1then/re… ; Article links – language finch: www.yuque.com/nowthen/lon… ; Online demo address:

Directory structure:

│ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises Webpack. Prod. Js / / webpack production environment configuration ├ ─ ─ dist / / packaging output directory ├ ─ ─ public / / project public directory ├ ─ ─ the SRC/directory/SRC development │ ├ ─ ─ assets/resources/static │ ├ ─ ─ │ ├── modules │ ├── pages │ ├── pages │ ├── Routers // Layout components │ ├─ ├── Modules │ ├─ pages │ ├── Routers // Layout components │ ├─ ├── Modules │ ├─ pages │ ├── Routers // Layout components │ ├─ Exercises │ ├── utils │ ├─ index. HTML │ ├─ utils │ ├─ index. HTML │ ├─ utils │ ├─ index │ ├─.pdf /.pdf │ ├─.pdf /.pdf │ ├─.pdf . Gitignore / / git ignore configuration ├ ─ ─ the postcssrc. Js/configuration/postcss ├ ─ ─ package. The json / / rely on package configuration └ ─ ─ the README. Md / / projectCopy the code

Initialize the project

Install webpack

yarn add -D webpack webpack-cli webpack-merge
Copy the code

The Webpack version used in the project is ^5.10.0. The Webpack4.0 package build has a lot of default optimizations, and many configuration items do not need to be configured or changed. For example, to accelerate packaging for development mode, merge chunks; Code compression for production mode, reduce packaging volume, etc.

// Partial default configuration
optimization: {
    removeAvailableModules: true.// Delete the resolved chunk (default true)
    removeEmptyChunks: true.// Delete empty chunks (default true)
    mergeDuplicateChunks: true // Merge duplicate chunks (default true)
  }
  
 // Default configuration for production environment
  optimization: {
    sideEffects:true.// Work with tree shaking
    splitChunks: {... },/ / unpacking
    namedModules: false.// namedChunks:false Specifies that the chunk name is not enabled
    minimize: true.// Code compression
  }
Copy the code

It is necessary to distinguish webPack configurations by development/production environment to speed up the packaging of the development environment, and sometimes if the development environment is too slow to package, you can check whether the configuration is wrong (for example, the development environment turned on code compression).

Cooperation in projectwebpack-mergeSplit configuration according to development/production environment:

Webpack4.0 has been released for a long time, and I believe that the project has basically migrated to 4.0, so I won’t go into much detail here.

Configure local services and hot updates

Installation:

yarn add -D webpack-dev-server clean-webpack-plugin
Copy the code

The development environment uses Webpack-dev-server to build a local Web server and enable module hot update (HMR). To facilitate development and debugging, forward proxy requests (in this case with AXIOS encapsulating the forward interface to an easy-Mock online platform)

Configuration:

mode: "development".// Development mode
devServer: { // Local service configuration
  port: 9000.hot: true.open: false.historyApiFallback: true.compress: true.proxy: { / / agent
    "/testapi": {
      target:
      "https://www.easy-mock.com/mock/5dff0acd5b188e66c6e07329/react-template".changeOrigin: true.secure: false.pathRewrite: { "^/testapi": ""}}}},plugins: [
  new webpack.NamedModulesPlugin(),
  new webpack.HotModuleReplacementPlugin()
],
Copy the code

.babelrcConfiguration file

{
  "presets": [
    "@babel/preset-env"."@babel/preset-react"]."plugins": [
    "@babel/transform-runtime"["@babel/plugin-proposal-decorators",
      {
        "legacy": true}], ["@babel/plugin-proposal-class-properties", { "loose": true }],
    [
      "import",
      {
        "libraryName": "antd"."libraryDirectory": "es"."style": "css" // 'style: true' loads the less file}}]]Copy the code

Multithreaded packaging with Happypack

Installation:

yarn add -D happypack
Copy the code

Configuration:

const os = require("os");
const HappyPack = require("happypack");
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module: {
  rules: [{test: /\.(js|jsx)$/,
      include: [srcDir],
      exclude: /(node_modules|bower_components)/,
      use: ["happypack/loader? id=happybabel"]},]},plugins: [
  // Start the happypack thread pool
  new HappyPack({
    id: "happybabel".loaders: ["babel-loader? cacheDirectory=true"].threadPool: happyThreadPool,
    cache: true.verbose: true}),]Copy the code

Other configuration

Introduction of ESLint and Prettier to standardize team project code development and unify code styles.

yarn add -D prettier babel-eslint eslint eslint-loader eslint-config-airbnb 
eslint-config-prettier eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
Copy the code

(Details to be added)

For details, see the project code under **/build directory **.

Project Code Architecture

Install the dependencies for actual development:

yarn add react react-dom react-router-dom mobx mobx-react mobx-react-router 
	axios antd moment
Copy the code

The first decision we have to make before we write the actual code is, how do we build the directory structure? Where do you want to put these components?

The directory structure

According to personal habits and experience, the project catalog is built as shown in the figure below:

│ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises Webpack. Prod. Js / / webpack production environment configuration ├ ─ ─ dist / / packaging output directory ├ ─ ─ public / / project public directory ├ ─ ─ the SRC/directory/SRC development │ ├ ─ ─ assets/resources/static │ ├ ─ ─ │ ├── modules │ ├── pages │ ├── pages │ ├── Routers // Layout components │ ├─ ├── Modules │ ├─ pages │ ├── Routers // Layout components │ ├─ ├── Modules │ ├─ pages │ ├── Routers // Layout components │ ├─ Exercises │ ├── utils │ ├─ index. HTML │ ├─ utils │ ├─ index. HTML │ ├─ utils │ ├─ index │ ├─.pdf /.pdf │ ├─.pdf /.pdf │ ├─.pdf . Gitignore / / git ignore configuration ├ ─ ─ the postcssrc. Js/configuration/postcss ├ ─ ─ package. The json / / rely on package configuration └ ─ ─ the README. Md / / projectCopy the code

Page module directory structure, such as FormDemo page structure:

│ ├── form.js // Form.js // Form.js // Form.js // Form.js // Form.js // Form.js // Form.js // Form.js // Form.js // Form.js // Form.js Store.js │ ├ ─ style.pdfCopy the code

Router Route Configuration

The project is a single page application, and the routing configuration is generally divided into compact dynamic routing and centralized configuration routing. In the React world, the mature react-Router tool manages page routing directly. When we talk about react-router, we’re basically talking about versions after version 4 of the React-router. The current version has been updated to 5.1.x. Currently, React-Router supports dynamic routing. It uses the React component to implement routing completely. In the rendering process, routing rules are set dynamically, and corresponding page components are loaded by matching the matching rules.

In this project, centralized configuration routes are adopted (for the convenience of route authentication, obtaining menu route configuration from the server interface, etc.), and the side menu bar is conveniently set. Of course, for simplicity, the project reads the configuration of the local static menu and does not import the route authentication.

Routing Component Renderingsrc/routes/AppRouter.js:

import React, { lazy, Suspense } from "react";
import LoadingPage from "@/components/LoadingPage";
import {
  HashRouter as Router,
  Route,
  Switch,
  Redirect
} from "react-router-dom";
import config from "./config";

const renderRoutes = routes= > {
  if (!Array.isArray(routes)) {
    return null;
  }

  return (
    <Switch>
      {routes.map((route, index) => {
        if (route.redirect) {
          return (
            <Redirect
              key={route.path || index}
              exact={route.exact}
              strict={route.strict}
              from={route.path}
              to={route.redirect}
            />
          );
        }

        return (
          <Route
            key={route.path || index}
            path={route.path}
            exact={route.exact}
            strict={route.strict}
            render={()= > {
              const renderChildRoutes = renderRoutes(route.childRoutes);
              if (route.component) {
                return (
                  <Suspense fallback={<LoadingPage />} ><route.component route={route}>
                      {renderChildRoutes}
                    </route.component>
                  </Suspense>
                );
              }
              return renderChildRoutes;
            }}
          />
        );
      })}
    </Switch>
  );
};

const AppRouter = () = > {
  return <Router>{renderRoutes(config)}</Router>;
};

export default AppRouter;
Copy the code

Manage data status in conjunction with MOBX

Whether or not to use state management tools in the project depends on the actual project conditions. This project uses Mobx which I am familiar with. Mobx is a powerful and easy state management tool.

In order to use concise and convenient management, in the organization, divided into global public data state and page data state. Public data status is stored in the/SRC /stores directory; The page data is stored in the corresponding page directory.

In the implementation, mobx + useContext Hook feature is used to realize the state management of functional components. Use React’s createdContext to build a context containing Mobx. Use useContext Hook to subscribe to Mobx data changes in functional components.

Page level store.js code:

import { createContext } from "react";
import { observable, action, computed } from "mobx";
import request from "@/services/newRequest";

class HomeStore {
  @observable tableData = [];
  @observable pageTitle = "Home page";
  @observable loading = false;

  @action.bound setData(data = {}) {
    Object.entries(data).forEach(item= > {
      this[item[0]] = item[1];
    });
  }

  // Table data
  @action.bound
  async qryTableDate(page = 1, size = 10) {
    this.loading = true;
    const res = await request({
      url: "/list".method: "post".data: { page, size }
    });

    if (res.success) {
      const resData = res.data || {};
      console.log(resData);
    }
    this.loading = false; }}export default createContext(new HomeStore());
Copy the code

Page component code:

import React, { useContext } from "react";
import { observer } from "mobx-react";
import Store from "./store";

import "./style.less";

const HomePage = () = > {
  const pageStore = useContext(Store);

  return (
    <div className="page-home page-content">The home page<h2>{pageStore.pageTitle}</h2>
    </div>
  );
};

export default observer(HomePage);
Copy the code

The above is part of the demo code, the specific business implementation can view the project code.

UI components and page layout

The UI components use the excellent Ant Design component library, noting the use of the Babel-plugin-import configuration for the on-demand loading of the components.

The internal page layout of this project usesAntdOn the classic layout:

The page layout needs to be properly split up into modules, and the left menu navigation bar is rendered according to the static menu. See the project for the actual complete code. The following is the BasicLayout component:

import React from "react";
import { Layout } from "antd";
import SiderMenu from ".. /SiderMenu";
import MainHeader from ".. /MainHeader";
import MainFooter from ".. /MainFooter";

import "./style.less";

const BasicLayout = ({ route, children }) = > {
  return (
    <Layout className="main-layout">{/* Left menu navigation */}<SiderMenu routes={route.childRoutes} /> 
      <Layout className="main-layout-right">{/* Top display layout */}<MainHeader></MainHeader>
        <Layout.Content className="main-layout-content">{/* Actual page layout */} {children} {/*<MainFooter></MainFooter>* /}</Layout.Content>
      </Layout>
    </Layout>
  );
};

export default BasicLayout;
Copy the code

The BasicLayout, which does not need to be placed on top of the login page, needs to be handled separately (the menu configuration precedes the BasicLayout configuration).

The last

Git address: github.com/now1then/re… ; Article links – language finch: www.yuque.com/nowthen/lon… ; Online demo address:

————2020-12-10 Update record ————–

Github source updated with v2.0.0:

• The upgrade project depends on all library versions, including: React17, ANTD4, WebPack5…
• Add the commitlint specification to git commit.
• – Added husky + Lint-Passage + Prettier to commit validation
• – Optimized esLint + prettier project code style
• .

To see the pre-article code, switch to V1.0.0

————2020-12-10 Update record ————–

Writing is not easy, feel good or helpful shoes, welcome attention, more star; (-) -)