---
title: "React Integration | Docs"
description: "Use ZingGrid with React. Check out this quick walkthrough on how to add ZingGrid to your React project."
url: https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/react
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/integrations/js-frameworks-&-libs/react.md
mode: provenance
representation: markdown
origin_response_id: 362019a070ad236321c2e7c464594cc4
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.731Z
version_nonce: 008dc8aaab2d85ae929fcd7eec318916
generated_at_utc: 2026-11-08T23:36:16.188Z
response_nonce: b0f4e93a23a1823d9a86ee124e18a35f
```

# React Integration
ZingGrid works with your development stack, including React! In this guide, we'll walk you through how to add ZingGrid to your React project. This article covers using ZingGrid with React hooks (v16.8 and up).

## Usage

1. For this example we'll start with a new React app:

    ```shell
    npx create-react-app zinggrid-react-helloworld
    cd zinggrid-react-helloworld
    npm install zinggrid
    npm start
    ```

    You can now view the app in a browser at `localhost:3000`.

2. In `App.js`, import ZingGrid:

    ```javascript
    import 'zinggrid';
    ```

3. Remove the contents of the `App()` function and replace them with this line below. You may also remove the `import logo...` statement, we won't be needing it.

    ```javascript
    return <zing-grid />
    ```

    When you save the file, the page should refresh and show an empty ZingGrid, with the message `There are no records to display`.

4. Let's add some data and update the `zinggrid` component to show it. Here's the full `App.js` file for this example:

```javascript
import './App.css';
import 'zinggrid'

function App() {
  const data = [
    {"name": "Sousage", "breed": "Dachshund"},
    {"name": "Plop", "breed": "Corgi"},
    {"name": "Floof", "breed": "Pomeranian"}
  ]

  return <zing-grid caption="Dogs" data={JSON.stringify(data)} />
}

export default App;
```

For more details on integrating ZingGrid into a React app, see [this article](https://blog.zingsoft.com/using-zinggrid-with-react-17/).