preface

React +typescript project creates a process from zero, including adding less, ESLint, and so on to output a process documentCopy the code

It is mainly divided into several parts

  • Technology stack
  • Architectural structures,
  • Code specification
  • Submit specifications

Technology stack

  • Programming language: typescript
  • Build tool: Webpack
  • Front-end framework: React
  • Routing: the react – the router – the dom
  • Body management: useContext
  • CSS precompilation: less
  • Git hook: Husky + Lint-staged
  • EditorConfig + Prettier + ESLint + Airbnb JavaScript Style Guide
  • Commit specification: Commitizen + CommitLint

Architectural structures,

NPM install -g create-react-app for create-react-app

Start the installation

  1. npx create-react-app react-app --template typescript

After the project is successfully created, yarn start the project

Original directory structure:

Add less precompilation

  • Yarn Run eject (expose webPack configuration, config folder appears in root directory)

  • yarn add less less-loader

  • Add it in the project root directory file react-app-env.d.ts

    declare module "*.less" {
  const less: any;
  export default less;
}
Copy the code

  • Add less configuration in webpack.config under config folder

    Since THE CRA scaffolding supports SASS, the global search for SASS, and the corresponding configuration is less, that is, the global search for sassRegex at the first lower configuration

    const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
Copy the code

    The second configuration

      {
                test: lessRegex,
                exclude: lessModuleRegex,
                use: getStyleLoaders(
                  {
                    importLoaders: 3.sourceMap: isEnvProduction
                      ? shouldUseSourceMap
                      : isEnvDevelopment,
                  },
                  'less-loader'
                ),
                sideEffects: true}, {test: lessModuleRegex,
                use: getStyleLoaders(
                  {
                    importLoaders: 3.sourceMap: isEnvProduction
                      ? shouldUseSourceMap
                      : isEnvDevelopment,
                    modules: {
                      getLocalIdent: getCSSModuleLocalIdent,
                    },
                  },
                  'less-loader'),},Copy the code

    TypeError: < CSS > < CSS > < CSS > < CSS > This. GetOptions is not a function. Yarn add –dev [email protected] (6.0.0 also available)

Add basic project configurations

  • Add the absolute path @

    1. Search for alias in webpack.config and configure a line ‘@’: path.resolve(‘ SRC ‘) in the object.

    2. Configure a “paths”: {“@/*”: [“./ SRC /*”]} in the root directory to compilerOptions in tsconfig.json.

  • Add global. Less

    Delete index.css and replace it with globle.less, place basic styles to reset body, ul, etc., and introduce globle.less in index.txs

  • Project structure division

    Create pages directory in SRC, place basic (Home, PerCenter) page, create components to place common components of each page, some header, footer, etc., app.tsx to migrate to pages, create a new serve folder, place API interface, Utils, etc., will be placed at the end of the article along with the project structure and github address.

  • Introduction of less form

    Less import s from ‘./index.module.less’ in index.tsx

    Index.tsx complete code

    import React from 'react'
import Header from 'components/Header'
import s from './index.module.less'

const Home: React.FC<{}> = () = > {
  return (
    <div>
      <Header />
      <div className={s.Home}>home333333</div>
    </div>)}export default Home
Copy the code

  • Route Routes using react-router-dom

    yarn add react-router-dom

    yarn add @types/react-router-dom

    Add the code in app.tsx after route

    import React, { Suspense, lazy } from 'react'
import { HashRouter, Route } from 'react-router-dom'

const Home = lazy(() = > import('./Home'))
const PerCenter = lazy(() = > import('./PerCenter'))

function App() {
  return (
    <div className="App">
      <HashRouter>
        <Suspense fallback={<div>Loading...</div>} ><Route path="/" component={Home} />
          <Route path="/PerCenter" component={PerCenter} />
        </Suspense>
      </HashRouter>
    </div>)}export default App
Copy the code

  • Axios YARN add Axios Add Request. js to utils to encapsulate Ajax for a project

  • Antd is loaded on demand

    yarn add antd

    yarn add babel-plugin-import

    Babel in package.json, added at the level of persets

    "plugins": [["import", {"libraryName": "antd"."style": "css"}]]
Copy the code

  • UseContext + useReducer Data sharing

    Compared with redux, it is easy to use and not tedious. See: juejin.cn/post/701223…

Code specification

Submit specifications