init

config-overrides.ts

+const { override, fixBabelImports, addLessLoader, addDecoratorsLegacy, disableEsLint, getBabelLoader } = require('customize-cra');
+
+const fileLoaderMatcher = function (rule) {
+    return rule.loader && rule.loader.indexOf('file-loader') !== -1;
+};
+
+function addPlugin(config) {
+    config.module.rules[2].oneOf.unshift(
+        {
+            test: /\.less$/,
+            use: [
+                require.resolve('style-loader'),
+                require.resolve('css-loader'),
+                {
+                    loader: require.resolve('postcss-loader'),
+                    options: {
+                        // Necessary for external CSS imports to work
+                        // https://github.com/facebookincubator/create-react-app/issues/2677
+                        ident: 'postcss',
+                        plugins: () => [
+                            require('postcss-flexbugs-fixes'),
+                            require('postcss-preset-env')({
+                                autoprefixer: {
+                                    flexbox: 'no-2009',
+                                },
+                                stage: 3,
+                            }),
+                        ],
+                    },
+                },
+                {
+                    loader: require.resolve('less-loader'),
+                    options: {
+                        javascriptEnabled: true,
+                        // theme vars, also can use theme.js instead of this.
+                        modifyVars: {
+                            '@primary-color': 'rgb(70,124,224)',
+                        },
+                    },
+                },
+            ],
+        },
+    );
+
+    // file-loader exclude
+    const l = getBabelLoader(config, fileLoaderMatcher);
+    const reg = /\.less$/;
+    if (Array.isArray(l.exclude)) {
+        l.exclude.push(reg);
+    } else if (l.exclude) {
+        l.exclude = [l.exclude, reg];
+    } else {
+        l.exclude = reg;
+    }
+
+    return config;
+}
+
+module.exports = override(
+    addPlugin,
+    fixBabelImports('import', {
+        libraryName: 'antd',
+        style: true, // use less for customized theme
+    }),
+    addDecoratorsLegacy(),
+    disableEsLint(),
+);
\ No newline at end of file

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/plugin-proposal-decorators": "^7.7.4",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -10,17 +11,30 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/react-loadable": "^5.5.3",
+    "@types/react-router-dom": "^5.1.3",
+    "antd": "^3.26.4",
+    "babel-plugin-import": "^1.13.0",
+    "customize-cra": "^0.9.1",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "mobx": "^5.15.1",
+    "mobx-react": "^6.1.4",
+    "mobx-react-router": "^4.1.0",
     "node-sass": "^4.13.0",
+    "normalize.css": "^8.0.1",
     "react": "^16.12.0",
+    "react-app-rewired": "^2.1.5",
     "react-dom": "^16.12.0",
+    "react-loadable": "^5.5.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0",
     "typescript": "~3.7.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/App.tsx

 import React from 'react';
-import logo from './logo.svg';
-import './App.scss';
+import { Router, Route, Switch, Redirect } from "react-router-dom";
+import { rootRouter } from './router/rootRouter';
+import { history as browserHistory } from './common/history';
+import { syncHistoryWithStore } from 'mobx-react-router';
+import { routerStore } from './store/routerStore';
+import { Provider } from 'mobx-react';
+import * as mobxStore from './store/index';
+
+const history = syncHistoryWithStore(browserHistory, routerStore);
 
 const App: React.FC = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Provider {...mobxStore}>
+      <Router history={history}>
+        <Switch>
+          <Redirect exact from="/" to="/home" />
+          <Switch>
+            {
+              rootRouter.map(({ path, component, ...otherProps }) => (
+                <Route
+                  path={path}
+                  component={component}
+                  {...otherProps}
+                  key={path}
+                />
+              ))
+            }
+            {/* <Route path="*" component={NotFound} /> */}
+          </Switch>
+        </Switch>
+      </Router>
+    </Provider>
   );
 }
 

src/common/history.ts

+import { createBrowserHistory } from 'history';
+
+export const history = createBrowserHistory();
\ No newline at end of file

src/component/JFLoading/JFLoading.scss

+.jf-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 1001;
+    transform: translate3d(-50%, -50%, 0);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &.mask {
+        top:0;
+        bottom:0;
+        right:0;
+        left:0;
+        transform: translate3d(0,0,0);
+    }
+}

src/component/JFLoading/JFLoading.tsx

+import React, { FunctionComponent } from 'react';
+import { Spin } from 'antd';
+import './JFLoading.scss';
+
+interface JFLoadingProps {
+    mask?: boolean,
+    loading?: boolean
+}
+
+export const JFLoading: FunctionComponent<JFLoadingProps> = ({loading = false, mask = false}) => {
+    if (!loading) {
+        return null;
+    }
+
+    return (
+        <div className={`jf-loading${mask ? ' mask' : ''}`}>
+            <Spin size="large" />
+        </div>
+    )
+}

src/index.scss

-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.tsx

 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.scss';
+import 'normalize.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 

src/page/Home/Home.tsx

+import React, { Component } from 'react';
+
+export default class Home extends Component {
+    render() {
+        return (
+            <div>
+                home
+            </div>
+        )
+    }
+}

src/router/rootRouter.tsx

+import React from 'react';
+import Loadable from 'react-loadable';
+import { JFLoading } from '../component/JFLoading/JFLoading';
+
+export const rootRouter = [
+    {
+        path: '/home',
+        component:Loadable({
+            loader: () => import('../page/Home/Home'),
+            loading: () => <JFLoading />
+        })
+    },
+]
\ No newline at end of file

src/store/index.ts

+export { routerStore } from './routerStore';
\ No newline at end of file

src/store/routerStore.ts

+import { RouterStore } from 'mobx-react-router';
+
+export const routerStore = new RouterStore();
\ No newline at end of file