本文详细介绍了如何从零开始搭建一个 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
© 著作权归作者所有,转载或内容合作请联系作者
喜欢的朋友记得点赞、收藏、关注哦!!!