第一步：在 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 函数以获取数据并将查询结果显示到页面。

    import { useEffect, useState } from "react";
  import { createClient } from "@supabase/supabase-js";

  const supabase = createClient("https://<project>.supabase.co", "<your-anon-key>");

  function App() {
    const [countries, setCountries] = useState([]);

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

    async function getCountries() {
      const { data } = await supabase.from("countries").select();
      setCountries(data);
    }

    return (
      <ul>
        {countries.map((country) => (
          <li key={country.name}>{country.name}</li>
        ))}
      </ul>
    );
  }

  export default App;

第五步：启动应用程序

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

  npm run dev