Primera App Full-Stack CRUD con FastAPI y React

Guía para principiantes para crear, conectar y desplegar una aplicación web CRUD completa con FastAPI y React

¿Alguna vez te has preguntado cómo funcionan las aplicaciones web por dentro y cómo se crean, muestran, actualizan y eliminan datos? En este tutorial construirás una aplicación CRUD de principio a fin con FastAPI en el backend y React en el frontend, y la publicarás en internet para compartirla con quien quieras. En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida, especialistas en inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, automatización y mucho más. Si necesitas un equipo para acelerar tu proyecto, descubre nuestro enfoque de software a medida y aplicaciones a medida.

Qué vas a construir

Un sistema sencillo de gestión de ítems con las operaciones clave de cualquier CRUD: crear nuevos ítems con nombre y descripción, listar todos los ítems, editar ítems existentes y eliminar los que ya no necesites.

Requisitos previos

Conocimientos básicos de Python y JavaScript. Python 3.7 o superior instalado. Node.js y npm instalados. Un editor de texto, por ejemplo VS Code.

Parte 1 Configurar el backend con FastAPI

FastAPI es un framework moderno y rápido para construir APIs con Python, ideal para empezar porque genera documentación interactiva automáticamente.

Paso a paso backend

1 Crea la estructura del proyecto

En la terminal ejecuta: mkdir crud-app, cd crud-app, python -m venv venv

2 Activa el entorno virtual

En macOS o Linux: source venv/bin/activate. En Windows: venv\Scripts\activate. Así todo lo que instales queda aislado en este proyecto.

3 Instala dependencias

pip install fastapi uvicorn sqlalchemy aiosqlite

FastAPI será el framework, Uvicorn el servidor ASGI, SQLAlchemy el ORM y aiosqlite permitirá operaciones asíncronas con SQLite para un arranque sencillo.

4 Prepara los archivos del backend

Crea una carpeta backend y dentro los archivos main.py, database.py, models.py y schemas.py. En database.py define la URL de SQLite, crea el engine, la clase SessionLocal y la base para los modelos. En models.py define el modelo Item con los campos id, name y description. En schemas.py define con Pydantic los esquemas ItemBase con name y description, ItemCreate para crear y Item con id para respuestas, activando orm_mode para convertir desde modelos de base de datos.

5 Crea la aplicación FastAPI

En main.py arranca la app, crea las tablas con Base.metadata.create_all, añade el middleware CORS permitiendo peticiones desde https://localhost:3000, define la dependencia get_db para abrir y cerrar sesiones de base de datos y expón los endpoints CRUD: POST en la ruta items para crear, GET en items para listar, GET en items con parámetro item_id para obtener un ítem, PUT en items con item_id para actualizar y DELETE en items con item_id para eliminar. Usa response_model para validar las respuestas y maneja errores 404 cuando no existan registros.

6 Ejecuta el servidor

Entrando en la carpeta backend, lanza uvicorn main:app --reload. Tu API quedará disponible en https://localhost:8000 y la documentación interactiva en https://localhost:8000/docs.

Parte 2 Construir el frontend con React

React es una librería de JavaScript para crear interfaces de usuario. Generarás una interfaz simple para hablar con tu API.

1 Crea la app de React

Desde la raíz del proyecto ejecuta npx create-react-app frontend y luego cd frontend.

2 Instala Axios para las llamadas a la API

npm install axios. Axios simplifica las peticiones HTTP desde React.

3 Implementa la lógica en la app

En tu componente principal define estado para la lista de ítems, los campos del formulario y el id en edición. Crea funciones para consultar todos los ítems con GET, crear con POST, actualizar con PUT y eliminar con DELETE contra la URL base de la API en https://localhost:8000. Con useEffect carga la lista al montar el componente. Cambia el formulario entre modo crear y modo editar según la variable de estado de edición y actualiza la UI en cada operación.

4 Estilos

Añade estilos básicos en tu hoja CSS para el formulario, la lista y los botones, priorizando claridad y usabilidad.

5 Ejecuta el frontend

Con npm start abrirás la app en https://localhost:3000. Ya podrás crear, listar, editar y eliminar ítems.

Parte 3 Conectar backend y frontend

La comunicación se realiza mediante peticiones HTTP. El frontend envía llamadas con Axios a rutas concretas. El backend FastAPI recibe, procesa y responde, leyendo o escribiendo en la base de datos. Después React actualiza la interfaz según la respuesta. Claves de la conexión: la constante base de la API debe apuntar a https://localhost:8000 y el middleware CORS debe permitir el origen https://localhost:3000.

Parte 4 Desplegar tu aplicación en internet

Puedes usar plataformas gestionadas para simplificar el despliegue. El flujo general para el backend es preparar un archivo de dependencias, un comando de arranque con Uvicorn y subir el código con Git a la plataforma elegida. Para el frontend genera un build de producción con npm run build y sirve los archivos estáticos en un hosting acorde. Si quieres asesoría o infraestructura robusta, nuestro equipo puede ayudarte con arquitectura, escalado, CI CD y observabilidad en servicios cloud aws y azure. Conoce más sobre nuestros servicios cloud en Azure y AWS.

Buenas prácticas para empezar

Organiza el código separando backend y frontend. Usa variables de entorno para configurar la URL de la API y secretos. Maneja errores con try catch en todas las llamadas. Documenta las partes clave. Usa Git desde el primer día. Desarrolla de forma incremental, probando cada función de manera aislada. Para producción evalúa cambiar SQLite por PostgreSQL u otro motor gestionado.

Solución de problemas frecuentes

Errores CORS revisa orígenes permitidos en el backend. Fallos de conexión valida que la API esté levantada y que la URL base sea correcta. Problemas de base de datos en producción utiliza una base de datos gestionada. Fallos de build verifica dependencias y versiones de Node y Python.

Próximos pasos

Agrega autenticación de usuarios, relaciones de datos más complejas, carga de imágenes, validación avanzada de formularios y mejora de UI con librerías como Material UI o Bootstrap. Explora automatización de procesos, agentes IA y analítica con power bi dentro de tus flujos de negocio. En Q2BSTUDIO te ayudamos a llevar tu app al siguiente nivel con software a medida, ia para empresas, ciberseguridad y servicios inteligencia de negocio, además de consultoría en agentes IA.

Sobre Q2BSTUDIO

Somos una empresa de desarrollo especializada en aplicaciones a medida y software a medida, con soluciones de inteligencia artificial, ciberseguridad y pentesting, servicios cloud aws y azure, automatización de procesos, data analytics y power bi. Desde un MVP con FastAPI y React hasta plataformas escalables listas para millones de usuarios, trabajamos contigo de forma ágil y transparente para acelerar el time to market y maximizar el retorno.

Enhorabuena por tu primera app full stack CRUD. Lo que has aprendido es la base del desarrollo web moderno. Sigue practicando y construyendo. Y si buscas un partner tecnológico, estaremos encantados de ayudarte a transformar tus ideas en producto digital.