Cómo construir una aplicación CRUD React con Supabase Cloud Storage

React ha revolucionado la forma en que los desarrolladores crean interfaces de usuario para aplicaciones web. Su arquitectura basada en componentes y su sintaxis declarativa proporcionan una base poderosa para crear experiencias de usuario interactivas y dinámicas.

Como desarrollador de React, dominar cómo implementar operaciones CRUD (Crear, Leer, Actualizar, Eliminar) es un primer paso crucial para crear soluciones web sólidas y eficientes.

Aprenda a crear una aplicación React CRUD simple, utilizando Supabase Cloud Storage como su solución de back-end.

Solución de back-end como servicio de Supabase

Proveedores de backend como servicio (BaaS), como Supabase, ofrecen una alternativa conveniente a la creación de un servicio back-end completo desde cero para sus aplicaciones web. Idealmente, estas soluciones brindan una amplia gama de servicios de back-end preconstruidos que son esenciales para configurar un sistema de back-end eficiente para sus aplicaciones web React.

Con BaaS, puede usar funciones como almacenamiento de datos, sistemas de autenticación, suscripciones en tiempo real y más sin la necesidad de desarrollar y mantener estos servicios de forma independiente.

Al integrar soluciones BaaS como Supabase en su proyecto, puede reducir significativamente el tiempo de desarrollo y envío y, al mismo tiempo, beneficiarse de los sólidos servicios de back-end.

Configurar un proyecto de almacenamiento en la nube de Supabase

Para empezar, dirígete a Sitio web de Supabasey regístrese para obtener una cuenta.

1. Una vez que se registre para obtener una cuenta, inicie sesión en su cuenta panel página.
2. Clickea en el Nuevo proyecto botón.
3. Complete los detalles del proyecto y haga clic en Crear nuevo proyecto.
4. Con el proyecto configurado, seleccione y haga clic en el Editor SQL botón de función en el panel de funciones del panel izquierdo.
5. Ejecute la siguiente declaración SQL en el editor SQL para crear una tabla de demostración. Contendrá los datos que utilizará con la aplicación React.

   crearmesa productos (
    id bigint generado por defecto como clave principal de identidad,
    texto de nombre,
    texto de descripción
   );

Configurar una aplicación React CRUD

Crear una aplicación Reaccionar, navegue al directorio raíz y cree un nuevo archivo, .env, para establecer algunas variables de entorno. Dirígete a tu Supabase ajustes página, abra la API y copie los valores para URL del proyecto y clave anónima pública. Pegue estos en su archivo env:

REACT_APP_SUPABASE_URL = URL del proyecto
REACT_APP_SUPABASE_ANON_KEY = clave anónima pública

A continuación, ejecute este comando para instalar la biblioteca JavaScript de Supabase en su proyecto React:

npm instalar @supabase/supabase-js

Configurar el cliente de Supabase

En el origen directorio, crea un nuevo utils/SupabaseClient.js archivo y el siguiente código:

importar { crear cliente } de'@supabase/supabase-js'; 
constante supabaseURL = proceso.env. REACT_APP_SUPABASE_URL;
constante supabaseAnonKey = proceso.env. REACT_APP_SUPABASE_ANON_KEY;
exportarconstante supabase = createClient (supabaseURL, supabaseAnonKey);

Este código crea una instancia de cliente de Supabase al proporcionar la URL de Supabase y una clave anónima pública, lo que permite que la aplicación React se comunique con las API de Supabase y realice operaciones CRUD.

Puedes encontrar el código de este proyecto en este repositorio GitHub.

Implementar las operaciones CRUD

Ahora que ha configurado con éxito el almacenamiento en la nube de Supabase y su proyecto React, implemente las operaciones CRUD en su aplicación React.

1. Agregar datos a la base de datos

Abre el src/Aplicación.js archivo, elimine el código estándar de React y agregue lo siguiente:

