react-typescript的一些简单使用，引入antd、redux，按需加载

最新推荐文章于 2024-08-24 08:15:45 发布

置顶

Mack Liu

最新推荐文章于 2024-08-24 08:15:45 发布

阅读量3.4k

点赞数

分类专栏： react TypeScript 文章标签： React Typescript antd按需加载 redux react-router

本文链接：https://blog.csdn.net/weixin_43902189/article/details/99681548

版权

本文档详细介绍了如何在typescript版本的React脚手架中整合antd按需加载、配置redux以及react-router，并通过一个简单的计数器案例展示了redux与react-thunk的使用。

摘要由CSDN通过智能技术生成

react脚手架typescript版本整合redux、antd按需加载的简单使用(如有侵权，请联系我)

1.下载create-react-app

cnpm i create-react-app -g //全局下载react脚手架,mac用户加上sudo

2.创建react项目(注意：进入启动测试一下项目是否能正常运行)

create-react-app ts-react-study --typescript //--typescript创建脚手架默认引入typescript

3.引入antd，配置按需加载(antd官方有介绍，可以去官方api查看,这里就不用贴了，相信到这里的都是大佬，也可以继续看下去) antdAPI官网链接

cnpm i antd --save //antd就是typescript写的，不需要引入@types/antd这样的依赖

4.引入react-app-rewired、babel-plugin-import、customize-cra依赖配置按需加载

cnpm i react-app-rewired babel-plugin-import customize-cra --save

5.创建一个config-overrides.js文件在根目录下

config-overrides.js文件代码如下

const {
    override, fixBabelImports,addLessLoader } = require("customize-cra");

module.exports = override(
    // addDecoratorsLegacy(),//使用装饰器 //需要引入@babel/plugin-proposal-decorators依赖，next ts可以使用 react ts版本无法使用
    fixBabelImports("import", {
    libraryName: 'antd', style: true }),//style为true则表示使用未编译的less样式，这是可以定制主题色了
    addLessLoader({
   
        javascriptEnabled: true,
        modifyVars: {
    '@primary-color': 'red' }//配置主题色
    })
);

6.这时候重新启动会报错，这时候我们还需要less和less-loader,这样就不会报错了

cnpm i less less-loader --save

7.修改package.json文件(把scripts下面的start、test、build替换如下代码)

"scripts": {
   
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
    "client": "serve build"
  }

重新启动项目引入antd测试一下样式是否自动导入(修改index.tsx文件)

import React from 'react';
import ReactDOM from 'react-dom';
import {
   Button} from 'antd';

const Root: React.FC = () => (
    <Button>按钮</Button>
);
ReactDOM.render(<Root />, document.getElementById('root') as HTMLElement);

8.如需要使用scss的大佬，可以直接引入，react脚手架内部有对应的配置

cnpm i sass sass-loader node-sass -D

然后创建一个scss文件测试一下样式是否生效

9.引入react-router-dom路由

cnpm i react-router-dom @types/react-router-dom --save

10.引入redux、react-redux、react-thunk（重点使用）

cnpm i redux react-redux react-thunk @types/react-redux @types/react-thunk -D

11.制作一个简单的计数器案例

11.1创建store目录在src下面

11.2创建actions.ts文件

import {
    INCREMENT_COUNTER, DECREMENT_COUNTER, INCREMENT_ACTION_TYPE, DECREMENT_ACTION_TYPE } from './types';
import {
    Dispatch } from 'redux';

const incrementCount = (number: number): INCREMENT_ACTION_TYPE => ({
    type: INCREMENT_COUNTER, number });
//异步action
export const asyncIncrementCount = (number: number) => <