Quickstart

Use Appteum with React

Learn how to create an Appteum workspace, invite users, and add & query your data from a React app.

Setup an Appteum workspace

Sign up and create a new workspace.
Create a Countries object using the Object Manager in the workspace dashboard.

info

For this quickstart we are using the Anonymous User.

The Anonymous User is a special type of user that allows access to workspace data without requiring a Sign-In.

Find out more about Anonymous User

https://admin.appteum.com

Create a React app

npm create vite@latest my-app --template react

Install the Appteum client library

The fastest way to get started is to use the appteum-js client library which provides a convenient interface for working with Appteum from a React app.
Navigate to the React app and install appteum-js.

 cd my-app && npm install @appteum/appteum-js

Query data from the app

In App.jsx, create a Appteum client using your Workspace API_KEY.
Add a createCountry function to insert country data to your countries object.
Add a getCountries function to fetch the data and display the query result to the page.

import { AppteumWorkspaceClient } from "@appteum/appteum-js";
import React, { useEffect, useState } from "react";
import "./App.css";

const appteum = new AppteumWorkspaceClient({
  apiKey: "<WORKSPACE_API_KEY>",
});

function App() {
  const [countries, setCountries] = useState([]);
  const [state, setState] = useState({
    name: "",
  });

  useEffect(() => {
    getCountries();
  }, []);

  async function getCountries() {
    const { data } = await appteum.objects.data({
      q: "select id,name from countries",
    });
    setCountries(data);
  }

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setState((prevProps) => ({
      ...prevProps,
      [name]: value,
    }));
  };

  const createCountry = async (event) => {
    event.preventDefault();

    await appteum.objects.create("countries", {
      dataRecords: [{ name: state.name }],
    });
    getCountries();
  };

  return (
    <div className="App">
      <form onSubmit={createCountry}>
        <div className="form-control">
          <label>Country Name </label>
          <input
            type="text"
            name="name"
            value={state.name}
            onChange={handleInputChange}
          />
          <button
            style={{ backgroundColor: "#4CAF50", marginLeft: "1rem" }}
            type="submit"
          >
            Add Country
          </button>
        </div>
      </form>
      <ul style={{ listStyleType: "none" }}>
        {countries.map((country) => (
          <li key={country.Id}>{country.Name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Start the app

Start the app, go to http://localhost:5173 in a browser and you can add new countries and see the list of countries.

npm run dev

Quickstart

Use Appteum with React​

Use Appteum with React