Use Supabase with React
Learn how to create a Supabase project, add some sample data to your database, and query the data from a React app.
Set up a Supabase project with sample data
Create a new project in the Supabase Dashboard.
After your project is ready, create a table in your Supabase database using the SQL Editor in the Dashboard. Use the following SQL statement to create a
countries table with some sample data.
Create a React app
Create a React app using a Vite template.
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
Query data from the app
App.jsx, create a Supabase client using your Project URL and public API (anon) key.
getCountries function to fetch the data and display the query result to the page.
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.