网站建站服务公司地址_全国企业信用信息公示系统山西_如何创建一个网页_推广网站都有哪些

本文详细介绍了如何从零开始搭建一个 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​

文章及代码中如有问题，欢迎指正，谢谢！