Create a new file, maybe call it supabaseClient.js, and add this code to set up the Supabase client:
```javascript
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project.supabase.co';
const supabaseKey = 'your-anon-key';
export const supabase = createClient(supabaseUrl, supabaseKey);
```

In the component where you want real-time updates, import the Supabase client:
```javascript
import React, { useEffect, useState } from 'react';
import { supabase } from './supabaseClient';
```

Set up state for updates and use a useEffect hook to manage the subscription:
```javascript
const RealTimeComponent = () => {
const [data, setData] = useState([]);

useEffect(() => {
const subscription = supabase
.from('your-table')
.on('INSERT', (payload) => {
setData((prev) => [...prev, payload.new]);
})
.on('UPDATE', (payload) => {
setData((prev) =>
prev.map((item) =>
item.id === payload.new.id ? payload.new : item
)
);
})
.on('DELETE', (payload) => {
setData((prev) => prev.filter((item) => item.id !== payload.old.id));
})
.subscribe();

return () => {
supabase.removeSubscription(subscription);
};
}, []);

return (

export default RealTimeComponent;
```

In the same component, grab the initial data from Supabase when the component mounts:
```javascript
useEffect(() => {
const fetchData = async () => {
const { data, error } = await supabase
.from('your-table')
.select('*');
if (error) console.error(error);

setData(data);
};

fetchData();
}, []);
```

Add the RealTimeComponent to your main application component:
```javascript
import React from 'react';
import RealTimeComponent from './RealTimeComponent';

function App() {
return (

export default App;
```