# react-playground

**Repository Path**: aimaier4869/react-playground

## Basic Information

- **Project Name**: react-playground
- **Description**: Vite+React+ReactRouter+TS+SemiDesign基础框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-21
- **Last Updated**: 2023-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 学习 React

## 一、准备工作

### 1. 安装 NodeJS

1. 打开 NodeJS 官网https://nodejs.org/zh-cn
2. 下载最新版
3. 一路下一步，即可完成安装

### 2. 设置 npm 源

1. 打开命令行
2. 输入以下命令

```bash
npm config set registry https://registry.npmmirror.com/
```

### 3. 拉取仓库

```bash
git clone https://gitee.com/aimaier4869/react-playground.git
```

## 二、第三方库官方文档地址

1. Vite: https://vitejs.cn/vite3-cn/guide/
2. React: https://zh-hans.react.dev/learn
3. ReactRouter: https://reactrouter.com/en/main
4. SemiDesign: https://semi.design/zh-CN/start/getting-started

## 三、快速开始

### 1. 启动项目

首次启动时需要先安装依赖，在终端执行以下命令

```bash
npm i
```

安装完依赖之后执行以下命令

```bash
npm run dev
```

### 2. 目录结构

```bash
└─src                           # 源码
    ├─assets                    # 静态资源
    ├─pages                     # 页面
    │  └─Home                   # 页面级组件
    │     ├─components          # 页面内的组件
    │     ├─index.module.css    # 页面样式
    │     └─index.tsx           # 页面组件
    └─routers                   # 路由
        └─router.tsx            # 路由文件
```

### 3. 如何添加一个新页面？

1. 在 `src/pages` 下新建你的新页面文件夹 `NewPage`

2. 在 `src/pages/NewPage` 下创建 `index.tsx` 文件

3. 在 `index.tsx` 中导出你的页面组件：

```tsx
const NewPage = () => {
    return <div>NewPage</div>
}

export default NewPage
```

4. 在 `src/routers/index.tsx` 中导入新页面

```tsx
import NewPage from '../pages/NewPage'
```

5. 在数组 `router` 中配置你的路由

```tsx
{
    path: '/new-page',
    element: <NewPage />,
},
```