Django REST Framework y React CRUD
En esta artículo vamos a explorar cómo puedes implementar un CRUD (Create, Read, Update, Delete) usando Django REST Framework en el backend y React en el frontend.
Backend con Django REST Framework
Django REST Framework es una poderosa herramienta para construir APIs en Python. Con ella, puedes fácilmente crear endpoints que soporten operaciones CRUD. Para empezar, asegúrate de tener Django instalado, luego puedes instalar Django REST Framework usando pip:
pip install djangorestframework
Luego, puedes crear un nuevo proyecto de Django y una aplicación dentro de ese proyecto para tu API:
django-admin startproject myproject
cd myproject
python manage.py startapp api
Dentro de la aplicación `api`, puedes crear tus modelos de datos utilizando Django’s ORM. Luego, puedes crear endpoints para esos modelos utilizando Django REST Framework’s serializers y viewsets.
Frontend con React
React es una popular librería de JavaScript para construir interfaces de usuario. Para usar React en tu proyecto, necesitarás configurar un ambiente de desarrollo con Node.js y npm. Luego, puedes crear un nuevo proyecto de React con Create React App:
npx create-react-app myapp
cd myapp
npm start
Una vez que tienes tu proyecto de React configurado, puedes empezar a crear componentes para manejar las operaciones CRUD. Puedes usar librerías como axios para hacer peticiones a tu API de Django REST Framework desde React.
Integrando Django REST Framework y React
Finalmente, necesitarás integrar tu backend con Django REST Framework y tu frontend con React. Puedes hacer esto haciendo peticiones HTTP desde tu frontend a los endpoints de tu API, y mostrando la data en tu interface de usuario de React. Puedes también implementar lógica para manejar la creación, edición y eliminación de datos desde tu frontend hacia el backend.
Al seguir estos pasos, podrás construir un sistema CRUD completo utilizando Django REST Framework en el backend y React en el frontend. Esto te permitirá crear, leer, actualizar y eliminar datos de tu aplicación de manera eficiente y escalable.
Grande fazt estaria genial que subas mas ejemplos de django rest framework ejmplo subida de archivos, auth etc
Bro, eres un mago, nos ayudaste a hacer una buena aplicación web para nuestra materia de programación para ingeniería, la web es de ingresos y gastos con registro de usuario, pero todo el código base lo hicimos guiándonos de este video, gracias, de verdad, mis dos compañeros y yo te lo agradecemos.
Genio!
Fazt te amo! ❤ que buen contenido que subis! Muchas gracias!!
Me daba un error en 1:04:20
'task' is missing in props validationeslintreact/prop-types
la solución que encontre fue:
import PropTypes from "prop-types";
TaskCard.propTypes = {
task: PropTypes.shape({
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
// Puedes agregar más validaciones según la estructura de tu objeto 'task'
}).isRequired,
};
espero les sirva! Saludos
Primero que nada muchas gracias por los cursos he aprendido demasiado. Y continúo con una duda que tengo sobre éste mismo. Terminé el proyecto y lo subí a RENDER, en inicio la app funciona correctamente, pero al recargar la página me sale un error "not found", tengo entendido que es un tema de SPA. Intenté buscar diferentes soluciones como por ejemplo "render.yaml" pero no he conseguido resolver el problema. Quisiera alguna recomendación para poder dar con la solución por favor 🙏
El mejor curso que encontré. Felicitaciones por su enseñanza y vasto conocimiento. Muy buen profesional y profesor.
.nombre_del_entorno_virtualScriptsActivate
46:00
Gracias! excelente video
Gracias por compartir lo que sabes, es de mucha ayuda 😀
Muchas gracias, esta super.
Se puede utilizar django y react native ?
Voy a comenzar a estudiar vue.js. Sería genial un video así con Vue. Aunque creo que se podría extrapolar usando Vue porque tú creas una API y esto es indiferente de la tecnología del cliente, ¿cierto?
Este vídeo contiene lo que tenía pensado hacer. Thank u.
Gracias bro, eres un capo
Gran video !! Me quede en la parte donde uso el post de axios, me sale este error tasks.api.js?t=1695873097655:9 POST http://localhost:8000/task/api/v1/tasks/ 400 (Bad Request)
dispatchXhrRequest @ xhr.js:251
xhr @ xhr.js:49
dispatchRequest @ dispatchRequest.js:51
request @ Axios.js:148
httpMethod @ Axios.js:187
wrap @ bind.js:5
crearNuevaTarea @ tasks.api.js?t=1695873097655:9
(anonymous) @ TaskFormPage.jsx:11
(anonymous) @ createFormControl.ts:1065
await in (anonymous) (async)
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
Show 22 more frames
Show less
TaskFormPage.jsx:24 Error en la solicitud: AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
muy buen tutorial,gracias
en mi pc me funciona bien lo del entorno virtual al elegirlo en el VS code pero en mi laptop no, tengo que ejecutarlo manualmente con start activate con la ruta dentro de Scripts alguno le pasó?
Gracias Fazt. Excelente contenido!