This documentation is for an older version of GoodData. Go to the latest version of this article.

React Quick Start

Version 9 vs Versions 10+

GoodData Platform users must stay on GoodData.UI version 9, do not update to version 10 or higher! From version 10 onwards, the GoodData.UI SDK only supports GoodData Cloud and GoodData.CN.

The easiest way to get hands-on experience with GoodData.UI is to use the @gooddata/app-toolkit, which contans a sample setup for a React app

To see it in action:

Run npx @gooddata/app-toolkit@latest init
Follow instructions on the screen

Quick Introduction

The project includes:

A set of useful scripts:
- npm start - to start the dev server.
- npm run build - to bundle production version of the app.
- npm run clean - to clear the results of the previous build.
- npm run refresh-md - to update the metadata catalogue.
A development proxy to easily connect to the public demo data for visualizations without the need to work around CORS.
An example code for GoodData Rect SDK in the App.tsx file.

What’s next?

What can you do with this project?

Here are a few ideas:

Try a different visualization
Build a visualization programmatically
Consume the raw data
Apply theming
Connect your own data from GoodData Cloud or GoodData.CN servers

Try a different visualization

By default, the project is configured to render a simple visualization from the demo workspace. So let’s render a Dashboard instead!

It’s an easy 2 step solution. In App.tsx simply:

Import the Dashboard component instead of the InsightView component.
```
-   import { InsightView } from "@gooddata/sdk-ui-ext";
+   import { Dashboard } from "@gooddata/sdk-ui-dashboard";
```
The term ‘insight’ is an obsolete expression for ‘visualizations’ but is still employed within the SDK’s components and functions.

Replace the component used in JSX and provide the correct dashboard reference from the metadata catalog.

-   <InsightView insight={Md.Insights.ProductCategoriesPieChart} />
+   <Dashboard dashboard={Md.Dashboards._1Overview} />

To learn more, see Dashboard component.

Build a visualization programmatically

If you don’t want to use the pre-built visualization, you can easily define your visualization programatically!

Let’s build a simple pie chart in two steps!

In App.tsx file:

Import the PieChart component instead of the InsightView component.

-   import { InsightView } from "@gooddata/sdk-ui-ext";
+   import { PieChart } from "@gooddata/sdk-ui-charts";

Replace the component used in JSX and provide metrics and an attribute to view the data by.

-   <InsightView insight={Md.Insights.ProductCategoriesPieChart} />
+   <PieChart measures={[Md.PercentRevenue]} viewBy={Md.Category_1} />

Consume the raw data

Sometimes it’s useful to get the raw data and use it to build a custom visualization or just use it in your app’s business logic.

Get your data in three steps:

Create a new component that renders the same pie chart as a table. Create a new file ./src/MyTable.tsx:

import React from "react";
import { useInsightDataView } from "@gooddata/sdk-ui";
import { idRef } from "@gooddata/sdk-model";
import * as Md from "./catalog";

export const MyTable = () => {
    const { result, error, status } = useInsightDataView({
        insight: idRef(Md.Insights.ProductCategoriesPieChart),
    });

    if (error) {
        console.error(error);
        return <div>Error...</div>;
    }

    if (status !== "success" || !result) return <div>Loading...</div>;

    const slices = result.data().slices().toArray();

    return (
        <table>
            <tbody>
                {slices.map((slice) => {
                    const title = slice.sliceTitles().join(" - ");
                    const value = slice
                        .dataPoints()
                        .map((dp) => dp.rawValue)
                        .join(", ");

                    return (
                        <tr key={title}>
                            <td>{title}</td>
                            <td>{value}</td>
                        </tr>
                    );
                })}
            </tbody>
        </table>
    );
};

Import the newly created component in the App.tsx:

-   import { InsightView } from "@gooddata/sdk-ui-ext";
+   import { MyTable } from "./MyTable";

Import the newly created component in the App.tsx:

-   <InsightView insight={Md.Insights.ProductCategoriesPieChart} />
+   <MyTable />

Apply theming

Theming is important for making embedded analytics look like it truly is a part of your app. Let’s apply a custom theme to our visualization by editing App.tsx:

Import a ThemeProvider component:

+   import { ThemeProvider } from "@gooddata/sdk-ui-theme-provider";

Add ThemeProvider right next to the BackendProvider and WorkspaceProvider:

    <WorkspaceProvider workspace="demo">
+       <ThemeProvider>
            <div className="container">
...
            </div>
+       </ThemeProvider>
    </WorkspaceProvider>

Now ThemeProvider will load a theme from GoodData server, so if you have a custom one defined there - it should be applied.

Let’s override the way tooltips look like:

-   <ThemeProvider>
+   <ThemeProvider theme={{
+       chart: {
+           tooltipBackgroundColor: "#333",
+           tooltipBorderColor: "#555",
+           tooltipLabelColor: "#eaeaea",
+           tooltipValueColor: "#fff"
+       }
+   }}>

Read more about the theming and check out an example from the gallery.

Connect your own data from GoodData Cloud or GoodData.CN servers

By default, GoodData React SDK is connecting to the same demo data as you would get in your GoodData Cloud or GoodData.CN trial account.

Here are a few steps on how to connect to your own data:

In package.json replace hostname and workspaceId:

-    "hostname": "https://public-examples.gooddata.com",
-    "workspaceId": "demo",
+    "hostname": "https://<your-gooddata-instance-host>",
+    "workspaceId": "<your-workspace-id>",

Generate an API Tokenand add it to the .env file:
```
TIGER_API_TOKEN=<your_api_token>
```

Make sure you do not commit the .env file to your VCS (e.g. Git)

Refresh the metadata catalog for the newly configured workspace: npm run refresh-md.
Update the App.tsx. Since we’ve switched to your own data, the reference to the insight in App.tsx is no longer valid. Select a new visualization to render from the catalog and update App.tsx:
```
-   <InsightView insight={Md.Insights.ProductCategoriesPieChart} showTitle />
+   <InsightView insight={Md.Insights.<your-insight-id>} showTitle />
```

Update from v9 to v10

Upgrade all the @gooddata dependencies to the latest stable version in package.json.

Note: Starting with version 10.0.0, the gooddata-ui-sdk no longer supports the GoodData Platform. It is necessary to remove "@gooddata/sdk-backend-bear" from the package.json.

Introduction

Release Notes