从零开始,一步一步搭建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
© 著作权归作者所有,转载或内容合作请联系作者

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

相关推荐
bugtraq20219 分钟前
XiaoMi Mi5(gemini) 刷入Ubuntu Touch 16.04——安卓手机刷入Linux
linux·运维·ubuntu
xmweisi16 分钟前
【华为】报文统计的技术NetStream
运维·服务器·网络·华为认证
VVVVWeiYee20 分钟前
BGP配置华为——路径优选验证
运维·网络·华为·信息与通信
计算机毕设指导636 分钟前
基于Springboot学生宿舍水电信息管理系统【附源码】
java·spring boot·后端·mysql·spring·tomcat·maven
陆鳐LuLu41 分钟前
日志管理利器:基于 ELK 的日志收集、存储与可视化实战
运维·elk·jenkins
计算机-秋大田44 分钟前
基于Spring Boot的兴顺物流管理系统设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·spring·课程设计
DC_BLOG1 小时前
Linux-GlusterFS进阶分布式卷
linux·运维·服务器·分布式
禾苗种树1 小时前
在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时,若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预,可以通过以下步骤实现:
前端·vue.js·echarts
cookies_s_s2 小时前
Linux--进程(进程虚拟地址空间、页表、进程控制、实现简易shell)
linux·运维·服务器·数据结构·c++·算法·哈希算法
小蒜学长2 小时前
医疗报销系统的设计与实现(代码+数据库+LW)
数据库·spring boot·学习·oracle·课程设计