Go と React を使用して再利用可能なテーブルコンポーネントを構築する方法-Golang-php.cn

Go と React を使用して再利用可能なテーブルコンポーネントを構築する方法

王林

リリース： 2023-06-17 17:34:40

オリジナル

1192 人が閲覧しました

Web アプリケーションの複雑さが増し続けるにつれて、テーブルは多くの Web アプリケーションに必要なコンポーネントの 1 つになりました。ただし、強力で保守が容易なテーブルを構築するには、多大な時間と労力を投資する必要があります。この問題を解決するには、Go 言語と React を使用して、複数のプロジェクトで使用する再利用可能なテーブルコンポーネントを構築します。

この記事では、Go 言語と React を使用してテーブルコンポーネントを構築し、プロジェクトで簡単に再利用できるようにする方法を紹介します。

テーブルコンポーネントの基本を理解する

テーブルコンポーネントの構築を開始する前に、いくつかの基本概念を理解する必要があります。テーブルコンポーネントは通常、次の部分で構成されます。

Header: 列のタイトルを表示します。
Row: 各行にはセルのグループが含まれます。セル内のデータは、テキスト、数値、画像などです。
列: 各列にはセルのグループが含まれます。通常、列はテーブル内の属性またはデータを記述します。

Go 言語と React のインストール

Go 言語と React をインストールしていない場合は、最初にインストールしてください。次のリンクからダウンロードしてインストールできます:

Go 言語: https://golang.org/
React: https://reactjs.org/

インストールが完了したら、Go のバージョンが 1.11 以降、React のバージョンが 16.x 以降であることを確認してください。

基本的なテーブルコンポーネントの作成

次に、基本的なテーブルコンポーネントを作成しましょう。 Reactを使用してコンポーネントを作成し、Go言語を使用してバックグラウンドでデータを処理します。まず、コマンドラインで新しい Go 言語プロジェクトを作成する必要があります。

$ mkdir my-table-app
$ cd my-table-app
$ go mod init my-table-app

ログイン後にコピー

次に、プロジェクト内に新しい React コンポーネントを作成する必要があります。プロジェクトのルートディレクトリで、次のコマンドを実行します。

$ npx create-react-app my-table-app
$ cd my-table-app

ログイン後にコピー

React プロジェクトを作成したので、基本的なテーブルコンポーネントを作成しましょう。 src ディレクトリに「Table.js」という名前のファイルを作成します。このファイルには、基本的なテーブルを作成するコードを記述します。

import React from 'react';

function Table(props) {
  return (
    <>
      <table>
        <thead>
          <tr>
            {props.columns.map(column => (
              <th>{column}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {props.rows.map(row => (
            <tr>
              {Object.values(row).map(value => (
                <td>{value}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

export default Table;

ログイン後にコピー

このコンポーネントでは、列と行という 2 つのプロパティを受け取ります。 columns 属性はテーブル内のすべての列のタイトルを含む配列であり、rows 属性はテーブル内のすべての行のデータを含む配列です。コンポーネントでは、map() 関数を使用してこのデータを反復処理し、テーブルにレンダリングします。

テーブルデータ取得インターフェイスの実装

次に、テーブルデータを取得するインターフェイスを Go 言語で実装する必要があります。 Go言語ではginフレームワークを利用してRESTful APIを簡単に作成できます。まず、プロジェクトに gin フレームワークをインストールする必要があります。コマンドラインで次のコマンドを実行します。

$ go get -u github.com/gin-gonic/gin

ログイン後にコピー

次に、プロジェクトのルートディレクトリに「main.go」という名前のファイルを作成し、次のコードを記述します。

package main

import (
    "net/http"

    "github.com/gin-gonic/gin"
)

type Row struct {
    ID       int
    Name     string
    Age      int
    Location string
}

var rows = []Row{
    {1, "John", 28, "New York"},
    {2, "Jane", 32, "Chicago"},
    {3, "Mary", 24, "San Francisco"},
    {4, "Bob", 41, "Miami"},
}

func main() {
    r := gin.Default()

    r.GET("/api/rows", func(c *gin.Context) {
        c.JSON(http.StatusOK, gin.H{
            "rows": rows,
        })
    })

    r.Run(":8080")
}

ログイン後にコピー

このファイルには、 ID、名前、年齢、場所の 4 つの属性を含む Row という名前の構造を定義します。次に、テーブル内のすべての行のデータを含む配列 rows を定義します。次に、リクエストが到着したときにすべての行のデータを返す「/api/rows」という API インターフェイスを作成しました。最後に、r.Run(":8080") メソッドを使用して API サービスを開始しました。

React でテーブルコンポーネントを使用する

これで、テーブルコンポーネントとデータ取得インターフェイスの作成が完了しました。これらを組み合わせて、完全なテーブルアプリケーションを実装してみましょう。まず、React プロジェクトのルートディレクトリで次のコマンドを実行して、Axios および React Table コンポーネントライブラリをインストールします。

$ npm install axios react-table

ログイン後にコピー

次に、src ディレクトリに「App.js」という名前のファイルを作成し、次のように記述する必要があります。次のコードを入力します。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Table from './Table';
import './App.css';
import 'react-table/react-table.css';

function App() {
  const [columns, setColumns] = useState([]);
  const [rows, setRows] = useState([]);

  useEffect(() => {
    axios.get('/api/rows').then(response => {
      setColumns(Object.keys(response.data.rows[0]));
      setRows(response.data.rows);
    });
  }, []);

  return (
    <div className="App">
      <h1>My Table App</h1>
      <Table columns={columns} rows={rows} />
    </div>
  );
}

export default App;

ログイン後にコピー

このコンポーネントでは、useState() フックと useEffect() フックを使用してコンポーネントの状態を管理します。 useEffect() では、Axios ライブラリを使用して GET リクエストを API インターフェイスに送信し、コールバック関数で応答データをコンポーネントの状態に設定します。最後に、この状態データを前に作成したテーブルコンポーネントに渡すことによって、テーブルをページ上にレンダリングします。

結論

この記事では、Go 言語と React を使用して再利用可能なテーブルコンポーネントを構築し、それを紹介する単純な Web アプリケーションを作成しました。これらの手法を使用すると、テーブルコンポーネントを簡単に再利用でき、さまざまなプロジェクトでテーブルコードを記述する時間と労力を削減できます。 Go 言語と React について詳しく知りたい場合は、公式ドキュメントを参照してください。

以上がGo と React を使用して再利用可能なテーブルコンポーネントを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。