Start > React Quickstart
Start > React QuickstartKroxt BaaS SDK v1.0.5

React Quickstart

Connect your React Single Page Application (SPA) using Vite.

Instant Setup

Run npx create-kroxt-app, select **Vite + React (SPA)**, and paste your credentials when prompted.

1. Configure Environment Variables

.env
1
2
VITE_KROXT_PROJECT_ID=YOUR_PROJECT_ID
VITE_KROXT_API_KEY=YOUR_PUBLIC_API_KEY

2. Initialize Client SDK

Vite templates initialize the SDK inside src/config/kroxt.ts:

src/config/kroxt.ts
1
2
3
4
5
6
7
8
import { Kroxt } from "@kroxt/baas-sdk";

export const baas = new Kroxt({
  projectId: import.meta.env.VITE_KROXT_PROJECT_ID || "",
  apiKey: import.meta.env.VITE_KROXT_API_KEY || "",
});

export default baas;

3. CRUD Operations with Generics

src/App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { useEffect, useState } from "react";
import { Document } from "@kroxt/baas-sdk";
import { baas } from "./config/kroxt";

type Todo = Document<{
  text: string;
  completed: boolean;
}>;

export default function App() {
  const [todos, setTodos] = useState<Todo[]>([]);

  useEffect(() => {
    baas.collection<{ text: string; completed: boolean }>("todos")
      .get()
      .then((data) => setTodos(data as Todo[]));
  }, []);

  return (
    <div className="p-8">
      {todos.map((todo) => (
        <p key={todo._id} className="text-zinc-200 text-xs">
          {todo.data.text}
        </p>
      ))}
    </div>
  );
}