We connect the supabase backend with react in three simple steps

1) Install supabase js library in your Project👇

npm install @supabase/supabase-js

2) Go to your supabase Project and click on API button in dashboard
here you find initializing code copy that code and paste into supabase.js file in your react app 👇

import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'https://yft.supabase.co'
const supabaseKey = process.env.SUPABASE_KEY
const supabase = createClient(supabaseUrl, supabaseKey)

3) For accessing the tables data of supabase in your app you have to select the tables API from supabase and paste into your react app file inside an asynchronous function, after that call that function using useEffect() and get the data from the tables and use in our app.

import supabase from "./supabase";

export async function getCabins() {
  let { data, error } = await supabase.from("cabins").select("*");
  if (error) {
    console.error(error);
    throw new Error("cabins could not be loaded");
  }
  return data;
}

import { useEffect } from "react";
import Heading from "../ui/Heading";
import Row from "../ui/Row";
import { getCabins } from "../services/apiCabins";

function Cabins() {
  useEffect(function () {
    getCabins().then((data) => console.log(data));
  }, []);
  return (
    <Row type="horizontal">
      <Heading as="h1">All cabins</Heading>
      <p>TEST</p>

    </Row>
  );
}

export default Cabins;

Connecting Supabase with React App