# react-h5-demo

**Repository Path**: wyb_3/react-h5-demo

## Basic Information

- **Project Name**: react-h5-demo
- **Description**: 使用react H5 的开发模板
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-07-27
- **Last Updated**: 2025-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 目录
- [目录](#目录)
- [初始化项目架构](#初始化项目架构)
- [React 项目](#react-项目)
  - [h5架构](#h5架构)
    - [工具](#工具)
    - [技术栈](#技术栈)
    - [搭建流程](#搭建流程)
    - [关于接口设计](#关于接口设计)
    - [关于类型设计](#关于类型设计)
- [h5 .eslintrc.cjs](#h5-eslintrccjs)
- [h5 vscode setting.json](#h5-vscode-settingjson)
- [axios简单封装](#axios简单封装)
# 初始化项目架构
    一步一步搭建自己的项目架构

# React 项目
## h5架构
    文档编写时间为 2023-8-3 注意依赖版本!
    项目源码👇👇👇

- [项目源代码](https://gitee.com/wyb_3/react-h5-demo)

### 工具
- NodeJs V16.20.0
- Npm V8.19.4
- Vite V4.4.8
- Eslint

### 技术栈
- React V18.2.0
- React-router-dom V6.14.2(路由)
- TypeScript V5.0.2
- Ahooks V3.7.8(hooks工具)
- Axios V1.4.0
- Styled-components (css样式工具)
- Tailwindcss (CSS样式)
- swiper V10.0.4
### 搭建流程
- 一、使用 vite 构建项目
- 二、添加 git
- 三、运行项目
- 四、配置 Eslint 校验代码
- 五、配置 Prettier 格式化代码
- 六、增加 React-router-dom 路由
- 七、增加 Tailwindcss (CSS样式)
- 八、增加 Styled-components (css样式工具)
- 九、增加 移动端布局 (rem配置)
- 十、增加 Ahooks (hooks库)
- 十一、增加 Axios (ajax)
- 十二、增加 swiper (轮播图库)

> 一、Vite构建项目
```sh
npm create vite@latest h5-demo -- -- template react-ts
```

> 二、添加 git
```sh
cd h5-demo
git init
git add .
git commit -m "init"
```

> 三、运行项目
```sh
npm install  # 加载依赖
npm run dev  # 运行项目
```

> 四、配置 Eslint 校验代码
        
    说明：使用vite 生成的代码自带了 eslintrc 文件，所以直接修改校验配置即可 （具体配置文件在文末）
> 五、配置 Prettier 格式化代码


    说明：此处我使用的Vscode来配置Prettier, 你需要下载 vscode的 prettier插件, 然后在 setting.json配置 （具体配置文件在文末）
> 六、配置 React-router-dom 路由
```sh
# 安装 
npm i react-router-dom
```

```tsx
// main.tsx 修改代码
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.tsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
```

```tsx
// 增加组件home 路径src/pages/home/index.tsx 
import React from "react";
import "./style.css";

const UseHome: React.FC = () => {
  return (
    <div className="home">
      home
    </div>
  );
};

export default UseHome;
```

```tsx
// App.tsx 修改代码
import { FC } from "react";
import { Routes, Route } from "react-router-dom";

import UseHome from "./pages/home";
import "./App.css";

const UseApp: FC = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<UseHome />}></Route>
      </Routes>
    </>
  );
};

export default UseApp;

```

> 七、配置 Tailwindcss (CSS样式)

    官方文档介绍比较详细，点击下方👇👇👇
- [Tailwindcss官方文档](https://www.tailwindcss.cn/docs/guides/vite)


> 八、配置 Styled-components

    官方文档介绍比较详细，点击下方👇👇👇
- [Styled-components官方文档](https://styled-components.com/docs/basics#motivation)

```tsx
// 简单例子
import React from "react";
import { styled } from "styled-components";
import "./style.css";

// 配置样式
const Title = styled.h1`
  font-size: 0.75rem;
`;

// 配置属性
const GoodsTitle = styled.p.attrs({
  className: "test-p"
})`
  color: red;
`;

const UseHome: React.FC = () => {
  return (
    <div className="home">
      <h1 className="text-3xl font-bold underline">home</h1>

      <Title>Hello</Title>
      <GoodsTitle>Home</GoodsTitle>
    </div>
  );
};

export default UseHome;


```

> 九、配置 移动端布局
```html
<script>
    var docEl = document.documentElement;
    docEl.style.fontSize = 100 / 375 * docEl.clientWidth + 'px';
    window.addEventListener('resize', function () {
        docEl.style.fontSize = 100 / 375 * docEl.clientWidth + 'px';
    });
</script>
```

> 十、增加 Ahooks

    官方文档介绍比较详细，点击下方👇👇👇
- [ahooks官方文档](https://ahooks.js.org/zh-CN/hooks/use-request/index)


> 十一、增加 Axios

    官方文档介绍比较详细，点击下方👇👇👇
    简单的http封装(文章末尾)
- [axios官方文档](https://www.axios-http.cn/docs/intro)

> 十二、增加 swiper

    官方文档介绍比较详细，点击下方👇👇👇
- [swiper官方文档](https://swiperjs.com/react)

### 关于接口设计
    接口设计思路，以模块的形式，比如 user是一个模块，商品是一个模块，订单是一个模块 目录结构 👇👇👇
![](./create-project-api.png)

### 关于类型设计
    以模块的形式
![](./create-project-tstype.png)

# h5 .eslintrc.cjs 
```cjs
// 修改 .eslintrc.cjs 
module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended"
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parser: "@typescript-eslint/parser",
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true }
    ],
    // **** 新增 ****
    quotes: [2, "double"], // 必须使用双引号
    semi: [2, "always"], // 语句强制分号结尾
    "comma-dangle": [2, "never"], // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号
    eqeqeq: [2, "allow-null"] // 必须使用 ===
  }
};
```

# h5 vscode setting.json


```json
// vscode setting.json
{
  "editor.tabSize": 4,
  "editor.fontSize": 15,
  "launch": {
    "configurations": [],
    "compounds": []
  },
  "http.proxy": "http://127.0.0.1:7890", // 代理
  "json.schemas": [
    
  ],
  "workbench.colorTheme": "Monokai ST3", // vscode主题样式
  "editor.formatOnSave": true, // #每次保存的时候自动格式化
  // ****** 默认代码格式化样式 ******
  "prettier.trailingComma": "none", // {} 最后不要 ,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
  },
  "[go]": {
    "editor.insertSpaces": true,
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  },
  "files.associations": {
    "*.jsx": "javascriptreact",
    "*.tsx": "typescriptreact"
  },
  // ****** 校验 ******
  "eslint.enable": true, // 是否启动 eslint
  "prettier.useEditorConfig": false, // 使用编辑器配置
}

```


# axios简单封装

```ts
import axios from "axios";

// 创建 axios 实例
const service = axios.create({
  /* 基础地址 一般都是动态的 */
  baseURL: GLOBAL_API_URL,
  /* 请求类型定义 */
  // headers: {
  //   'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  // },
  /* 如果用的JSONP，可以配置此参数带上cookie凭证，如果是代理和CORS不用设置 */
  withCredentials: false,
  /* 请求超时时间 */
  timeout: 6000
});

/**
 * http request 拦截器
 */
service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("szd_token"); /* 获取token */
    if (token) {
      /* 让每个请求携带自定义 token 请根据实际情况自行修改 */
      config.headers["token"] = `${token}`;
    }
    if (config.method === "get") {
      /* 让每个请求都携带一个不同的时间参数，防止浏览器缓存不发送请求 */
      config.params = {
        ...config.params
      };
    }

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

/**
 * http response 拦截器
 */
service.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    console.log("请求出错：", error);
  }
);

export default service;

```