【React工作记录一百一十二】React(Hook)+TS+axios+ant design+json server实现todolist效果(整体目录结构设计)

前端大歌谣

已于 2023-05-09 16:59:20 修改

阅读量166

点赞数

分类专栏：前端项目工作实战文章标签： react.js json javascript

于 2023-05-09 15:15:33 首次发布

本文链接：https://blog.youkuaiyun.com/geyaoisnice/article/details/130573354

版权

前端项目工作实战专栏收录该内容

146 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了使用React Hooks、TypeScript、axios和ant design库，结合json server模拟数据，实现一个todolist应用的全过程。包括了数据格式设计、list列表展示、ListAdd组件的创建、axios请求封装以及最终成果和源码分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

大家好我是歌谣最近开始在做关于前端扫盲的一些只是处理花了一周左右录制了了
一个hook写法的关于todoList的视频主要用于基础知识的一个使用和处理

# 前端巅峰人才交流群私信我
# 第一节 创建项目  todolist项目
 技术选型 React(Hook)+TS+axios+ant design+json server
 npx create-react-app HookTodoList --template typescript
 hook  16.8之后写法
 Ts 限制数据类型
 axios 请求
 ant design pc组件库
 json server模拟数据
 # 第二节 创建项目 
 前端交流群可以私信我
 微信公众号是前端小歌谣
 想要源码的话也乐意关注我
 评论区给邮箱发源码
 npx create-react-app todolist --template typescript
 package.json 配置文件
 # 第三节 项目目录和页面修改
 清除多余样式 修改输出为hello world
 # 第四节 增加ant design库
 npm install antd 
 渲染一个table
 # 第五节 Json server模拟数据请求
Json server模拟数据请求
npm install -g json-server
json-server --watch db.json --port 5000
# 第六节 封装axios请求
npm install axios
# 第七