React + Hooks + TypeScript + Ant Design Demo 项目

4,261 阅读2分钟

Node: 本地node版本v12.13.1 React: 应用使用Create React App 脚手架构建 Hooks: react 16.13.1版本 支持Hooks API,本项目全部使用此API Typescript: 创建项目时应用ts版本 Scss: 项目配置了Scss设置样式

登录页面

登录

主页面

main

项目目录

├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── api
│   │   └── api.ts
│   ├── components
│   │   ├── context.tsx
│   │   ├── login.tsx
│   │   └── route.tsx
│   ├── index.tsx
│   ├── model
│   │   ├── login.ts
│   │   └── route.ts
│   ├── page
│   │   ├── bus
│   │   │   └── index.tsx
│   │   ├── layout
│   │   │   ├── account.module.scss
│   │   │   ├── account.tsx
│   │   │   ├── header.module.scss
│   │   │   ├── header.tsx
│   │   │   ├── nav.tsx
│   │   │   ├── setting.module.scss
│   │   │   └── setting.tsx
│   │   ├── main.module.scss
│   │   ├── main.tsx
│   │   ├── setting
│   │   │   ├── index.tsx
│   │   │   ├── menu.tsx
│   │   │   ├── set1.tsx
│   │   │   └── set2.tsx
│   │   └── user
│   │       ├── login.module.scss
│   │       ├── login.tsx
│   │       └── userInfo.tsx
│   ├── react-app-env.d.ts
│   ├── reducers
│   │   └── reducers.tsx
│   ├── router
│   │   └── index.ts
│   ├── serviceWorker.ts
│   ├── setupTests.ts
│   └── static
│       ├── images
│       │   └── logo.svg
│       └── styles
│           └── index.scss
├── tsconfig.json
└── yarn.lock

目录说明

  • 项目ts配置文件 /tsconfig.json ,"baseUrl": "src" 配置了引入文件的基本目录为src
 {
  "compilerOptions": {
    ...
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}
  • 路由配置文件 /src/router/index.ts ,里面会引入 /src/page 目录下的很多页面文件当作对应路由的组件,最后导出一个json数组
  • 组件文件夹 /src/components 里面存的各种组件
  • /src/model 文件夹中存放公共接口文件
  • /src/page 里存放各种业务级页面,需要注意,脚手架自动配置了css modules,例如:main.tsx引入scss文件时,代码如下,scss文件的命名为main.module.scss,中间带上module
import style from './main.module.scss';
  • /src/reducers 文件夹存放公共reducer,本项目目前仅用于登陆状态。
  • /src/static 存放各种静态资源
  • /src/api 中保存处理接口调用的配置,本项目目前纯静态演示,没有配置axios之类的接口调用依赖。api.ts中通过调用setTimeout延时模拟了接口的异步特性。

项目说明

入口文件 /src/App.tsx

中引入了:

import routes from './router';
import { RouteWithSubRoutes } from './components/route';
import { RouteInterface } from './model/route';

...
  <Router>
    <Switch>
      <Redirect exact from="/" to="/login" />
      {routes.map((route: RouteInterface, i: number) => {
        return RouteWithSubRoutes(route, i)
      })}
    </Switch>
  </Router>
...
  • 路由配置文件 routes
  • 组件中的路由模板 RouteWithSubRoutes
  • 和路由通用接口 RouteInterface
  • Redirect 设置路由请求 "/" 时重定向到 "/login" 登陆路由
  • routes.map 遍历了路由配置文件,返回RouteWithSubRoutes 路由组件模板

接着引入了:

import { InitialState, Reducer } from 'reducers/reducers';
import { Dispatch, Global } from 'components/context';
import { LOG_IN, LOG_OUT } from 'reducers/reducers';
  • /src/reducers/reducers 中的状态初始值 InitialState 和 Reducer方法(目前该方法用于登陆登出)
  • 引入组件中的 Dispatch, Global 分发和初始状态值,由于 Hooks API 的特性,本项目使用useReducer 和 useContext 接合的方式替代传统的 Redux
const [global, dispatch] = useReducer(Reducer, InitialState);
return (
  <Dispatch.Provider value={{ dispatch }}>
    <Global.Provider value={{ global }}>
      // ...
    </Global.Provider>
  </Dispatch.Provider>
);
useReducer 方法定义 global, dispatch,通过 和 在最外层包裹视图层内部组件,让子组件获取context中定义的状态和方法。

项目地址: gitee.com/sonicwater/…

安装

$ git clone https://gitee.com/sonicwater/react-hooks-ts-antd-demo.git

$ cd react-hooks-ts-antd-demo

$ npm install

$ npm run start