React + TypeScript + Axios + Ant Design + JSON Server 实现 TodoList 效果

最新推荐文章于 2024-12-15 19:04:11 发布
最新推荐文章于 2024-12-15 19:04:11 发布
阅读量115 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： react.js typescript json JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/debug_bug142/article/details/133479455
JavaScript 专栏收录该内容
306 篇文章 ¥59.90 ¥99.00
订阅专栏
本教程详细介绍了如何结合React、TypeScript、Axios、Ant Design和JSON Server搭建一个TodoList应用。从创建React应用、安装依赖到编写TodoList组件和启动JSON Server，每一步都清晰阐述，帮助读者理解如何在实际项目中整合这些技术。

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

在本篇文章中，我们将使用 React、TypeScript、Axios、Ant Design 和 JSON Server 来实现一个简单的 TodoList 应用。我们将使用 React 来构建用户界面，TypeScript 来提供静态类型检查，Axios 来进行与后端的 HTTP 请求交互，Ant Design 来美化界面，而 JSON Server 则用于模拟后端数据。

在开始之前，请确保你已经安装了 Node.js 和 npm（或者使用 yarn）。我们将从头开始创建一个新的 React 应用，并逐步添加所需的依赖和代码。

步骤 1：创建 React 应用

首先，打开终端并执行以下命令来创建一个新的 React 应用：

npx create-react-app todo-app --template typescript

这将创建一个名为 todo-app 的新目录，并在其中初始化一个 React 项目。我们使用 TypeScript 模板来启用 TypeScript 支持。

步骤 2：安装依赖

进入 todo-app 目录，并执行以下命令来安装所需的依赖：


                

                
                
        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        


    



                



	

		

			

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

				
			

			

				

					geyaoisnice的博客
				

				

					05-09
					
					171
					
				

			

		

		

			
				
React(Hook)+TS+axios+ant design+json server实现todolist效果(整体目录结构设计)

			
		

	



                

            
              



	

		

			

				
					
React 系列 : Redux + TypeScript

				
			

			

				

					weixin_46803507的博客
				

				

					05-16
					
					873
					
				

			

		

		

			
				
React 系列 : Redux + TypeScript前言正文StoreActions基本同步 actions異步 actions + TSThunkAction 類型TReturnTypeTStateTExtraThunkArgTBasicActioninner functionReducerReact + ReduxTodoApp 效果展示結語參考
前言
前幾天寫過一篇關於 react + TS 的簡單入門，大致上就是說說 TS 的強大以及基本怎麼跟 react 配合起來，若不清楚歡迎先去看看 Re

			
		

	



              


  
              

                


	

		

			

				
					
React-TypeScript-antDegin4-Redux-axios:集成React + TypeScript + antDegin4 + Redux + axios的后台管理系统框架模板

				
			

			

				

					03-11
				

			

		

		

			
				
集成React + TypeScript + antDegin4 + Redux + axios的后台管理系统框架模板
预览地址（预览）：  ://wx.znike.top:9002/
可用脚本
在项目目录中，可以运行：
yarn start
 在开发模式下运行应用程序。 打开在浏览器中查看它。
 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。
yarn test
 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。
yarn build
 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。
 最小化内部版本，文件名包含哈希值。 您的应用已准备好进行部署！
 请参阅有关的部分以获取更多信息。＃React-TypeScript-antDegin4-Redux-axios

			
		

	





	

		

			

				
					
typescript+react项目中如何配置api（axios）

				
			

			

				

					m0_60584958的博客
				

				

					12-06
					
					995
					
				

			

		

		

			
				
1.首先先下载依赖


npm i @types/axios -S


2.在src文件夹下创建一个api的文件



3.在api文件夹中创建两个.ts结尾的文件



4.request.ts中的配置


import axios from "axios";

