CRUD con API REST en React JS (GET, POST, PUT, DELETE) | Tutorial en Español (2024)

En este vídeo aprenderás a cómo hacer un CRUD con API REST en React JS de una manera fácil y rápida. Las peticiones que se usarán serán GET, POST, DELETE y PUT. Es decir, Consultar, Insertar, Actualizar y Eliminar.

Para realizar las peticiones utilizaremos AXIOS, debido a que es compatible con la mayoría de navegadores, incluso con los más antiguos.

Utilizaremos los iconos de Font Awesome para los iconos de Editar y Eliminar.

También se realizará con ventanas modales, ya que es más funcional para cualquier usuario. Esto se hará con el paquete Reactstrap.

Además para la parte de los estilos utilizaremos Bootstrap.

Espero que este tutorial en español te sea de gran utilidad. Sino sabes como utilizar algunos de estos paquetes ⬇⬇⬇

[_MPP_]

I don't understand a word, but this was just what I needed! I did get my app running, thanks a lot!! :)

[manudokiller]

El contenido bien... pero vas como corriendo amigo.. respira un poco y explica más claro para que el video sea aún mejor... Saludos

[dannycc]

Seguiré recomendando tu canal, tienes muy buenos vídeos

[polaronthemic]

Tengo un error. Estoy haciendo el POST y al dar clic al botón submit, me refresca la lista de datos que tengo y automáticamente se borra el registro que acabo de hacer. Es decir, tengo un registro solamente, realizo uno a través del formulario, doy submit, se recarga el código donde está la lista y se desaparece el registro que acabo de hacer.

[thanh]

When I press add, the error "Request failed with status code 500". please help me

[SanchayanPackiyanathan]

Amigo no tienes videos sobre consumir api desde react con Token y autoidentificación ? seria bueno que hagas uno para consumir desde firebase. Muchas Gracias por tu videos!!!!

[abelsanchez]

Hola genio como estas, te queria preguntar lo siguiente. DONDE PUSISTE TU BACKEND EN EL PROYECTO ESTE QUE HICISTE O NO VA DENTRO DEL PROYECTO ESA ES MI DUDA. MUCHAS GRACIAS TE SIGO SIEMPRE

[flormicheloud]

Hola al ejecujar Peticion get me lanza este error: Uncaught (in promise) TypeError: this.state.data.map is not a function, que puede ser?

[ivandariovanegasperezworld]

Excelente video. Qué la complejidad de implmentar varios querys de distintos motores?


Buena paz por echarte ese videotote.

[guillermoteletor]

excelente video es el tutorial que mas se apega a lo que necesito, me servira bastante ya que esta arquitectura la estare usando para mi proyecto de seminario, te agradeceria si pudieras hacer un crud, siempre consumiendo una api con react, pero usando material UI, saludos y otra ves gracias por compartir tus conocimientos.

[ivomontanari]

Genial, no tienes el mismo tutorial pero con hooks?

[tiagoae]

BorjaScript, depronto sabes porque cuando hago la peticion POST desde el front a un servidor que yo hice me arroja error 500, pero cuando lo hago desde postman ingresa normal?

[cardmaster]

buenas, porque hace todo el codigo en app.js en vez de hacerlo en components, es la idea de react no? y tambien es common practice en cualquier empresa que se trabaje react.

[soporte]

Haz codigo limpio y bonito, está todo amontonado y con mal epaciado e indentado.
No es hate, es una critica constructiva

[javico]

Yo hice uno con hooks pero mi problema es con la paginación, ya la tengo hecha pero no quiero que si tienes 100 páginas aparezcan 100 si no solo una rango de páginas

[Marr]

Cuando hago el handleChange me da el siguiente error: Support for the experimental syntax 'classProperties' isn't currently enabled
Cómo podría solucionarlo?
Gracias y muy buen video!

[gilbertardila]

muchas gracias amigo me has sido de mucha utilidad en un proyecto

[juliangustavogilhernandez]

hola una pregunta como podría buscar por id y que me traiga solo los datos que esten relacionados ya tengo el back pero no se como hacerlo en front

[siberiank]

Hola! Genial el video!! Podrías a este proyecto agregarle SweetAlert2 y DataTable con paginacion??

[lucioeduardochumilgutierre]

Te salen bastantes errors en el console, deberias trabajar en eso