Comment créer un composant de table réutilisable à l'aide de Go et React

Avec la complexité croissante des applications Web, les tableaux sont devenus l'un des composants nécessaires de nombreuses applications Web. Cependant, construire une table puissante et facile à entretenir nécessite un investissement important en temps et en efforts. Pour résoudre ce problème, nous pouvons utiliser le langage Go et React pour créer un composant de table réutilisable à utiliser dans plusieurs projets.

Dans cet article, nous présenterons comment créer des composants de table en utilisant le langage Go et React, vous permettant de les réutiliser facilement dans vos projets.

1. Comprendre les bases du composant table

Avant de commencer à construire le composant table, nous devons comprendre certains concepts de base. Le composant tableau se compose généralement des parties suivantes :

• En-tête : affiche le titre de la colonne
• Rangée : chaque ligne contient un groupe de cellules. Les données contenues dans les cellules peuvent être du texte, des chiffres, des images, etc.
• Colonnes : chaque colonne contient un groupe de cellules. Une colonne décrit généralement un attribut ou des données dans une table.

2. Installez le langage Go et React

Si vous n'avez pas encore installé le langage Go et React, veuillez d'abord les installer. Vous pouvez les télécharger et les installer à partir des liens suivants :

• Langue Go : https://golang.org/
• React : https://reactjs.org/

Une fois l'installation terminée, veuillez vous assurer que votre Allez en version Au moins 1.11 et votre version de React est au moins 16.x.

3. Créer un composant de table de base

Maintenant, créons un composant de table de base. Nous allons créer un composant en utilisant React et traiter les données en arrière-plan en utilisant le langage Go. Tout d'abord, nous devons créer un nouveau projet en langage Go dans la ligne de commande :

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

Ensuite, nous devons créer un nouveau composant React dans le projet. Dans le répertoire racine du projet, exécutez la commande suivante :

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

Maintenant que nous avons créé un projet React, écrivons un composant table de base. Créez un fichier nommé "Table.js" dans le répertoire src. Dans ce fichier, nous allons écrire du code pour créer une table de base.

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;

Dans ce composant, nous recevons deux propriétés : les colonnes et les lignes. L'attribut columns est un tableau contenant les titres de toutes les colonnes du tableau et l'attribut rows est un tableau contenant les données de toutes les lignes du tableau. Dans le composant, nous utilisons la fonction map() pour parcourir ces données et les restituer dans un tableau.

4. Implémenter une interface d'acquisition de données de table

Ensuite, nous devons implémenter une interface en langage Go pour obtenir des données de table. En langage Go, nous pouvons utiliser le framework gin pour créer facilement une API RESTful. Tout d’abord, nous devons installer le framework gin dans le projet. Exécutez la commande suivante dans la ligne de commande :

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

Ensuite, créez un fichier nommé "main.go" dans le répertoire racine du projet et écrivez le code suivant :

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")
}

Dans ce fichier, nous définissons un fichier nommé Row structure, qui contient quatre attributs : ID, Nom, Âge et Localisation. Ensuite, nous définissons un tableau de lignes qui contient les données de toutes les lignes du tableau. Ensuite, nous avons créé une interface API appelée "/api/rows" qui renverra les données de toutes les lignes lorsque la requête arrivera. Enfin, nous avons démarré notre service API en utilisant la méthode r.Run(":8080").

5. Utilisation des composants table dans React

Maintenant, nous avons terminé l'écriture du composant table et de l'interface d'acquisition de données. Rassemblons-les pour implémenter une application de table complète. Tout d'abord, exécutez la commande suivante dans le répertoire racine du projet React pour installer les bibliothèques de composants Axios et React Table :

$ npm install axios react-table

Ensuite, nous devons créer un fichier nommé "App.js" dans le répertoire src et écrire le code suivant :

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;

Dans ce composant, nous utilisons les hooks useState() et useEffect() pour gérer l'état du composant. Dans useEffect(), nous utilisons la bibliothèque Axios pour envoyer une requête GET à notre interface API et définir les données de réponse sur l'état du composant dans la fonction de rappel. Enfin, nous restituons le tableau sur la page en transmettant ces données d'état au composant de table que nous avons créé précédemment.

6. Conclusion

Dans cet article, nous avons construit un composant de table réutilisable en utilisant le langage Go et React et avons créé une application Web simple pour le présenter. En utilisant ces techniques, nous pouvons facilement réutiliser les composants de table et réduire le temps et les efforts d'écriture du code de table dans différents projets. Si vous souhaitez en savoir plus sur le langage Go et React, merci de vous référer à la documentation officielle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!