快速入门: React

第一步：在 MemFire Cloud 仪表板中创建一个新应用。#

应用准备就绪后，进入应用，在左侧菜单->表编辑器选择 SQL 编辑器在 MemFire Cloud 数据库中创建一个表。使用以下 SQL 语句创建包含一些示例数据的国家/地区表。

  -- Create the table
  CREATE TABLE countries (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL
  );
  -- Insert some sample data into the table
  INSERT INTO countries (name) VALUES ('United States');
  INSERT INTO countries (name) VALUES ('Canada');
  INSERT INTO countries (name) VALUES ('Mexico');

第二步：创建 React 应用#

使用 Vite 模板创建 React 应用。

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

第三步：安装 Supabase 客户端库#

最快的入门方法是使用 supabase-js 客户端库，它提供了一些简便的API，用于在 React 应用程序中使用 Supabase。 导航到 React 应用程序并安装 supabase-js 。

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

第四步：在应用程序中查询数据

在 App.jsx 中，使用您的项目 URL 和公共 API（匿名）密钥创建 Supabase 客户端。 添加 getCountries 函数以获取数据并将查询结果显示到页面。

1  import { useEffect, useState } from "react";
2  import { createClient } from "@supabase/supabase-js";
3
4  const supabase = createClient("https://<project>.supabase.co", "<your-anon-key>");
5
6  function App() {
7    const [countries, setCountries] = useState([]);
8
9    useEffect(() => {
10      getCountries();
11    }, []);
12
13    async function getCountries() {
14      const { data } = await supabase.from("countries").select();
15      setCountries(data);
16    }
17
18    return (
19      <ul>
20        {countries.map((country) => (
21          <li key={country.name}>{country.name}</li>
22        ))}
23      </ul>
24    );
25  }
26
27  export default App;

第五步：启动应用程序

启动应用程序，在浏览器中访问 http://localhost:5173，然后打开浏览器控制台，您应该会看到国家/地区列表。

npm run dev