Como construir um aplicativo CRUD React com Supabase Cloud Storage

O React revolucionou a maneira como os desenvolvedores constroem interfaces de usuário para aplicativos da web. Sua arquitetura baseada em componentes e sintaxe declarativa fornecem uma base poderosa para a criação de experiências de usuário interativas e dinâmicas.

Como desenvolvedor React, dominar como implementar operações CRUD (Criar, Ler, Atualizar, Excluir) é um primeiro passo crucial para a construção de soluções web robustas e eficientes.

Aprenda a criar um aplicativo React CRUD simples, utilizando o Supabase Cloud Storage como sua solução de back-end.

Solução de back-end como serviço Supabase

Provedores de back-end como serviço (BaaS), como o Supabase, oferecem uma alternativa conveniente para criar um serviço de back-end completo do zero para seus aplicativos da web. Idealmente, essas soluções fornecem uma ampla gama de serviços de back-end pré-construídos que são essenciais para configurar um sistema de back-end eficiente para seus aplicativos da web React.

Com o BaaS, você pode usar recursos como armazenamento de dados, sistemas de autenticação, assinaturas em tempo real e muito mais sem a necessidade de desenvolver e manter esses serviços de forma independente.

Ao integrar soluções BaaS como Supabase em seu projeto, você pode reduzir significativamente o tempo de desenvolvimento e envio enquanto ainda se beneficia de serviços de back-end robustos.

Configurar um projeto de armazenamento em nuvem Supabase

Para começar, acesse site da Supabasee inscreva-se em uma conta.

1. Depois de se inscrever para uma conta, faça login na sua conta painel página.
2. Clique no Novo projeto botão.
3. Preencha os dados do projeto e clique em Criar novo projeto.
4. Com o projeto configurado, selecione e clique no Editor de SQL botão de recurso no painel de recursos do painel esquerdo.
5. Execute a instrução SQL abaixo no Editor de SQL para criar uma tabela de demonstração. Ele conterá os dados que você usará com o aplicativo React.

   criarmesa produtos (
    id bigint gerado por padrão como chave primária de identidade,
    nome texto,
    texto descritivo
   );

Configurar um aplicativo React CRUD

Criar um aplicativo React, navegue até o diretório raiz e crie um novo arquivo, .env, para definir algumas variáveis ​​de ambiente. Dirija-se ao seu Supabase configurações página, abra o API seção e copie os valores para URL do projeto e chave anônima pública. Cole-os no seu arquivo env:

REACT_APP_SUPABASE_URL = URL do projeto
REACT_APP_SUPABASE_ANON_KEY = chave anônima pública

Em seguida, execute este comando para instalar a biblioteca JavaScript do Supabase em seu projeto React:

npm install @supabase/supabase-js

Configurar o cliente Supabase

No origem diretório, crie um novo utils/SupabaseClient.js arquivo e o código abaixo:

importar {criarCliente} de'@supabase/supabase-js'; 
const supabaseURL = process.env. REACT_APP_SUPABASE_URL;
const supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
exportarconst supabase = createClient (supabaseURL, supabaseAnonKey);

Esse código cria uma instância do cliente Supabase fornecendo a URL do Supabase e uma chave anônima pública, permitindo que o aplicativo React se comunique com as APIs do Supabase e execute operações CRUD.

Você pode encontrar o código deste projeto neste Repositório GitHub.

Implemente as operações CRUD

Agora que você configurou com sucesso o armazenamento em nuvem do Supabase e seu projeto React, implemente as operações CRUD em seu aplicativo React.

1. Adicionar dados ao banco de dados

Abra o src/App.js arquivo, exclua o código padrão do React e adicione o seguinte:

