React+Typescript+antd 搭建项目

最新推荐文章于 2024-07-04 10:07:56 发布
最新推荐文章于 2024-07-04 10:07:56 发布
阅读量685 收藏 2
点赞数
分类专栏： React Typescript 文章标签： javascript typescript less react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51300418/article/details/116273855
版权
本文档详细介绍了如何使用React、Typescript和antd来搭建项目，包括初始化项目、antd的安装、按需加载配置以及自定义主题的过程。在初始化项目时，提到了所需的开发环境和工具。对于antd，重点讲解了安装按需加载依赖和自定义主题的步骤，特别是通过修改webpack配置和使用babel-plugin-import实现按需加载，以及通过less和less-loader配置自定义主题。
摘要由CSDN通过智能技术生成

React+Typescript+antd 搭建项目

初始化项目

开发环境:

node: v14.15.0
yarn: 1.22.10
npx: 7.8.0
editor: visual studio code

使用cra进行项目初始化

npx create-react-app my-app --template typescript

如果已经使用cra创建过项目, 执行:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

官方文档关于这一节的介绍

antd

安装依赖

antd 本身已支持typescript4+, 不要使用@types/antd, 详见

yarn add antd

按需加载

可以使用暴露webpack配置的方式进行, 但是yarn eject这种方式是不可逆的, 可能会人为造成不必要的损失, 官方也不推荐

这里采用create-react-app官方给出的方法

引入react-app-rewired、customize-cra和babel-plugin-import

babel-plugin-import 是一个按需加载代码或样式的插件, create-app-rewired 需要配和 customize-cra 使用

yarn add react-app-rewired customize-cra babel-plugin-import

修改package.json

