Как создать CRUD-приложение React с облачным хранилищем Supabase

React произвел революцию в том, как разработчики создают пользовательские интерфейсы для веб-приложений. Его компонентная архитектура и декларативный синтаксис обеспечивают мощную основу для создания интерактивного и динамичного взаимодействия с пользователем.

Для разработчика React овладение реализацией операций CRUD (создание, чтение, обновление, удаление) является важным первым шагом к созданию надежных и эффективных веб-решений.

Узнайте, как создать простое приложение React CRUD, используя Supabase Cloud Storage в качестве серверного решения.

Решение Supabase Backend-as-a-Service

Поставщики Backend-as-a-Service (BaaS), такие как Supabase, предлагают удобную альтернативу созданию с нуля полноценной серверной службы для ваших веб-приложений. В идеале эти решения предоставляют широкий спектр предварительно созданных серверных служб, которые необходимы для настройки эффективной серверной системы для ваших веб-приложений React.

С помощью BaaS вы можете использовать такие функции, как хранение данных, системы аутентификации, подписки в реальном времени и многое другое, без необходимости самостоятельно разрабатывать и поддерживать эти сервисы.

Интегрируя решения BaaS, такие как Supabase, в свой проект, вы можете значительно сократить время разработки и доставки, сохраняя при этом преимущества надежных серверных услуг.

Настройка проекта облачного хранилища Supabase

Для начала перейдите на Сайт Supabase, и зарегистрируйте учетную запись.

1. После регистрации учетной записи войдите в свою учетную запись панель приборов страница.
2. Нажать на Новый проект кнопка.
3. Заполните данные проекта и нажмите Создать новый проект.
4. Настроив проект, выберите и нажмите кнопку Редактор SQL кнопка функции на левой панели функций.
5. Запустите оператор SQL ниже в Редактор SQL для создания демонстрационной таблицы. В нем будут храниться данные, которые вы будете использовать с приложением React.

   создаватьстол продукты (
    id bigint генерируется по умолчанию как первичный ключ идентификации,
    текст имени,
    текст описания
   );

Настройте приложение React CRUD

Создать React-приложение, перейдите в корневой каталог и создайте новый файл, .env, чтобы установить некоторые переменные среды. Отправляйтесь на свою базу Supabase настройки страницу, откройте API раздел и скопируйте значения для URL-адрес проекта и публичный анонимный ключ. Вставьте их в свой файл env:

REACT_APP_SUPABASE_URL = URL-адрес проекта
REACT_APP_SUPABASE_ANON_KEY = открытый анонимный ключ

Затем выполните эту команду, чтобы установить библиотеку JavaScript Supabase в свой проект React:

npm установить @supabase/supabase-js

Настройка клиента Supabase

в источник каталог, создайте новый утилиты/SupabaseClient.js файл и код ниже:

Импортировать { создать клиент } от'@supabase/supabase-js'; 
константа supabaseURL = процесс.env. REACT_APP_SUPABASE_URL;
константа supabaseAnonKey = процесс.env. REACT_APP_SUPABASE_ANON_KEY;
экспортконстанта supabase = createClient (supabaseURL, supabaseAnonKey);

Этот код создает экземпляр клиента Supabase, предоставляя URL-адрес Supabase и открытый ключ Anon, что позволяет приложению React взаимодействовать с API-интерфейсами Supabase и выполнять операции CRUD.

Вы можете найти код этого проекта в этом Репозиторий GitHub.

Внедрение операций CRUD

Теперь, когда вы успешно настроили облачное хранилище Supabase и свой проект React, реализуйте операции CRUD в своем приложении React.

1. Добавить данные в базу данных

Открой источник/App.js файл, удалите шаблонный код React и добавьте следующее:

