下载react+ts（typescript）框架，集成样式库（styled-components）和路由库（react-router-dom）

背景：这章介绍如何下载react+ts框架，并简单使用，并下载两个库，一个样式库，一个路由库

• styled-components
• react-router-dom

简单介绍使用版本：

• node版本：16.9.1
• npm版本：7.21.1
• react版本：18.3.1
• styled-components版本：6.1.11
• @types/react-router-dom版本：5.3.3
• react-router-dom版本：5.3.4

如图：

一、下载项目

在选定好的目录下cmd进入黑窗口，运行命令

npx create-react-app my-react-test --template typescript

备注： my-react-test：项目名称

项目启动命令为：

npm start

如图：

二、下载库

1.下载样式库styled-components

①在项目根目录下输入命令：

npm install styled-components -S

如图：

②使用

直接在页面中引入使用
Eg：

2.下载路由库react-router-dom

①在项目根目录下输入命令

npm install --save-dev @types/react-router-dom

和

npm install --save-dev react-router-dom@5.3.4

如图：

②路由的使用

<1>准备：

在代码中找到index.tsx，并在src下创建router文件夹，在router文件夹下创建index.tsx文件用于存放路由
项目目录如图：

<2>代码修改

src / index.tsx文件

src / router / index.tsx文件