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

本文详细介绍了如何从零开始搭建一个 Typescript + React 开发的脚手架,包含如何添加 Redux 以及 React Router 的环境。

本文代码地址:ts-react-redux

建议将代码拉下来之后,配合本文一起查看,效果更佳。

代码下载命令:git clone https://github.com/vettel-qin/ts-react-redux.git

相关文章目录

从零开始,一步一步搭建Typescript + React + Redux项目------创建项目结构(一)

从零开始,一步一步搭建Typescript + React + Redux项目------开发环境配置(二)

从零开始,一步一步搭建 Typescript + React + Redux项目------集成React(三)

从零开始,一步一步搭建 Typescript + React + Redux项目------集成Redux(四)

从零开始,一步一步搭建 Typescript + React + Redux项目------项目打包(五)

从零开始,一步一步搭建 Typescript + React + Redux项目------团队合作规范(六)

一、使用react-router

根据react-router分的页面来进行代码分离

1、安装yarn add react-router-dom @types/react-router-dom -D,然后在src/containers中新建Home和Result组件

src/containers/home/Home.tsx

​​src/containers/home/index.ts

src/containers/result/Result.tsx​​

src/containers/home/index.ts

2、在src/entries/index.tsx中引用react-router

​​二、使用axios请求数据

在这里使用https://www.mockapi.io进行模拟数据,大家也可以用我的数据接口:http://5d79e6fe9edf7400140a90cf.mockapi.io/api/findProvinceList

安装axios和query-string,yarn add axios query-string -D

在src目录下 新建core文件夹并创建request/index.ts和typings.d.ts

typings.d.ts​​

index.ts​​

在src目录下新建api.ts​​

在containers/home,请求数据并渲染​​

执行yarn start​

文章及代码中如有问题,欢迎指正,谢谢!
最后编辑于:2024-12-10 21:04:23
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
程序员-Benothing6 小时前
Vim编辑器从入门到精通:模式、快捷键、配置、插件
linux·运维·服务器
paopaokaka_luck6 小时前
基于springboot+vue的智慧家政管理系统(AI问答、 WebSocket实时沟通、ECharts运营分析、订单规则与服务追踪)
java·javascript·spring boot·数据分析·echarts·mybatis
阿森_dev6 小时前
2027 届毕设选题怎么选:30 个 Java 方向选题的实现难度排序
java·开发语言·spring boot·毕业设计·课程设计
m0_646429976 小时前
Docker 完整核心知识点总结(超通俗易懂版)
运维·docker·容器
爱编程的小白L6 小时前
2027 计算机毕业设计选题汇总|深度学习专项(2027最新)
人工智能·深度学习·课程设计
计算机毕业设计杰瑞6 小时前
【计算机毕设精品】基于SpringBoot的一体化教务与学业质量管理系统的设计与实现,附源码_增删改查_java项目_可完美运行部署_网站项目
java·spring boot·课程设计
亚川楼宇自控系统数据中心厂家6 小时前
IBMS 集成管理系统:如何打通楼宇自控实现建筑一体化管控
运维
迪康Defender6 小时前
终端安全审批体系设计:如何平衡安全管控与业务连续性
运维·服务器·安全·运维开发·学习方法·业界资讯·远程工作
专业程序开发源7 小时前
flask家电故障预测系统92491-计算机课程设计/毕业设计
vscode·python·sql·算法·flask·课程设计
luo_guibin8 小时前
Linux系统下OpenSSL升级全流程,新旧版本切换
linux·运维·服务器