# react-start react集成开发（template）模板

**Repository Path**: shadow-cheng/react-start

## Basic Information

- **Project Name**: react-start react集成开发（template）模板
- **Description**: React Start是一个基于Vite + React + TypeScript + Eslint + Prettier + Axios + Less 的React（template）模板。 可以帮助你节省项目搭建和配置时间，快速搭建一个开箱即用React项目。适合新手入门学习，也适合初、中级开发者用于企业项目开发。
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-03-09
- **Last Updated**: 2023-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, TypeScript, Eslint, Prettier, Axios

## README

<h1 align='center'>React Start ⚡</h1>

React Start是一个基于**Vite** + **React** + **TypeScript** + **Eslint** + **Prettier** + **Axios** + **Less**
的React（template）模板。
可以帮助你节省项目搭建和配置时间，快速搭建一个开箱即用React项目。适合新手入门学习，也适合初、中级开发者用于企业项目开发。

#### **仓库地址: https://gitee.com/shadow-cheng/react-start**

![image](/src/assets/background_1.png)

## **项目结构 🗂️**

```
|-- react-start
    |-- .idea------------------------webstorm配置文件
    |-- .vscode----------------------vscode配置文件 
    |-- node_moduless----------------依赖包目录
    |-- src--------------------------项目工程文件  
        |-- components---------------组件目录
        |   |-- Hello----------------组件示例
        |       |-- index.tsx
        |-- server-------------------接口目录
        |   |-- axios_creater.ts-----axiox封装 
        |   |-- api------------------接口封装目录
        |       |-- api_demo.ts------接口封装示例
        |-- assets-------------------静态文件目录
        |-- utils--------------------工具库目录
        |-- App.tsx------------------项目挂载入口
        |-- index.css----------------全局样式
        |-- logo.svg-----------------标题栏logo
        |-- main.tsx-----------------项目入口文件
        |-- vite-env.d.ts------------vite环境变量
    |-- .eslintignore----------------eslint忽略配置
    |-- .eslintrc--------------------eslint配置
    |-- .gitignore-------------------git忽略配置
    |-- .prettierignore--------------prettier忽略配置
    |-- .prettierrc------------------prettier配置
    |-- index.html-------------------首页模板文件
    |-- package-lock.json------------依赖包版本锁定信息
    |-- package.json-----------------依赖包配置信息
    |-- README.md--------------------介绍文件
    |-- tsconfig.json----------------typescript配置文件
    |-- vite.config.ts---------------vite配置文件
    |-- yarn.lock--------------------yarn指定依赖包信息
```

## **使用 📋**

1、克隆仓库到本地

```bash
https://gitee.com/shadow-cheng/react-start.git
```

2、国内用户切换淘宝镜像源

```bash
yarn config set registry https://registry.npmmirror.com/ // 此命令将会更改yarn的全局镜像源
```

3、安装依赖

```bash
yarn install
```

4、运行

```bash
yarn dev
```

5、eslint检测

```bash
yarn lint
```

6、生产环境打包

```bash
yarn build
```

## **Eslint、Prettier配置 ✍️**

配置之前需在编辑器各自插件市场下载Eslint、Prettier插件

### webStorm

#### Eslint

文件 --》设置 --》语言和框架 --》JavaScript --》代码质量工具 --》Eslint，选中“手动ESlint配置”，添加本地项目Eslint配置文件
![image](/src/assets/webstorm_eslint.png)

#### Prettier

文件 --》设置 --》语言和框架 --》JavaScript --》Prettier，选择本地项目的prettier
![image](/src/assets/webstorm_prettier.png)

### vsCode

安装插件即可

## **代码格式 📋**

### 命名

- 组件以帕斯卡命名法，如：`AlertToast`
- 常量：全大写，以下划线 `_` 连接
- 方法名、变量名、属性名使用驼峰命名法
- 文件、文件夹名全小写，以下划线 `_` 连接，避免不同系统间路径大小写敏感问题
- 名称要正确描述变量所代表的内容，或者方法所执行的动作

### 样式

样式 `class` 采用 `BEM` 命名规范，以 `cos` 为前缀。
BEM 是块（block）、元素（element）、修饰符（modifier）的缩写。尽量避免在dom结构中
书写style行内样式。

- block 和 element 用双下划线 __ 链接
- element 和 modifier 用中划线 – 链接，如表示按钮的不同状态

举例：`page-cell__title`

## **写在最后 🌸**

很多初学者，在刚接触的时候，需要花费大量时间去搭建一个可运行的项目，
或者是在一个小公司，前端只有自己一个人，无法快速搭建一个规范的前端运行框架。
这便是我发起这个项目的初衷，跳过项目搭建的过程，快速进行业务需求开发。
目前这个模板，已用于我工作公司生产环境，可支撑起中小公司的前端业务开发需求，可放心使用。

大家互相勉励，加油！