"scripts"
最低0.47元/天 解锁文章
先养猫
关注
专栏目录
React(hook)+Typescript+Antd 实现一个可配置的后台管理系统
u013620259的博客
07-09 4579
1.效果预览地址 点击这里 2.应用到的技术栈 React（16.8）+ Typescript（3.5）+Antd（3.2）+redux + sessionStorage + less 3.搭建环境 1.安装官网react脚手架的typescript版本 $ npx create-react-app my-app --typescript $ # 或者 $ yarn create reac...
从零开始构建React+TypeScript+Antd+Less(less module)环境（一）
weixin_43567936的博客
11-02 327
React 官网提供的了一些三方文档用于自行搭建 React 环境，翻阅后，我去掉了使用 webpack-dev-server 的部分，而改使用 Webpack 的两个中间件 webpack-dev-middleware 和 webpack-hot-middleware 配以 Exrepss 在本地打架开发服务环境。webpack-hot-middleware 是热更新中间件可以实现在开发过程中的代码热更新。新建 webpack-config-dev.js 用于存放开发环境的 Webpack 配置。
typescript+react+antd基础环境搭建
weixin_33730836的博客
10-25 471
typescript+react+antd基础环境搭建（包含样式定制） tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影响到antd的显示 // allowSyntheticDefaultImports 是antd官网给的配置 必须加上 { "c...
react+ts+antd项目搭建
最新发布
xiaoxian_xian的博客
07-04 443
react+ts+antd项目搭建
react+typescript+antd脚手架搭建
weixin_33701294的博客
03-11 3092
前段时间研究了一下react+typescript开发方式，再加上antd，开发感受还是挺不错的。本篇文章主要讲下在官方推荐的脚手架的基础上搭建脚手架所遇到的问题。 一开始使用的是create-react-app-typescript脚手架（此方案已废弃） npx create-react-app my-app --scripts-version=react-scripts-ts cd my-...
react-typescript：具有TypescriptAntd的前端项目。 webpack5 +React路由器4 + antd + typescript4 + grahql
02-05
React打字稿 项目概况 使用蚂蚁金服的Antnt开发的一套后台管理系统，主要用到了react，typescript，antd，mobx等技术，使用webpack4打包构建，包含React16的代码拆分等新特性。 项目主要技术结构 React 打字稿 安特 暴民 webpack4 React路由器4 安装 在终端下操作 项目地址：（ git clone ） git clone git@github.com:xpioneer/react-typescript.git 安装node_modules依赖yarn yarn #in your command terminal 运行 启动开发服务
React + typescript 全局websocket 监听（心跳检测）
11-09
React + typescript 全局websocket 监听（心跳检测）
【每天学一点-03】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
weixin_43906233的博客
06-05 1946
使用脚手架快速搭建 React+TypeScript+umi.js+Antd 项目
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile
aoliei的博客
03-17 1945
一、通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目，可以看到顺利生成了react项目且组件的后缀为tsx,此时说明成功创建了react+typescript项目的雏形 在项目根目录下，运行npm run start，成功启动项目 npm start 二、配置路由 npm i react-router-dom@5.2.0 react-ro..
2022升级 React18+TS高仿AntD从零到一打造组件库
09-02
在本课程"2022升级 React18+TS高仿AntD从零到一打造组件库"中，我们将深入探讨React最新版本18的特性，结合TypeScript（TS）的强大类型系统，以及如何模仿流行的Ant Design（AntD）框架，来创建一个自定义的组件库。...
react typescript + antd 框架代码示例
08-12
react typescript + antd 前端框架, 入门示例demo。写的一个简单的首页页面，展示下component的创建，route创建，页面跳转，carco的主题定制，类似helloworld，使用typescript所写
react-antd-ts-admin:react + antd + typescript的后台管理系统
03-11
项目简介 基于React+AntD+TypeScript的后台管理系统 技术依赖 React-（UI框架） 蚂蚁设计-（组件库） TypeScript-（静态类型） Webpack 轴距 较少的 功能 登录/退出 全屏浏览 一键换肤 个人中心 侧边菜单 标签快捷导航 图标 表单 表格 图表 折线图 面积图 柱状图 条形图 饼图 散点图 地图 标签选项卡 发布/导出Excel 用户管理 文章管理 创建文章 文章列表 草稿箱 垃圾箱 发布 头像上传 文件上传 错误处理 403 404 组件 可编辑的树 项目截图 目录结构 |-- config webpack配置文件 |-- dist webpack构建目录 |-- docs 文档 |-- public html模板 |--
React+Antd+TypeScript 开发规范
caoyan0829的博客
09-19 5143
React+Antd+TypeScript 规范整合 1.TypeScript代码标准化规则 提取出部分适用于项目中的官方要求的的TypeScript用于约束贡献者的编码规范 [typescript官方规范] 出自：深圳市伙伴行网络科技有限公司 编辑：前端开发-毛昱宇 (https://zhongsp.gitbooks.io/typescript-handbook/doc/w...
React Hooks + TypeScript + Ant Design -------------表单动态增减实现
qq_48718857的博客
08-12 593
官方地址：https://ant.design/components/form-cn/#components-form-demo-dynamic-form-item 基础Demo import { Form, Input, Button, Space } from 'antd'; import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; const Demo = () => { const onFinish .
搭建 react + typescript + ant design 开发环境
qq_39523606的博客
05-10 630
9102 年了，前端工程化发展在 nodejs 的基础上已经发展的非常完善了，各种前端构建辅助工具层出不穷。ES6 编译器 babel，css 辅助工具 postcss / sass / less，代码风格检测工具 eslint / prettier / stylelint，git 辅助工具 husky / lint-staged / commitizen / commitlint，自动化构建工具...
react+typescript+umi+dva+antd
博哥的二进制世界
06-18 2950
react+umi+dva背景创建一个umi应用umi应用的路由配置路由路由配置工程化约定式路由路由跳转安装插件集@umijs/preset-reactumi+antdumi+dva 背景 React 前端三大框架之一。 Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架，在作者的 github 里是这么描述它的：”dva 是 react 和 redux 的最佳实践”。 Antd 是阿里的一套开箱即用的中台前端/设计解决方案，UI框架。 Umi 一套可插拔的企业级 react 应用框
React And TypeScript（一：基本环境+集成antd）
热门推荐
JUSTIN的博客
01-09 1万+
前言 上东家前端pc项目是15年的React+Flux，当然架子肯定是其他大牛搭建的。本司刚刚最近才有新版pc的需求（ps：之前只要个静态pc和mobile页面, 简单搭建webpack@3打包文件），所以需要重新搭建一个pc。想来想去，angularjs太重，没人用它做pc，不合适；vue，算了吧，文档都不知道长什么样子；jquery，用它估计也是想找死。最后技术定位到React+ React...
React TypeScript | 快速了解 antd 的使用
无夜之星辰的博客
09-14 712
antd 的安装和使用很简单
已知现在有一个树形控件，请帮我用react+typescript+Ant Design+umi的开发框架实现可搜索的树形控件
06-08
好的，下面是一个基于React+TypeScript+Ant Design+Umi的可搜索树形控件的代码示例： ``` import React, { useState, useEffect } from 'react'; import { Tree, Input } from 'antd'; import { SearchOutlined } from '@ant-design/icons'; import { TreeProps } from 'antd/lib/tree'; import { DataNode } from 'rc-tree/lib/interface'; import { debounce } from 'lodash'; interface SearchTreeProps extends TreeProps { data: DataNode[]; } const SearchTree: React.FC<SearchTreeProps> = ({ data, ...props }) => { const [expandedKeys, setExpandedKeys] = useState<string[]>([]); const [searchValue, setSearchValue] = useState<string>(''); const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true); const [treeData, setTreeData] = useState<DataNode[]>(data); const handleSearch = debounce((value: string) => { const expandedKeys = getExpandedKeysBySearchValue(value, data); setExpandedKeys(expandedKeys); setSearchValue(value); setAutoExpandParent(true); }, 300); const handleExpand = (expandedKeys: string[]) => { setExpandedKeys(expandedKeys); setAutoExpandParent(false); }; const handleFilterTreeNode = (node: DataNode) => { if (node.title && node.title.toLowerCase().includes(searchValue.toLowerCase())) { return true; } return false; }; const handleRenderTreeNode = (node: DataNode) => { if (node.children) { return ( <Tree.TreeNode key={node.key} title={node.title}> {node.children.filter(handleFilterTreeNode).map(handleRenderTreeNode)} </Tree.TreeNode> ); } return node.title; }; useEffect(() => { const filteredTreeData = data.filter(handleFilterTreeNode).map(handleRenderTreeNode); setTreeData(filteredTreeData); }, [searchValue, data]); return ( <div> <Input placeholder="Search" prefix={<SearchOutlined />} onChange={(e) => handleSearch(e.target.value)} style={{ marginBottom: 8 }} /> <Tree {...props} expandedKeys={expandedKeys} autoExpandParent={autoExpandParent} onExpand={handleExpand} > {treeData} </Tree> </div> ); }; const getExpandedKeysBySearchValue = (searchValue: string, data: DataNode[]): string[] => { const expandedKeys: string[] = []; const loop = (data: DataNode[]) => { data.forEach((item) => { if (item.title.toLowerCase().includes(searchValue.toLowerCase())) { expandedKeys.push(item.key.toString()); } if (item.children) { loop(item.children); } }); }; loop(data); return expandedKeys; }; export default SearchTree; ``` 这个组件接收一个data属性，用于渲染树形控件。在组件内部，我们使用了useState和useEffect来处理组件状态和生命周期，使用了Ant Design的Tree和Input组件来实现树形控件和搜索框。我们使用了lodash库里的debounce函数来限制搜索框的搜索频率。 在handleSearch函数中，我们根据用户输入的内容，获取符合条件的节点的父节点的key，并将它们设置为展开状态。我们使用useState来保存展开状态、搜索值和是否自动展开父节点的状态。 在handleExpand函数中，我们处理了展开状态的变化。 在handleFilterTreeNode函数中，我们判断节点是否符合搜索条件。 在handleRenderTreeNode函数中，我们渲染符合搜索条件的节点。 在useEffect中，我们根据搜索值过滤数据，并重新渲染树形控件。 最后，我们将搜索框和树形控件渲染到页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值