How to Build a React Frontend and Connect It to a Backend?

en este tutorial, crearás una aplicación de lista de tareas utilizando react y la conectarás a un servicio backend este proyecto es un punto de partida ideal porque implica operaciones crud fundamentales (crear, leer, actualizar, eliminar) y una interfaz de usuario sencilla al final, tendrás una aplicación completamente funcional con un backend conectado, demostrando cómo integrar servicios de backend gestionados en tu flujo de trabajo de desarrollo construir una aplicación de pila completa desde cero a menudo requiere configurar un backend, gestionar una base de datos, manejar la autenticación y desplegar infraestructura estas tareas pueden ser complejas y llevar mucho tiempo, especialmente si te estás enfocando en el desarrollo frontend y utilizaremos back4app para este propósito back4app simplifica este proceso al proporcionar un backend escalable como servicio (baas) solución, permitiéndote concentrarte en construir tu aplicación mientras se encarga de la hospedaje, bases de datos y apis back4app ofrece servicios de backend, incluyendo una base de datos lista para usar, autenticación, cloud code para lógica del lado del servidor y sdks para una integración sin problemas también admite despliegues en contenedores, lo que lo convierte en una opción flexible para alojar aplicaciones de pila completa con estas características, puedes construir y desplegar aplicaciones rápidamente sin gestionar la infraestructura del servidor conclusiones clave al leer este artículo aprenderás a configura un proyecto moderno de react utilizando herramientas estándar de la industria integra sin problemas un servicio backend para gestionar los datos de la aplicación implementa operaciones crud esenciales para una experiencia de usuario dinámica despliega una aplicación todo completamente funcional y mírala en funcionamiento en todo app requisitos previos para seguir este tutorial de manera efectiva, asegúrate de tener las siguientes herramientas y habilidades node js y npm instalados en tu máquina usarás npm para instalar dependencias y ejecutar tu aplicación react verifica tu instalación ejecutando node v y npm v en tu terminal conocimientos básicos de react , incluyendo componentes funcionales, gestión de estado con hooks y manejo de entrada de usuario este tutorial no cubrirá los fundamentos de react, por lo que se espera familiaridad con jsx y la estructura de componentes una cuenta de back4app para configurar y gestionar tus servicios backend regístrate en back4app https //www back4app com/ si no tienes una cuenta con esto en su lugar, estás listo para configurar tu proyecto y comenzar a construir configuración del proyecto para comenzar, necesitas configurar tu entorno de desarrollo local e inicializar tu proyecto frontend utilizando vite esto asegura una experiencia de desarrollo rápida y eficiente mientras mantienes la estructura de tu proyecto limpia primero, asegúrate de tener node js (versión lts) instalado si no, descárgalo de nodejs org https //nodejs org/ e instálalo una vez instalado, verifícalo ejecutando node v npm v ahora, inicializa tu proyecto de react usando vite , una herramienta de construcción moderna que ofrece una velocidad superior en comparación con create react app ejecuta el siguiente comando en tu terminal, reemplazando todo app con el nombre de proyecto que prefieras npm create vite\@latest todo app template react navega a la carpeta del proyecto cd todo app instala las dependencias necesarias npm install inicie el servidor de desarrollo para verificar la configuración npm run dev esto lanza su aplicación react localmente abra la url proporcionada en su navegador para confirmar que está en funcionamiento con su frontend configurado, el siguiente paso es crear un backend en back4app para manejar el almacenamiento de datos y las interacciones de la api creando el backend de todo back4app proporciona un servicio de backend completamente gestionado impulsado por parse , ofreciendo una base de datos nosql, autenticación, cloud code y generación de api listos para usar esto te permite gestionar los datos de tu aplicación sin construir un backend desde cero crearás un modelo de datos de tarea para almacenar elementos de la lista de tareas y conectarlo a tu frontend de react creando una aplicación de backend inicia sesión en tu panel de back4app https //www back4app com/ y haz clic en "crear una nueva aplicación " ingresa un nombre para tu aplicación (por ejemplo, todoapp ) y selecciona nodejs/parse como el tipo de backend una vez creado, ve a "base de datos" > "navegador" , haz clic en "crear una clase" , y elige "personalizada" nómbrala tarea y establece los permisos de nivel de clase para permitir lectura y escritura pública (puedes refinar esto más tarde) en la clase tarea , agrega los siguientes campos título (string) – título de la tarea descripción (string) – detalles de la tarea completado (boolean) – estado de finalización fechadevencimiento (fecha) – fecha límite de la tarea haz clic en "guardar" para crear el esquema conectando back4app a react ahora, integra back4app en tu proyecto de react usando el parse javascript sdk para comunicarte con el backend instálalo a través de npm npm install parse a continuación, configura el sdk inicializándolo con tu id de aplicación y clave de javascript recupera estas credenciales desde el tablero de back4app en la sección configuración de la app > seguridad y claves página de claves de back4app con el id de la app y la clave js resaltados dentro de src/main jsx , configura parse importando el sdk minificado e inicializándolo con tu id de aplicación y clave de javascript import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; con tu backend conectado, puedes construir el to do list ui e integrar operaciones crud desarrollando el frontend ahora que tu backend está configurado y conectado, es hora de construir el to do list ui en react crearás componentes para agregar, mostrar, actualizar y eliminar tareas mientras gestionas el estado de manera eficiente estructurando los componentes tu aplicación constará de tres componentes clave taskform jsx – maneja la adición de nuevas tareas tasklist jsx – muestra todas las tareas y proporciona controles para marcar tareas como completas o eliminarlas taskitem jsx – representa una sola tarea con acciones como marcar como completa o eliminar comienza creando una components carpeta dentro de src y agrega estos archivos mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx gestionando el estado usarás los usestate y useeffect hooks para gestionar tareas localmente mientras obtienes y actualizas datos de back4app primero, define el estado dentro de app jsx import { usestate, useeffect } from "react"; import parse from "parse/dist/parse min js"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; function app() { const \[tasks, settasks] = usestate(\[]); useeffect(() => { fetchtasks(); }, \[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map((task) => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; return ( \<div classname="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; creando el formulario de tareas dentro de taskform jsx , crea un formulario controlado para agregar nuevas tareas esto almacenará los valores de entrada en el estado y enviará los datos a back4app import { usestate } from "react"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; mostrando tareas dentro de tasklist jsx , renderiza la lista de tareas e incluye acciones para marcarlas como completadas y eliminarlas import taskitem from " /taskitem"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; componente de elemento de tarea dentro de taskitem jsx , define acciones para marcar una tarea como completa o eliminarla de back4app import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; estilizando la aplicación crea un styles css archivo en src y añade estilos básicos / container to center the content and add some spacing / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } / make the heading stand out and add spacing below it / container h1 { margin bottom 20px; } / style the form so that inputs and the button are nicely spaced and aligned / form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } / make the text inputs fill a reasonable width and add padding / form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } / style the 'add task' button / form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } / basic text styles for empty task list message / container p { font size 1rem; } / task item container \ centered in both directions (flex + align items/justify content) \ a gap between elements for visual breathing room / task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; / centers text for titles/descriptions / transition background color 0 2s ease; } / completed tasks visually differ strikethrough and grey text / task item completed h3, task item completed p { text decoration line through; color #888; } / task title / task item h3 { margin 0; font size 1 1rem; } / task description / task item p { margin 0; font size 1rem; } / buttons within each task item (centered and with some spacing) / task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } / on wider screens, you can display elements in a row but keep them centered adjust justify content/align items if you want them spaced differently / @media (min width 600px) { task item { flex direction row; } } importa este css en main jsx import " /styles css"; la interfaz de usuario de la aplicación tu aplicación de lista de tareas ahora tiene un frontend funcional con una interfaz de usuario de react, integración con back4app y un estilo básico aplicación de lista de tareas finalizada a continuación, desplegarás este frontend en despliegue web de back4app desplegando el frontend en el despliegue web de back4app el despliegue web de back4app proporciona un entorno completamente gestionado y containerizado para desplegar aplicaciones soporta despliegues basados en docker , lo que te permite empaquetar tu frontend en un contenedor y ejecutarlo en la infraestructura de back4app esto asegura escalabilidad, seguridad y un fácil pipeline de ci/cd al integrarse directamente con github configurando vite para la contenerización vite sirve aplicaciones en modo de desarrollo por defecto para producción, necesitas generar una versión estática y servirla usando un servidor web ligero como nginx primero, actualiza vite config js para especificar una ruta base adecuada para el despliegue import { defineconfig } from 'vite'; import react from '@vitejs/plugin react'; export default defineconfig({ plugins \[react()], base ' /', // ensures correct asset paths in a containerized environment }); ahora, ejecuta el comando de construcción para generar archivos listos para producción npm run build creando un dockerfile para el despliegue un dockerfile define cómo se contenedora tu aplicación react crea un archivo llamado dockerfile en la raíz de tu proyecto y añade la siguiente configuración # use an official lightweight node js image from node 18 alpine as build \# set working directory workdir /app \# copy package json and install dependencies copy package json package lock json / run npm install \# copy project files copy \# build the project run npm run build \# use an nginx server for efficient static file serving from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html \# expose port 80 expose 80 \# start nginx cmd \["nginx", " g", "daemon off;"] este dockerfile hace lo siguiente usa node js para instalar dependencias y construir la aplicación react copia los archivos construidos en un contenedor nginx para servir archivos estáticos de manera eficiente expone el puerto 80 para servir la aplicación construyendo y probando el contenedor localmente antes de desplegar, prueba el contenedor localmente para asegurarte de que funcione como se espera ejecuta el siguiente comando para construir la imagen de docker docker build t todo frontend luego, inicia un contenedor usando docker run p 8080 80 todo frontend abre http //localhost 8080 en tu navegador para confirmar que tu aplicación react se sirve correctamente empujando a github y conectando a back4app para desplegar en back4app, primero, empuja tu proyecto a github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main ahora, sigue estos pasos para desplegar a través de la plataforma de despliegue web de back4app inicia sesión en back4app web deployment https //www back4app com/containers haz clic en "crear nueva aplicación" , nombra tu proyecto y selecciona repositorio de github autoriza a back4app para acceder a tu github y selecciona el repositorio todo app elige despliegue de dockerfile y confirma la configuración de la construcción haz clic en "desplegar" para activar la primera construcción gestionando y monitoreando despliegues una vez desplegado, navega a tu aplicación en el tablero de back4app aquí, puedes ver registros para depurar problemas monitorear reinicios de contenedores y uso de recursos re desplegar en nuevos compromisos usando el botón "activar construcción" configurar dominios personalizados si se aloja en un dominio personal panel de despliegue web de back4app aplicación desplegada puedes acceder a la aplicación desplegada utilizada en este tutorial en https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ con tu front end desplegado con éxito, el siguiente paso es pruebas y depuración para asegurar que todo funcione sin problemas pruebas y depuración después de desplegar tu front end y back end, necesitas asegurarte de que la aplicación funcione correctamente esto implica probar la interacción frontend backend , identificar problemas comunes y depurar errores de manera efectiva pruebas de aplicación integrada para verificar que tu frontend de react interactúa correctamente con el backend de back4app, sigue estos pasos probar la conectividad de la api abre la consola de desarrollador de tu navegador ( f12 → pestaña de red ) y verifica las llamadas a la api al agregar o recuperar tareas si las solicitudes de la api fallan, inspecciona el estado de la respuesta y los mensajes de error agregar y recuperar tareas manualmente usa la interfaz de usuario de la lista de tareas para agregar una tarea actualiza la página para asegurarte de que la tarea persista abre el navegador de bases de datos de back4app y confirma que la tarea aparece bajo la clase tarea verificar operaciones crud completa y elimina tareas desde la interfaz de usuario, luego verifica los cambios en la base de datos de back4app si las actualizaciones no se reflejan, verifica si hay errores en la consola del navegador o en los registros de la api probar casos extremos intenta enviar tareas vacías para asegurarte de que la validación funcione simula conexiones a internet lentas ( chrome devtools → red → lento 3g ) para probar el rendimiento problemas comunes y solución de problemas errores cors ( access control allow origin problema) ir a back4app dashboard > configuración de la aplicación > seguridad y claves bajo "encabezados y dominios permitidos" , agrega la url de tu frontend guarda y reinicia el backend fallos de autenticación (errores 401 no autorizado) asegúrate de que el id de la aplicación y la clave de javascript estén correctamente configurados en tu aplicación react si usas autenticación de usuario, verifica que el token de sesión esté incluido en las solicitudes de api problemas de implementación del backend si la api no responde, navega a back4app web deployment > registros para verificar errores en la implementación de tu backend reinicia el contenedor si es necesario con las pruebas y la depuración completas, el siguiente paso es implementar mejores prácticas para usar los servicios de back4app para optimizar el rendimiento y la mantenibilidad mejores prácticas para usar los servicios de back4app aquí hay algunas mejores prácticas que puedes seguir al usar back4app optimizando la interacción entre frontend y backend una comunicación eficiente entre tu frontend y el backend de back4app asegura una experiencia de usuario fluida usa solicitudes por lotes al realizar múltiples operaciones para reducir la sobrecarga de red const tasks = \[task1, task2, task3]; parse object saveall(tasks); para operaciones de lectura, habilitar caché y configurar consultas indexadas en el panel de back4app para acelerar solicitudes frecuentes siempre solicita solo los campos necesarios para minimizar el tamaño de la respuesta query select("title", "completed"); entorno y escalado almacena claves sensibles, como id de aplicación y clave de javascript , en variables de entorno en lugar de codificarlas si usas vite , crea un env archivo vite parse app id=your app id vite parse js key=your js key en producción, habilita escalado automático para el despliegue web de back4app para manejar el aumento de tráfico monitorea el uso de la base de datos y optimiza las consultas utilizando la herramienta de monitoreo de rendimiento en back4app seguridad y rendimiento mejorados restringe permisos a nivel de clase (clps) para que solo los usuarios autenticados puedan modificar datos establece permisos de lectura/escritura dinámicamente según los roles de usuario task setacl(new parse acl(parse user current())); usa código en la nube para descargar lógica de negocio compleja del frontend, reduciendo la exposición de la api y mejorando el rendimiento finalmente, habilita limitación de tasa y validación de solicitudes para prevenir abusos y asegurar la integridad de los datos conclusión ahora has construido una aplicación de lista de tareas de pila completa configurando un frontend de react, integrándolo con el backend de back4app y desplegándolo a través de flujos de trabajo en contenedores este proceso demostró un camino claro desde el desarrollo local hasta el despliegue en la nube, asegurando una interacción fluida entre el frontend y el backend mirando hacia adelante, considera mejoras como gestión avanzada de usuarios, actualizaciones en tiempo real e integraciones de terceros para aprender más, explora la documentación de back4app https //www back4app com/docs y recursos de soporte comunitario