React h5架构

目录

• 目录
• 初始化项目架构
• React h5架构
• 工具
• 技术栈
• 搭建流程
  • 一、Vite构建项目
  • 二、添加 git
  • 三、运行项目
  • 四、配置 Eslint 校验代码
  • 五、配置 Prettier 格式化代码
  • 六、配置 React-router-dom 路由
  • 七、配置 Tailwindcss (CSS样式)
  • 八、配置 Styled-components
  • 九、配置 移动端布局
  • 十、增加 Ahooks
  • 十一、增加 Axios
  • 十二、增加 swiper
  • 关于接口设计
  • 关于类型设计
• h5 .eslintrc.cjs
• h5 vscode setting.json
• axios简单封装

初始化项目架构

一步一步搭建自己的React h5项目架构

React h5架构

文档编写时间为 2023-8-3 注意依赖版本!
项目源码

• 项目源代码

工具

• 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构建项目

npm create vite@latest h5-demo -- -- template react-ts

二、添加 git

cd h5-demo
git init
git add .
git commit -m "init"

三、运行项目

npm install  # 加载依赖
npm run dev  # 运行项目

四、配置 Eslint 校验代码

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

五、配置 Prettier 格式化代码

说明：此处我使用的Vscode来配置Prettier, 你需要下载 vscode的 prettier插件, 然后在 setting.json配置 （具体配置文件在文末）

六、配置 React-router-dom 路由

# 安装
npm i react-router-dom

// 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>
);

// 增加组件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;

// 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官方文档

八、配置 Styled-components

官方文档介绍比较详细，点击下方

• Styled-components官方文档

// 简单例子
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;

九、配置 移动端布局

<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官方文档

十一、增加 Axios

官方文档介绍比较详细，点击下方
简单的http封装(文章末尾)

• axios官方文档

十二、增加 swiper

官方文档介绍比较详细，点击下方

• swiper官方文档

关于接口设计

接口设计思路，以模块的形式，比如 user是一个模块，商品是一个模块，订单是一个模块 目录结构

关于类型设计

以模块的形式

h5 .eslintrc.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

// 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简单封装

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;