importar { estado de uso, efecto de uso } de'reaccionar';
importar ProductoTarjeta de'./componentes/TarjetaProducto';
importar {superbase} de'./utils/SupabaseClient';
importar'./Aplicación.css';
exportarpor defectofunciónaplicación() {
constante [nombre, establecerNombre] = usarEstado('');
constante [descripción, setDescription] = useState('');
asíncronofunciónAgregar producto() {
intentar {
constante {datos, error} = esperar supabase
 .de('productos')
 .insertar({
 nombre nombre,
 descripción: descripción
 })
 .soltero();
si (error) tirar error;
ventana.ubicación.recargar();
 } atrapar (error) {
 alerta (error.mensaje);
 }
 }

Este código define un Agregar producto función de controlador que inserta de forma asincrónica un nuevo registro en el productos tabla en la base de datos en la nube. Si la operación de inserción tiene éxito, la página se volverá a cargar para reflejar la lista de productos actualizada.

2. Leer datos de la base de datos en la nube

Defina una función de controlador para obtener los datos almacenados de la base de datos.

constante [productos, setProductos] = useState([]);
asíncronofunciónobtenerProductos() {
intentar {
constante {datos, error} = esperar supabase
 .de('productos')
 .seleccionar('*')
 .límite(10);
si (error) tirar error;
si (datos != nulo) {
 setProductos (datos);
 }
 } atrapar (error) {
 alerta (error.mensaje);
 }
 }
 usarEfecto(() => {
 obtenerProductos();
 }, []);

Este código obtiene de forma asíncrona los datos de la base de datos. La consulta de búsqueda recupera todos los datos de la tabla de productos, limitando los resultados a un máximo de 10 registros y actualiza la productos' estado con los datos recuperados.

El efecto de usoGancho de reacción corre el obtenerProductos funcionar cuando el componente se monta. Esto garantiza que los datos de los productos se obtengan y representen cuando el componente se representa inicialmente. Finalmente, agregue el código que representa los elementos JSX de entrada en el navegador para permitir que los usuarios agreguen productos a una base de datos de Supabase y muestren los productos existentes extraídos de la base de datos.

devolver (
 <>

"encabezado-contenedor">
Productos de la tienda</h3>
 </div>
 </header>


Agregar datos de productos a la base de datos de Supabase</h3>


"crear-producto-contenedor">


Nombre del producto</label>
 tipo ="texto"
 identificación ="nombre"
 onChange={(e) => setName (e.target.value)}
 />
Descripción del producto</label>
 tipo ="texto"
 identificación ="descripción"
 onChange={(e) => setDescription (e.target.value)}
 />


 añadirProducto()}>
 Agregar producto
 </button>
 </div>
 </div>




Productos Actuales en la base de datos</h3>

"producto-lista-contenedor">
 {productos.mapa((producto) => (



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

Los datos obtenidos en el matriz de productos se pasa como accesorios y se renderiza dinámicamente dentro del ProductoTarjeta componente usando el mapa función.

3. Actualizar y eliminar datos existentes en la base de datos

Crear un nuevo componentes/ProductCard.js archivo en el /src directorio. Antes de definir las funciones del controlador, veamos los estados y los elementos JSX que implementará en este componente.

importar { estado de uso } de'reaccionar';
importar {superbase} de'../utils/SupabaseClient';
importar'./productcard.styles.css';
exportarpor defectofunciónProductoTarjeta(accesorios) {
constante producto = accesorios.producto;
constante [edición, setEditing] = useState(FALSO);
constante [nombre, setName] = useState (producto.nombre);
constante [descripción, setDescription] = useState (producto.descripción);
devolver (
"tarjeta-producto">


 {edición FALSO? (


{producto.nombre}</h5>


{producto.descripción}</p>
"botón eliminar" onClick={() => deleteProduct()}>Eliminar producto</button>
"botón de edición" onClick={() => setEdición(verdadero)}>Editar producto</button>
 </div>
 ): (


Edición de producto</h4>
"botón de retroceso" onClick={() => setEdición(FALSO)}>Volver</button>


"nombre">Nombre del producto</label>
 tipo ="texto"
 identificación ="nombre"
 defaultValue={producto.nombre}
 onChange={(e) => setName (e.target.value)}/>
"descripción">Descripción del producto</label>
 tipo ="texto"
 identificación ="descripción"
 defaultValue={producto.descripción}
 onChange={(e) => setDescription (e.target.value)}/>


"botón de actualización" onClick={() => actualizarProducto()}>Actualizar producto en Base de datos Supabase</button>
 </div>)}
 </div>
 </div>
 );
}

asíncronofunciónactualizarProducto() {
intentar {
constante {datos, error} = esperar supabase
 .de('productos')
 .actualizar({
 nombre nombre,
 descripción: descripción
 })
 .eq('identificación', ID del Producto);
si (error) tirar error;
ventana.ubicación.recargar();
 } atrapar (error) {
 alerta (error.mensaje);
 }
}

asíncronofuncióneliminarProducto() {
intentar {
constante {datos, error} = esperar supabase
 .de('productos')
 .borrar()
 .eq('identificación', ID del Producto);
si (error) tirar error;
ventana.ubicación.recargar();
 } atrapar (error) {
 alerta (error.mensaje);
 }
}