react网格生成_如何在React中构建实时可编辑数据网格

react网格生成

by Peter Mbanugo

彼得·姆巴努戈(Peter Mbanugo)

如何在React中构建实时可编辑数据网格 (How to Build a Real-time Editable Datagrid In React)

A datagrid enables you to display and edit data. This is a vital feature in most data-driven applications.

数据网格使您可以显示和编辑数据。 在大多数数据驱动的应用程序中，这是至关重要的功能。

You may have implemented this in one of your React apps in the past. Maybe you used libraries like react-bootstrap-table, react-grid, or react-table. With those, you can add a Datagrid to your React app. But what if you want the changes to be done in real-time and updates synchronized across all connected devices and their browsers?

您过去可能已经在您的一个React应用中实现了这一点。 也许您使用了诸如react-bootstrap-table ， react-grid或react-table之类的库 。 有了这些，您可以将Datagrid添加到您的React应用程序中。 但是，如果您希望实时进行更改并在所有连接的设备及其浏览器之间同步更新，该怎么办？

In this article, I will show you how to build a real-time datagrid in React using react-table and Hamoni Sync.

在本文中，我将向您展示如何使用react-table和Hamoni Sync在React中构建实时数据网格。

react-table is a lightweight and fast library for rendering tables in React, and it supports pagination and many more features.

react-table是一个轻量级，快速的库，用于在React中渲染表，它支持分页和许多其他功能。

Hamoni Sync is a real-time state synchronization service which enables you to synchronize your application state in real-time. I will show you how to build a datagrid with people’s first and last names.

Hamoni Sync是一种实时状态同步服务，使您可以实时同步应用程序状态。 我将向您展示如何使用人们的名字和姓氏构建数据网格。

If you want to follow along, you should have some knowledge of React and have the following tools installed:

如果您想继续学习，那么您应该对React有所了解，并安装了以下工具：

1. NodeJS

   节点JS

2. npm & npx. If you have installed npm version 5.2.0 or greater, it installs npx alongside npm.

   npm和npx 。 如果您已安装npm 5.2.0或更高版本，它将与npm一起安装npx。

3. create-react-app

   创建React应用

创建React应用 (Create the React app)

First we will create a new React project using create-react-app.

首先，我们将使用create-react-app创建一个新的React项目。

Open the command line and run npx create-react-app realtime-react-datatable. This will bootstrap a React application for us by creating a new directory realtime-react-datatable with the files needed to build a React application.

打开命令行并运行npx create-react-app realtime-react-datatable 。 这将通过使用构建React应用程序所需的文件创建一个新目录realtime-react-datatable为我们引导一个React应用程序。

With the React app created, we need to install react-table and Hamoni Sync. Still on the command line, run cd realtime-react-datatable to switch to the directory for the app. Run npm i react-table hamoni-sync in the command line to install both packages.

创建React应用程序后，我们需要安装react-table和Hamoni Sync。 仍然在命令行上，运行cd realti