我如何构建我的 React /TS 应用程序（2021）

2025-05-24

我如何构建我的 React /TS 应用程序（2021）

（代码托管于： https: //github.com/djamaile/react-boilerplate-2021）

（去年的帖子：https ://dev.to/djamaile/how-i-structure-my-react-ts-applications-160g ）

去年，我写了一篇关于如何构建我的 ReactJS 项目的文章。现在又到了暑假，我对项目结构做了一些调整。不过说实话，改动不大，因为 React 最终变化不大（这倒是件好事）。所以，在这篇文章中，我会重点介绍一下我修改/添加的内容。

让我们首先从整个文件夹结构的图片开始！

文件夹结构

现在让我们讨论一下变化:)

📖 API

在 API 文件夹中，我现在只有一个通用的请求函数，我添加的是 react-query。如果你不熟悉 react-query，它是一个用于获取服务器状态的库。React-query 具有很多强大的功能，例如缓存、数据同步等。

在这个项目中，我通过仅添加一个来保持 react-query 非常简单defaultQueryFn，如下所示：



import axios, { Method, AxiosResponse } from "axios";

const api = axios.create({
  // baseURL: process.env.REACT_APP_HOST_BACKEND,
  baseURL: "https://rickandmortyapi.com/api",
});

const request = <T>(
  method: Method,
  url: string,
  params: any
): Promise<AxiosResponse<T>> => {
  return api.request<T>({
    method,
    url,
    params,
  });
};

// Define a default query function that will receive the query key
export const defaultQueryFn = async ({ queryKey }: any): Promise<unknown> => {
  const data = await request(queryKey[0], queryKey[1], queryKey[2]);
  return data;
};
Enter fullscreen mode Exit fullscreen mode

如你所见，defaultQueryFn正在调用该request函数。现在我们可以将其添加到我们的主视图中，并像这样QueryClient调用该功能：useQuery



import React from "react";
import "../../styles/home.css";
import { useQuery } from "react-query";
import { Header } from "../../components";

const Home: React.FC = () => {
  const { data, error, isFetching } = useQuery(["GET", "/character", {}]);

  if (isFetching) return <p>Is loading...</p>;

  if (error) return <p>${error}</p>;

  console.log(data);

  return (
    <div className="App">
      <Header />
    </div>
  );
};

export default Home
Enter fullscreen mode Exit fullscreen mode

我仍在尝试使用 React-Query，看看如何更好地使用它。目前为止，我的使用方法如下。

🧪 测试/Cypress

是的，就是那个臭名昭著的测试文件夹。我最后居然把它删掉了！我还留着测试，但我直接把它们放到了 views/[view] 文件夹里。

组件中的测试代码

我必须承认，我不再像以前那样频繁地使用 Jest 了。我已经改用 Cypress 了。Cypress 是一款端到端测试工具，到目前为止我都很喜欢它。所以，cypress/integration/404_page.ts你可以看到我有一个规范测试，测试当用户访问到 404 页面时，是否可以返回主页。



describe('404 page', function() {
    it('should give the option to return to home', function() {
        cy.visit("/does-not-exists");
        cy.contains('Return to Home');
        cy.get('a')
          .click()
       cy.contains('Learn React', {timeout: 10000}) 
    });
});
Enter fullscreen mode Exit fullscreen mode

🐳 Docker

我还在我的默认仓库中添加了 Dockerfiles。我有两个独立的 Dockerfiles，一个用于开发，一个用于生产。



FROM node:15-alpine AS builder

WORKDIR /app

COPY . .

RUN yarn install 

RUN yarn build

FROM nginx:stable-alpine

WORKDIR /usr/share/nginx/html

RUN rm -rf *

COPY --from=builder /app/build .

ENTRYPOINT ["nginx", "-g", "daemon off;"
Enter fullscreen mode Exit fullscreen mode

要构建图像，请使用：



$ docker build -t djam97/react-boilerplate-2021:prod -f docker/Dockerfile.prod .
Enter fullscreen mode Exit fullscreen mode

☸️ Kubernetes

我每天都使用 Kubernetes，所以我也添加了一些 k8s 清单。它们虽然非常简陋，但足以完成工作，而且易于扩展。



apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-boiler-plate
  labels:
    app: react-boiler-plate
spec:
  replicas: 1
  selector:
    matchLabels:
      app: react-boiler-plate
  template:
    metadata:
      labels:
        app: react-boiler-plate
    spec:
      containers:
        - name: react-boiler-plate
          image: djam97/react-boilerplate-2021:prod
          imagePullPolicy: Never
          ports:
            - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: react-boiler-plate-service
spec:
  selector:
    app: react-boiler-plate
  ports:
    - protocol: TCP
      port: 3000
      targetPort: 3000
Enter fullscreen mode Exit fullscreen mode

要应用清单，请使用：



$ kubectl apply -f k8s/
Enter fullscreen mode Exit fullscreen mode

😺 Github 工作流程

我还添加了一个 Github 操作，用于将你的 React 应用部署到 Github 页面。这对于初始测试或你的网站不在自己的服务器上运行的情况非常有用。



name: Deploy site

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    continue-on-error: true
    strategy:
      matrix:
        node-version: [14.x]
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: "14.x"
      - name: Get yarn cache
        id: yarn-cache
        run: echo "::set-output name=dir::$(yarn cache dir)"
      - name: Cache dependencies
        uses: actions/cache@v1
        with:
          path: ${{ steps.yarn-cache.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-
      - name: Yarn installation
        run: yarn install && CI='' yarn build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.ACCESS_TOKEN }}
          publish_dir: ./buil
Enter fullscreen mode Exit fullscreen mode

如果你也想使用它，需要执行以下步骤。首先，你需要在 GitHub 中创建一个个人访问令牌，并将其作为 secret 添加到你的仓库中ACCESS_TOKEN。最后，在package.json
Enter fullscreen mode Exit fullscreen mode




🗄️ 额外文件

除了常见的 Prettier、eslint 和 Husky 设置外，我还添加了一项功能，@commitlint/config-conventional以确保每次提交都符合约定式提交的要求。如果您不知道约定式提交是什么，可以在这里阅读：https://www.conventionalcommits.org/en/v1.0.0/#summary

文章来源：https://dev.to/djamaile/how-i-struct-my-react-ts-applications-2021-145j
Devto 翻译
PREV
关于 SSH 我想要记住的事情
NEXT
OpenCommit：GPT 在 1 秒内生成令人印象深刻的提交🤯🔫（开源）