importar { useState, useEffect } de'reagir';
importar ProductCard de'./components/ProductCard';
importar { supabase } de'./utils/SupabaseClient';
importar'./App.css';
exportarpadrãofunçãoAplicativo() {
const [nome, setName] = useState('');
const [descrição, setDescription] = useState('');
assíncronofunçãoadicionarProduto() {
tentar {
const { dados, erro } = aguardam supabase
 .de('produtos')
 .inserir({
 nome nome,
 descrição: descrição
 })
 .solteiro();
se (erro) lançar erro;
janela.location.reload();
 } pegar (erro) {
 alerta (erro.mensagem);
 }
 }

Este código define um adicionarProduto função de manipulador que insere de forma assíncrona um novo registro no produtos tabela no banco de dados em nuvem. Se a operação de inserção for bem-sucedida, a página será recarregada para refletir a lista de produtos atualizada.

2. Ler dados do banco de dados em nuvem

Defina uma função de manipulador para buscar os dados armazenados no banco de dados.

const [produtos, setProdutos] = useState([]);
assíncronofunçãoobterProdutos() {
tentar {
const { dados, erro } = aguardam supabase
 .de('produtos')
 .selecione('*')
 .limite(10);
se (erro) lançar erro;
se (dados != nulo) {
 setProdutos (dados);
 }
 } pegar (erro) {
 alerta (erro.mensagem);
 }
 }
 useEffect(() => {
 getProdutos();
 }, []);

Esse código busca de forma assíncrona os dados do banco de dados. A consulta de busca recupera todos os dados da tabela de produtos, limitando os resultados a um máximo de 10 registros e atualiza o produtos' estado com os dados recuperados.

O useEffectGancho de reação executa o obterProdutos funcionar quando o componente é montado. Isso garante que os dados dos produtos sejam buscados e renderizados quando o componente for renderizado inicialmente. Por fim, adicione o código que renderiza os elementos JSX de entrada no navegador para permitir que os usuários adicionem produtos a um banco de dados Supabase e exibam os produtos existentes obtidos do banco de dados.

retornar (
 <>

"cabeçalho-contêiner">
Produtos da Loja</h3>
 </div>
 </header>


Adicionar dados de produtos ao banco de dados Supabase</h3>


"criar-produto-contêiner">


Nome do produto</label>
 tipo="texto"
 id ="nome"
 onChange={(e) => setName (e.target.value)}
 />
Descrição do produto</label>
 tipo="texto"
 id ="descrição"
 onChange={(e) => setDescription (e.target.value)}
 />


 adicionarProduto()}>
 Adicionar produto
 </button>
 </div>
 </div>




Produtos Atuais em o banco de dados</h3>

"contêiner-lista de produtos">
 {produtos.map((produtos) => (



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

Os dados buscados no matriz de produtos é passado como props e renderizado dinamicamente dentro do ProductCard componente usando o mapa função.

3. Atualizar e excluir dados existentes no banco de dados

Crie um novo componentes/ProductCard.js arquivo no /src diretório. Antes de definir as funções do manipulador, vamos ver os estados e elementos JSX que você implementará neste componente.

importar { useState } de'reagir';
importar { supabase } de'../utils/SupabaseClient';
importar'./productcard.styles.css';
exportarpadrãofunçãoProductCard(adereços) {
const produto = props.produto;
const [edição, setEdição] = useState(falso);
const [nome, setName] = useState (product.name);
const [descrição, setDescription] = useState (produto.descrição);
retornar (
"cartão de produto">


 {editando falso? (


{product.name}</h5>


{product.description}</p>
"botão deletar" onClick={() => deleteProduct()}>Excluir produto</button>
"botão de edição" onClick={() => setEditing(verdadeiro)}>Editar Produto</button>
 </div>
 ): (


Editando Produto</h4>
"botão voltar" onClick={() => setEditing(falso)}>Voltar</button>


"nome">Nome do produto</label>
 tipo="texto"
 id ="nome"
 defaultValue={product.name}
 onChange={(e) => setName (e.target.value)}/>
"descrição">Descrição do produto</label>
 tipo="texto"
 id ="descrição"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


"botão de atualização" onClick={() => updateProduct()}>Atualizar produto em BD Supabase</button>
 </div>)}
 </div>
 </div>
 );
}

assíncronofunçãoatualizarProduto() {
tentar {
const { dados, erro } = aguardam supabase
 .de('produtos')
 .atualizar({
 nome nome,
 descrição: descrição
 })
 .eq('eu ia', ID do produto);
se (erro) lançar erro;
janela.location.reload();
 } pegar (erro) {
 alerta (erro.mensagem);
 }
}

assíncronofunçãodeletarProduto() {
tentar {
const { dados, erro } = aguardam supabase
 .de('produtos')
 .excluir()
 .eq('eu ia', ID do produto);
se (erro) lançar erro;
janela.location.reload();
 } pegar (erro) {
 alerta (erro.mensagem);
 }
}