export const Service = axios.create({

    timeout: 8000, //延迟时间

    method: 'POST',

    headers: {

        "content-Ty.

			
		

	



		

			
		



	

		

			

				
					
typescript封装axios

				
			

			

				

					weixin_44134674的博客
				

				

					06-08
					
					905
					
				

			

		

		

			
				
1. 常见配置（跨域携带 cookie，token，超时设置，请求头）
2. 请求拦截器和响应拦截器
3. 请求封装，使用同一套写法
4. 请求失败的提示信息
5. 支持单个请求的请求或者相应拦截单独处理

			
		

	





	

		

			

				
					
从零开始搭建React+TypeScript+webpack开发环境-基于axios的Ajax请求工具

				
			

			

				

					断线的风筝
				

				

					11-04
					
					724
					
				

			

		

		

			
				
一个用于 Axios 请求的配置文件，包括请求拦截和响应拦截器。配置了基本URL、授权、错误处理、刷新令牌和网络错误通知。

			
		

	





	

		

			

				
					
• 前端：用react+typescript实现一个todo应用。并且将静态资源(html,js,css等)编译到node.js的静态资源目录中。端口：3000  • 后端：使用node.js+javascript 将数据存储到服务端json文件中。端口3001

				
			

			

				

					05-12
				

			

		

		

			
				
好的，您需要先安装Node.js和React，并创建一个React项目。接下来，您可以按照以下步骤进行操作：  1. 在您的项目根目录下创建一个名为 `server` 的文件夹，并在其中创建一个名为 `data.json` 的文件，用于存储todo...

			
		

	





	

		

			

				
					
前端(client)：用react+typescript实现一个todolist应用，使用回车增加事件，并可以通过点击事件前的按钮改变状态。并且将静态资源(html,js,css等)编译到node.js的静态资源目录中。端口：3000，后端（serve）：使用node.js(koa)+javascript 将数据存储到服务端json文件中。端口3001

				
			

			

				

					05-12
				

			

		

		

			
				
首先，我们需要创建一个React + TypeScript的项目。你可以使用Create React App来搭建项目框架。在命令行中输入以下命令：  ``` npx create-react-app my-todo-app --template typescript ```  这将会创建一个React ...

			
		

	





	

		

			

				
					
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile最详细教程

				
			

			

				

					ZQmxy的博客
				

				

					03-18
					
					3429
					
				

			

		

		

			
				
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile最详细教程

			
		

	





	

		

			

				
					
React with TypeScript 系列(三) --实战篇

				
			

			

				

					Kinfey
				

				

					01-13
					
					9484
					
				

			

		

		

			
				
React 实战

			
		

	





	

		

			

				
					
从零开始，一步一步搭建Typescript+React+Redux项目——集成react-router和axios(三)

					
最新发布

				
			

			

				

					pingguocu3的博客
				

				

					12-15
					
					1634
					
				

			

		

		

			
				
1、安装yarn add react-router-dom @types/react-router-dom -D,然后在src/containers中新建Home和Result组件。安装axios和query-string，yarn add axios query-string -D。在src目录下 新建core文件夹并创建request/index.ts和typings.d.ts。2、在src/entries/index.tsx中引用react-router。在src目录下新建api.ts​​。

			
		

	





	

		

			

				
					
React18+TypeScript搭建通用中后台项目实战02 整合 antd 和 axios

				
			

			

				

					源滚滚编程
				

				

					05-25
					
					735
					
				

			

		

		

			
				
此时访问：http://localhost:5173/404。此时访问：http://localhost:5173/403。修改 src/page/Error404.tsx。修改 src/page/Error403.tsx。新增 src/api/request.ts。

			
		

	





	

		

			

				
					
TypeScript结合React全家桶(antd、axios、Nextjs)的一些类型总结

				
			

			

				

					mackJun的博客
				

				

					08-18
					
					8220
					
				

			

		

		

			
				
TypeScript结合React、Vue、express的一些类型总结(一些常用自带的类型)
1.React类型总览(包括React本身、router、antd的类型)
1.1 React本身常用类型




			
		

	





	

		

			

				
					
项目搭建react + react-router + react-redux + typescript + axios + webpack + less

				
			

			

				

					jiao512的专栏
				

				

					04-23
					
					621
					
				

			

		

		

			
				
npx create-react-app my-app --template typescript
cd my-app
npm start


yarn add antd


yarn add react-app-rewired customize-cra

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+ ...

			
		

	





	

		

			

				
					
TypeScript+React中axios的使用需要

				
			

			

				

					m0_59074147的博客
				

				

					12-07
					
					928
					
				

			

		

		

			
				
在src下创建一个axios.d.ts的文件，并定义接口的类型

里面写


import axios from 'axios';

declare module 'axios' {
  export interface AxiosResponse<T = any> extends Promise<T> {}
}

或者


// axios接口的处理
import * as axios from 'axios'

declare module 'axios' {
  interfa

			
		

	





	

		

			

				
					
手把手带你使用 typescript 实现一个 axios 库（一）

				
			

			

				

					weixin_41044315的博客
				

				

					05-08
					
					2248
					
				

			

		

		

			
				
手把手带你使用 typescript 实现一个 axios 库（一）

注：本教程基于慕课网黄大神的课程进行的整理

源码地址
前言
本人是个工作一年多的前端小菜鸟，热爱写代码，喜欢分享。近期在学习黄大神的课程，就想着写博客来记录一下，一方面加深自己的理解，一方面分享出来给需要的人
需求分析
我们要做的是用 typescript 来重构 axios，so 你需要先熟悉axios，此次重构，会支持以...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值