mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55:06 +03:00
Charis
985ed13456
Quick starts are missing the step to create an RLS policy, which can be confusing if you choose to create the table from the Table Editor, and subsequently can't select from it.
124 lines
3.1 KiB
Plaintext
124 lines
3.1 KiB
Plaintext
---
|
|
title: 'Use Supabase with React'
|
|
subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a React app.'
|
|
breadcrumb: 'Framework Quickstarts'
|
|
hideToc: true
|
|
---
|
|
|
|
<StepHikeCompact>
|
|
|
|
<StepHikeCompact.Step step={1}>
|
|
|
|
<QuickstartDbSetup />
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={2}>
|
|
|
|
<StepHikeCompact.Details title="Create a React app">
|
|
|
|
Create a React app using a [Vite](https://vitejs.dev/guide/) template.
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```bash Terminal
|
|
npm create vite@latest my-app -- --template react
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={3}>
|
|
<StepHikeCompact.Details title="Install the Supabase client library">
|
|
|
|
The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a React app.
|
|
|
|
Navigate to the React app and install `supabase-js`.
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```bash Terminal
|
|
cd my-app && npm install @supabase/supabase-js
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={4}>
|
|
<StepHikeCompact.Details title="Query data from the app">
|
|
|
|
In `App.jsx`, create a Supabase client using your project URL and public API (anon) key:
|
|
|
|
<ProjectConfigVariables variable="url" />
|
|
<ProjectConfigVariables variable="anonKey" />
|
|
|
|
Add a `getCountries` function to fetch the data and display the query result to the page.
|
|
|
|
</StepHikeCompact.Details>
|
|
<StepHikeCompact.Code>
|
|
|
|
|
|
```js src/App.jsx
|
|
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;
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={5}>
|
|
<StepHikeCompact.Details title="Start the app">
|
|
|
|
Start the app, go to http://localhost:5173 in a browser, and open the browser console and you should see the list of countries.
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```bash Terminal
|
|
npm run dev
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
</StepHikeCompact>
|
|
|
|
## Next steps
|
|
|
|
- Set up [Auth](/docs/guides/auth) for your app
|
|
- [Insert more data](/docs/guides/database/import-data) into your database
|
|
- Upload and serve static files using [Storage](/docs/guides/storage)
|