Импортировать { useState, useEffect } от«реагировать»;
Импортировать Карта продукта от'./components/ProductCard';
Импортировать { супербаза } от'./utils/Супабазклиент';
Импортировать'./Приложение.css';
экспортпо умолчаниюфункцияПриложение() {
константа [имя, setName] = useState('');
константа [описание, setDescription] = useState('');
асинхронныйфункциядобавитьПродукт() {
пытаться {
константа {данные, ошибка} = Ждите супабаза
 .от('продукты')
 .вставлять({
 имя: имя,
 описание: описание
 })
 .одинокий();
если (ошибка) бросать ошибка;
окно.location.reload();
 } ловить (ошибка) {
 оповещение (ошибка.сообщение);
 }
 }

Этот код определяет добавитьПродукт функция-обработчик, которая асинхронно вставляет новую запись в продукты таблицу в облачной базе данных. Если операция вставки прошла успешно, страница перезагрузится, чтобы отобразить обновленный список продуктов.

2. Чтение данных из облачной базы данных

Определите функцию обработчика для извлечения сохраненных данных из базы данных.

константа [продукты, setProducts] = useState([]);
асинхронныйфункцияполучитьПродукты() {
пытаться {
константа {данные, ошибка} = Ждите супабаза
 .от('продукты')
 .выбирать('*')
 .лимит(10);
если (ошибка) бросать ошибка;
если (данные != нулевой) {
 setProducts (данные);
 }
 } ловить (ошибка) {
 оповещение (ошибка.сообщение);
 }
 }
 использоватьЭффект(() => {
 получитьПродукты();
 }, []);

Этот код асинхронно извлекает данные из базы данных. Запрос выборки извлекает все данные из таблицы products, ограничивая результаты максимум 10 записями, и обновляет продукты' состояние с полученными данными.

использованиеЭффектРеагировать крючок управляет получитьПродукты работать, когда компонент монтируется. Это гарантирует, что данные продуктов извлекаются и отображаются при первоначальном отображении компонента. Наконец, добавьте код, который отображает входные элементы JSX в браузере, чтобы пользователи могли добавлять продукты в базу данных Supabase и отображать существующие продукты, полученные из базы данных.

возвращаться (
 <>

"заголовок-контейнер">
Магазин продуктов</h3>
 </div>
 </header>


Добавить данные о товарах в базу данных Supabase</h3>


"создать-продукт-контейнер">


Название продукта</label>
 тип="текст"
 идентификатор ="имя"
 onChange={(e) => setName (e.target.value)}
 />
Описание продукта</label>
 тип="текст"
 идентификатор ="описание"
 onChange={(e) => setDescription (e.target.value)}
 />


 добавитьПродукт()}>
 Добавить продукт
 </button>
 </div>
 </div>




Текущие продукты в База данных</h3>

"контейнер-список-продуктов">
 {продукты.карта((продукт) => (



 </div>
 ))}
 </div>
 </>
 );
}

Полученные данные в массив продуктов передается как реквизит и динамически визуализируется внутри Карта продукта компонент, использующий карта функция.

3. Обновление и удаление существующих данных в базе данных

Создать новый компоненты/ProductCard.js файл в /src каталог. Прежде чем определять функции обработчика, давайте посмотрим на состояния и элементы JSX, которые вы будете реализовывать в этом компоненте.

Импортировать { состояние использования } от«реагировать»;
Импортировать { супербаза } от'../утилиты/супабазклиент';
Импортировать'./productcard.styles.css';
экспортпо умолчаниюфункцияКарта продукта(реквизит) {
константа продукт = реквизит.продукт;
константа [редактирование, setEditing] = useState(ЛОЖЬ);
константа [имя, setName] = useState (product.name);
константа [описание, setDescription] = useState (product.description);
возвращаться (
"карточка товара">


 {редактирование ЛОЖЬ? (


{продукт.название}</h5>


{продукт.описание}</p>
"кнопка удаления" onClick={() => deleteProduct()}>Удалить продукт</button>
"кнопка редактирования" onClick={() => setEditing(истинный)}>Редактировать товар</button>
 </div>
 ): (


Редактирование продукта</h4>
"кнопка возврата" onClick={() => setEditing(ЛОЖЬ)}>Вернуться</button>


"имя">Название продукта</label>
 тип="текст"
 идентификатор ="имя"
 defaultValue={продукт.название}
 onChange={(e) => setName (e.target.value)}/>
"описание">Описание продукта</label>
 тип="текст"
 идентификатор ="описание"
 defaultValue={продукт.описание}
 onChange={(e) => setDescription (e.target.value)}/>


"кнопка обновления" onClick={() => updateProduct()}>Обновить продукт в Супербаза БД</button>
 </div>)}
 </div>
 </div>
 );
}

асинхронныйфункцияобновлениеПродукт() {
пытаться {
константа {данные, ошибка} = Ждите супабаза
 .от('продукты')
 .обновлять({
 имя: имя,
 описание: описание
 })
 экв('идентификатор', Код товара);
если (ошибка) бросать ошибка;
окно.location.reload();
 } ловить (ошибка) {
 оповещение (ошибка.сообщение);
 }
}

асинхронныйфункцияудалить продукт() {
пытаться {
константа {данные, ошибка} = Ждите супабаза
 .от('продукты')
 .удалить()
 экв('идентификатор', Код товара);
если (ошибка) бросать ошибка;
окно.location.reload();
 } ловить (ошибка) {
 оповещение (ошибка.сообщение);
 }
}