CRUD en React consumiendo una API

Mis estimados programadores en el video anterior les prometí un CRUD PRO con REACT y lo prometido es deuda.

En este proyecto utilizaremos Bootstrap para los estilos, SweetAlert2 para los mensajitos de alerta y FontAwesome para los iconos, tendremos un solo componente, utilizaremos un solo modal para añadir y editar productos.

Crear app react:
npx create-react-app products-react

Instalar librerías:
npm i react-router-dom axios bootstrap sweetalert2 sweetalert2-react-content @fortawesome/fontawesome-free

La API que consumiremos ya la hicimos en videos anteriores, si quieren hacerla desde cero, les dejo la liga.

Igual, si quieren solo bajar el código fuente, aquí está el link.

[torrestobias]

Asi se hacen los videos, algo corto, facil de entender y bien directo, nada de explicaciones al pedo, muy bueno, saludos!

[maytechnologies]

Excelente... claro conciso, directo al grano sin estar dando saltos por ramas... practico y funcional...

[luisramirez]

Excelente ejemplo, funciona perfecto sin errores al abrir inspeccionar en explorador. La utilice con mi propia API y adapte los nombres de campos, funciona pero cada vez que inserta o elimina tengo que refrescar el navegador para que la pantalla actualice.

[omarmerino]

Actualmente estoy aprendiendo otro lenguaje ya que me lo piden en el lugar donde laboro y "GRACIAS A TI" he reforzado mas mis conocimientos.
Gracias brou!!

[juancamilovalenciavillanue]

explicas muy bien, el CRUD quedo genial para el consumo de la API, me hubiera gustado que el modal estuviera en otro componente y las funciones en otro archivo como para trabajar un poquito con la estructura de componentes, muchísimas gracias

[williamjosuepinedamartinez]

Gracias encerio por este video, sos un crack

[kliverdaelmairena]

Genio, con esto de aprende muchisimo, muchas gracias!

[velchaelmendez]

felicitaciones el video quedo muy bien esplicado, el Crud esta muy bien ejecutado

[anthondigital]

Seria bueno que hagas un vídeo con tablas relacionadas

[jangelGuerrero]

Muy buen video, muchas gracias, ¿Qué ventajas tiene el usar ReactJS vs JavaScript Puro en el 2024? Gracias.

[angiekth]

Me encanto tu video, muchas gracias!! (aunque la api ya no esta disponible)

[mrskull]

como sabe que tiene que llamar a la accion de guardar, cuando abro el modal para guardar, siempre cae en el metodo de actualizar en vez del de guardado

[facundobanegaz]

Me ayudaste mucho, una pregunta ¿como se puede hacer para evitar cargar el mismo producto dos veces?

[velchaelmendez]

Amigo ya hice el paso a paso de la api, y el Crud. despues hice correcciones con su código pero aun no ejecutas todas las funciones. Creo que es la Api es mi primera vez que trabajo com PHP y Laragon. Por favor necesito de su ayuda, gracias

[MrGari]

Muy buen trabajo. Todo funcional siguiendo tus pasos, me gustaría preguntarte si realizar las funciones para llamar a la api dentro del componente es una buena práctica o podría separar las funciones como eliminar, editar y agregar dentro de alguna carpeta llamada funciones o así tal cual lo haces esta bien? Gracias, espero tu respuesta.🎉

[JuanGonzalez-bpcn]

La api al día de hoy sigue funcionando? Me marca error

[AresMr]

Hola, al darle click a los botones, no funciona el despliegue de la pantalla para registrar, que podría ser?, Agradecería la syuda

[mtyred]

Que tal, tengo un problema a la hora de hacer las peticiones de editar y eliminar, solo me permite agregar nuevos productos

Tengo tal cual el crud de react y la api en laravel funcional y aún así no realiza las peticiones, me sale el siguiente error:

DELETE url 405 (Method Not Allowed)

Alguna idea de qué pueda ser?

[martinzumarraga]

realice el paso a paso y no me salio :( me ayudas?

[ignaciopino]

Hola buenas, he estado tratando de utilizar este crud, pero utilizando un endpoint de un tercero, pero me aparecen errores de cors al momento de eliminar, editar y agregar, al momento de hacer el get no tengo problemas, alguien sabe que puede ser?