¿Cómo construir una aplicación CRUD con ReactJS?

introducción en este tutorial, construirás una aplicación crud (crear, leer, actualizar y eliminar) completa utilizando reactjs esta guía está diseñada para realizar las operaciones básicas de una aplicación de software al demostrar cómo construir aplicaciones crud que gestionen y actualicen datos de manera efectiva comenzarás creando y configurando un proyecto de back4app llamado basic crud app reactjs , que actúa como un sistema backend robusto para tu aplicación web a continuación, diseñarás un esquema de base de datos escalable definiendo colecciones y campos detallados, ya sea manualmente o con la ayuda del agente ai de back4app luego, aprovecharás la aplicación de administración de back4app, una herramienta de gestión fácil de usar con una interfaz de arrastrar y soltar, para gestionar tus colecciones de datos fácilmente esta interfaz de administración mejora la experiencia del usuario y simplifica la interfaz de usuario, permitiendo a los usuarios realizar rápidamente operaciones crud finalmente, desplegarás tu frontend de reactjs e integrarás con back4app utilizando rest/graphql (o el sdk de parse, donde esté disponible), todo mientras aseguras tu backend con controles de acceso avanzados al final de esta guía, habrás construido una aplicación web lista para producción que no solo admite operaciones crud básicas, sino que también incluye autenticación de usuarios y capacidades robustas de actualización de datos puntos clave aprende a construir aplicaciones crud que gestionen datos de manera eficiente utilizando un sistema de gestión de bases de datos confiable obtén información práctica sobre el diseño de un backend escalable e intégralo con un frontend de reactjs para mejorar la experiencia del usuario descubre cómo usar una herramienta de gestión de arrastrar y soltar (la aplicación de administración de back4app) para simplificar las operaciones de crear, leer, actualizar y eliminar comprende las técnicas de implementación, incluida la contenedorización con docker, para lanzar rápidamente tu aplicación web requisitos previos antes de comenzar, asegúrate de tener lo siguiente una cuenta de back4app y un nuevo proyecto configurado si necesitas ayuda, consulta introducción a back4app https //www back4app com/docs/get started/new parse app un entorno de desarrollo de reactjs usa create react app https //create react app dev/docs/getting started/ o una herramienta similar asegúrate de que node js (versión 14 o superior) esté instalado comprensión básica de javascript, reactjs y rest apis revisa la documentación de reactjs https //reactjs org/docs/get started html si es necesario paso 1 – configuración del proyecto creando un nuevo proyecto de back4app inicia sesión en tu cuenta de back4app haz clic en el botón “nueva app” en tu panel de control ingresa el nombre del proyecto basic crud app reactjs y sigue las instrucciones para crear tu proyecto crear nuevo proyecto una vez creado, tu nuevo proyecto aparecerá en tu panel de control de back4app, proporcionando una base sólida para la configuración de tu backend y la gestión del proyecto paso 2 – diseño del esquema de la base de datos diseñando tu modelo de datos para la aplicación crud básica, crearás varias colecciones a continuación se presentan algunos ejemplos de las colecciones que necesitará, describiendo los campos y tipos de datos necesarios para ayudarle a configurar eficazmente el esquema de su base de datos estas colecciones están diseñadas para realizar las operaciones crud fundamentales que permiten a los usuarios crear, leer, actualizar y eliminar datos 1\ colección de artículos esta colección almacena información sobre cada artículo campo tipo de dato descripción id objectid clave primaria generada automáticamente título cadena el título del artículo descripción cadena una breve descripción del artículo creado en fecha marca de tiempo cuando se creó el elemento actualizado en fecha marca de tiempo cuando el artículo fue actualizado por última vez 2\ colección de usuarios esta colección almacena información del usuario y detalles de autenticación campo tipo de dato descripción id objectid clave primaria generada automáticamente nombre de usuario cadena nombre de usuario único para el usuario correo electrónico cadena dirección de correo electrónico única hash de contraseña cadena contraseña hash para autenticación creado en fecha marca de tiempo cuando se creó la cuenta de usuario actualizado en fecha marca de tiempo cuando se actualizó la cuenta de usuario puedes configurar estas colecciones manualmente en el panel de control de back4app creando una nueva clase para cada colección y añadiendo columnas para definir los campos crear nueva clase puedes crear fácilmente campos para tu base de datos seleccionando un tipo de dato, nombrando el campo, estableciendo un valor predeterminado y definiendo si es obligatorio crear columna usando el agente ai de back4app para la generación de esquemas el agente ai de back4app es una herramienta poderosa disponible directamente desde tu panel de control de back4app le permite generar automáticamente el esquema de su base de datos basado en un aviso que describe sus colecciones y campos deseados esta funcionalidad es un ahorro de tiempo significativo para la gestión de proyectos y ayuda a garantizar que su sistema de gestión de bases de datos esté configurado para realizar las operaciones básicas requeridas por su aplicación web cómo usar el agente de ia abre el agente de ia inicie sesión en su panel de back4app y localice el agente de ia en el menú o dentro de la configuración de su proyecto describe tu modelo de datos en la interfaz del agente de ia, pega un aviso detallado que describa las colecciones y campos que necesitas revisar y aplicar una vez enviado, el agente de ia generará las colecciones y definiciones de campo revise estas sugerencias y aplíquelas a su proyecto ejemplo de aviso create the following collections in my back4app application 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) usar el agente de ia de esta manera ahorra tiempo y asegura que su esquema sea consistente y optimizado para las necesidades de su aplicación paso 3 – habilitando la aplicación de administración y operaciones crud descripción general de la aplicación de administración la aplicación de administración de back4app es una poderosa interfaz sin código que te permite gestionar tus datos de backend esta herramienta de gestión proporciona una interfaz de usuario de arrastrar y soltar que permite a los usuarios realizar fácilmente operaciones crud como crear, leer, actualizar y eliminar registros habilitando la aplicación de administración navega al menú “más en tu panel de back4app haz clic en “aplicación de administración” y luego en “habilitar aplicación de administración ” configura tus credenciales de administrador creando tu primer usuario administrador este proceso también establece roles (por ejemplo, b4aadminuser ) y colecciones del sistema habilitar aplicación de administración después de habilitar, inicia sesión en la aplicación de administración para gestionar tus datos panel de administración de la aplicación uso de la aplicación de administración para operaciones crud dentro de la aplicación de administración puedes crear registros haz clic en el botón “agregar registro” dentro de una colección (por ejemplo, artículos) para crear nuevas entradas leer/actualizar registros selecciona cualquier registro para ver sus detalles o editar campos, asegurando una actualización de datos fluida eliminar registros usa la opción de eliminar para quitar registros que ya no son necesarios esta herramienta de gestión fácil de usar mejora la experiencia general del usuario al proporcionar una interfaz simple de arrastrar y soltar para funciones crud paso 4 – integrando reactjs con back4app ahora que tu backend está configurado y gestionado a través de la aplicación de administración, es hora de conectar tu frontend de reactjs a back4app opción a usando el sdk de parse instalar el sdk de parse npm install parse inicializar parse en tu aplicación react crea un archivo (por ejemplo, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // reemplaza con tus credenciales reales de back4app parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; usar parse en un componente de react por ejemplo, crea un componente para obtener y mostrar elementos // src/components/itemslist js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error al obtener elementos ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>elementos\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; opción b usando rest o graphql si tu entorno no soporta el sdk de parse, puedes realizar operaciones crud usando rest o graphql por ejemplo, para obtener elementos usando rest // example rest call to fetch items const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); integra estas llamadas a la api en tus componentes de react según sea necesario paso 5 – asegurando tu backend listas de control de acceso (acls) asegure sus datos asignando acls a los objetos por ejemplo, para crear un elemento privado async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl only the owner can read and write const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } permisos a nivel de clase (clps) en el panel de control de back4app, configure clps para cada colección para establecer reglas de acceso predeterminadas esto asegura que solo los usuarios autenticados o autorizados puedan acceder a datos sensibles paso 6 – autenticación de usuarios configuración de cuentas de usuario back4app aprovecha la clase user de parse para la autenticación en tu aplicación react, maneja el registro y el inicio de sesión de usuarios de la siguiente manera // src/components/auth js import react, { usestate } from 'react'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user signed up successfully!'); } catch (error) { alert('error signing up ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; un enfoque similar se puede utilizar para el inicio de sesión y la gestión de sesiones se pueden configurar características adicionales como inicios de sesión sociales, verificación de correo electrónico y restablecimientos de contraseña en el panel de control de back4app paso 7 – desplegando tu frontend de reactjs con web deployment la función de web deployment de back4app te permite alojar tu frontend de reactjs sin problemas al desplegar tu código desde un repositorio de github en esta sección, aprenderás cómo preparar tu construcción de producción, comprometer tu código fuente en github, integrar tu repositorio con web deployment y desplegar tu sitio 7 1 prepara tu construcción de producción abre la carpeta de tu proyecto en una terminal ejecuta el comando de construcción npm run build este comando crea una build carpeta que contiene todos los archivos estáticos optimizados (incluyendo index html , javascript, css e imágenes) verifica la construcción asegúrate de que la build carpeta contenga un archivo index html junto con los subdirectorios de activos necesarios 7 2 organiza y sube tu código fuente tu repositorio debe incluir el código fuente completo de tu frontend en reactjs una estructura de archivos típica podría verse así basic crud app reactjs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md archivos de código fuente de ejemplo src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; \#### commit your code to github 1\ initialize a git repository in your project folder (if you haven’t already) ```bash git init agrega tus archivos fuente git add confirma tus cambios git commit m "confirmación inicial del código fuente del frontend de reactjs" crea un repositorio en github por ejemplo, crea un repositorio llamado basic crud app reactjs frontend en github envía tu código a github git remote add origin https //github com/tu nombre de usuario/basic crud app reactjs frontend git git push u origin main 7 3 integra tu repositorio de github con el despliegue web accede al despliegue web inicia sesión en tu panel de back4app, navega a tu proyecto (basic crud app reactjs) y haz clic en la función de despliegue web conéctate a github si aún no lo has hecho, integra tu cuenta de github siguiendo las indicaciones en pantalla esta conexión permite que back4app acceda a tu repositorio selecciona tu repositorio y rama elige el repositorio que creaste (por ejemplo, basic crud app reactjs frontend ) y selecciona la rama (por ejemplo, main ) que contiene tu código de reactjs 7 4 configura tu implementación proporciona detalles de configuración adicionales comando de construcción si tu repositorio no incluye una carpeta de construcción , especifica el comando de construcción (por ejemplo, npm run build ) back4app ejecutará este comando durante la implementación directorio de salida establece el directorio de salida en build para que back4app sepa qué carpeta contiene tus archivos de sitio estáticos variables de entorno si tu aplicación depende de alguna variable de entorno (por ejemplo, claves api), agrégalas en la configuración 7 5 dockeriza tu proyecto de aplicación reactjs si prefieres usar docker para la implementación, puedes contenerizar tu aplicación reactjs incluye un dockerfile en tu repositorio con contenido similar al siguiente \# use an official node runtime as a parent image from node 16 alpine as build \# set the working directory workdir /app \# copy package json and package lock json copy package json / \# install dependencies run npm install \# copy the rest of the application copy \# build the react app run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] incluye este dockerfile en tu repositorio luego, en la configuración de implementación web, selecciona la opción de implementación de docker para construir y desplegar tu aplicación en contenedor 7 6 despliega tu aplicación haz clic en el botón desplegar una vez que hayas configurado los ajustes de despliegue, haz clic en el botón desplegar monitorea el proceso de construcción back4app tomará tu código de github, ejecutará el comando de construcción (si está configurado) y desplegará tu aplicación dentro de un contenedor obtén tu url después de que se complete el despliegue, back4app proporcionará una url donde se aloja tu aplicación reactjs 7 7 verifica tu despliegue visita la url proporcionada abre la url en tu navegador web para ver tu sitio desplegado prueba la aplicación verifica que tu aplicación se cargue correctamente, que todas las rutas funcionen como se espera y que todos los activos (css, javascript, imágenes) se sirvan correctamente soluciona problemas si es necesario utiliza las herramientas de desarrollador de tu navegador para verificar si hay errores si surgen problemas, revisa los registros de despliegue en back4app y verifica tu integración de github y los ajustes de construcción paso 8 – conclusión y próximos pasos ¡felicidades! has construido una aplicación crud básica completa utilizando reactjs y back4app has configurado un proyecto llamado basic crud app reactjs , diseñado colecciones de base de datos detalladas para artículos y usuarios, y gestionado tus datos a través de la poderosa aplicación de administración también integraste tu frontend de reactjs con tu backend y aseguraste tus datos con controles de acceso robustos próximos pasos mejora tu frontend extiende tu aplicación reactjs con características como vistas detalladas de artículos, funcionalidad de búsqueda y notificaciones en tiempo real integra características adicionales considera agregar lógica de backend más avanzada (por ejemplo, funciones en la nube), integraciones de api de terceros o controles de acceso basados en roles explora recursos adicionales revisa la documentación de back4app https //www back4app com/docs y tutoriales adicionales para profundizar en la optimización del rendimiento y las integraciones personalizadas al seguir este tutorial, ahora tienes las habilidades para crear un backend crud robusto y escalable para tu aplicación reactjs utilizando back4app ¡feliz codificación!