効率的なコード管理のための React ツールセット

はじめに

このドキュメントでは、厳選されたツール セットとベスト プラクティスを使用して React アプリケーションを構築および管理するための包括的なアプローチの概要を説明します。これらのガイドラインに従うことで、スケーラブルで保守性の高い効率的なアプリケーションを作成できます。

状態管理

ズスタンド:

• 目的: グローバル アプリケーションの状態を管理するためのシンプルでパフォーマンスの高い方法を提供します。
• 利点:
  • 明確かつ簡潔な API。
  • 効率的なアップデートとパフォーマンスの最適化。
  • アプリケーションの他の部分と簡単に統合できます。
• 例:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

クエリへの反応:

• 目的: 非同期データのフェッチとキャッシュを管理します。
• 利点:
  • データの自動フェッチとキャッシュ。
  • 読み込み、エラー、成功の状態を簡単に処理します。
  • 組み込みクエリの無効化と再取得。
• 例:

import { useQuery } from 'react-query';

const fetchUsers = async () => {
  const response = await fetch('https://api.example.com/users');
  return response.json();
};

const UsersList = () => {
  const { isLoading, isError, data, error } = useQuery('users', fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

データ操作

突然変異:

• 目的: ユーザーのアクションまたは API 呼び出しによってトリガーされる状態の変更を処理します。
• 利点:
  • 一元化された突然変異ロジック。
  • React Query との簡単な統合により、楽観的な更新が可能です。
• 例:

import { useMutation } from 'react-query';

const createUser = async (userData) => {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData),
  });
  return response.json();
};

const CreateUserForm = () => {
  const [createUserMutation] = useMutation(createUser);

  const handleSubmit = (userData) => {
    createUserMutation(userData)
      .then(() => {
        // Handle success
      })
      .catch((error) => {
        // Handle error
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="submit">Create User</button>
    </form>
  );
};

テーブル管理

TanStack テーブル:

• 目的: 柔軟でパフォーマンスの高いテーブル コンポーネントを提供します。
• 利点:
  • カスタマイズ可能で拡張可能です。
  • 大規模なデータセットと複雑なインタラクションをサポートします。
  • データ取得のために React Query と適切に統合されます。
• 例:

import { useTable } from 'tanstack/react-table';

const columns = [
  { header: 'Name', accessor: 'name' },
  { header: 'Email', accessor: 'email' },
];

const data = [
  { name: 'John Doe', email: 'john@example.com' },
  // ...
];

const TableComponent = () => {
  const { getTableProps, getTableBodyProps, headerGroups, rows } = useTable({
    columns,
    data,
  });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => (
          <tr {...row.getRowProps()}>
            {row.cells.map((cell) => (
              <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

コンポーネント ライブラリ

基数 UI:

• 目的: ヘッドレス UI コンポーネントのコレクションを提供します。
• 利点:
  • カスタマイズ可能で柔軟です。
  • スタイルを設定せずにコア機能に焦点を当てます。
  • アクセシビリティ標準と適切に統合されています。
• 例:

import { Menu } from '@radix-ui/react-menu';

const MenuComponent = () => {
  return (
    <Menu>
      <Menu.Button>Open Menu</Menu.Button>
      <Menu.Items>
        <Menu.Item>Item 1</Menu.Item>
        <Menu.Item>Item 2</Menu.Item>
      </Menu.Items>
    </Menu>
  );
};

Tailwind CSS:

• 目的: ユーティリティファーストの CSS フレームワーク。
• 利点:
  • 迅速な開発とスタイリング。
  • 一貫した予測可能なスタイル。
  • 簡単にカスタマイズ可能。
• 例:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

フォーム管理

Yup とのフォーミック:

• 目的: フォームの状態、検証、送信を処理します。
• 利点:
  • 簡素化されたフォーム管理。
  • 宣言的な検証ルール。
  • 他のライブラリと簡単に統合できます。
• 例:

import { useQuery } from 'react-query';

const fetchUsers = async () => {
  const response = await fetch('https://api.example.com/users');
  return response.json();
};

const UsersList = () => {
  const { isLoading, isError, data, error } = useQuery('users', fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

TypeScript

• 目的: JavaScript の静的に型指定されたスーパーセット。
• 利点:
  • コードの品質と保守性が向上しました。
  • エラーの早期検出。
  • タイプ セーフティとコード補完が向上しました。

プロジェクトの構造

ソース/
§── コンポーネント/
│ §── Button.jsx
│ §──Input.jsx
│ └── ...
§── ページ/
│ §── Home.jsx
│ │ コンポーネント/
│ │ §── Hero.jsx
│ │ └─ ...
│ §── About.jsx
│ └── ...
§── lib/
│ §── utils.js
│ └── ...
§── アクション/
│ §── api.js
│ └── ...
§── 店舗/
│ §── counterStore.js
│ └── ...

結論

これらのガイドラインに従い、推奨ツールを利用することで、堅牢でスケーラブルで保守可能な React アプリケーションを構築できます。このアプローチにより、コードの編成、再利用性、効率的な状態管理が促進され、開発エクスペリエンスが向上し、ソフトウェアの品質が向上します。

以上が効率的なコード管理のための React ツールセットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。