MERN Stack con MySQL - React MySQL CRUD (Context API, TailwindCSS)

En este tutorial aprenderás a crear una aplicación web fullstack usando el Stack MERN (MySQL, Express, React, Node), solo que usaremos en nuestro caso MySQL en lugar de Mongodb. Primero crearemos una aplicacion Backend usando Javascript del lado Servidor con Nodejs, Express, y MySQL y luego crearemos un frontend de React usando Vite (un generador de proyectos alternativo a create-react-app), lo que crearemos es un tipico CRUD (Create, Read, Update, Delete) de tareas desde cero.

Código del Ejemplo Práctico:

Índice del contenido:
Este ejemplo esta dividido en las siguientes secciones:

00:00 Introducción
01:35 Project Setup
18:56 Server Routes
26:03 Create tasks endpoint
38:05 Get tasks endpoint
45:32 Delete tasks endpoint
49:31 Update tasks endpoint
53:52 Error Handling
01:00:15 Frontend Setup
01:08:52 Create Task Frontend
01:27:26 List Tasks Frontend
01:36:39 Delete Tasks Frontend
01:42:38 Context Tasks - Delete
02:07:01 Update Tasks Frontend
02:24:14 Toggle Done Frontend
02:33:09 TailwindCSS

🎥 Videos Recomendados:

👨‍💻 ¿Qué servicios y productos utilizo?

#mysql #react #mernstack

[ferxas]

Nunca me cansaré de decir que eres uno de los mejores sino el mejor youtuber en esta área educativa. Felicidades Fazt, no serás el más grande, pero tienes una base de calidad increíble!

[json]

me sorprende la constancia con la que subes videos, en serio eres uno de los mejores en lo que haces. no sabes cuanto me ayudas a mi y a muchas personas.

[FreddyFullStack]

Realmente me Resumiste 30 horas de clases de mi Bootcamp, soy Henry, en 3 horas ❤, y muy bien explicado, relacionando todo el proyecto ❤ muchas gracias y felicidades ❤ "me gustaría tener ese dominio Fullstack en javascript "

[ffpp]

ya solucionaron el error de vite que precisaba la creacion del ContextProvider y y el Context en archivos separados. A dia de hoy se pueden escribir en el mismo archivo. Excelente tutorial! <3

[omarsalgadodiaz]

He estado esperando un ejemplo práctico con React y una base de datos SQL, muchas gracias por tus aportes como siempre Fazt!! 🤘🏻

[devdariill]

On: 2:17:26
Notas:
1:15:00 manejo de onChange handleChange
1:42:55 - 1:50:31 contexto cuando elimina una tarea
1:51:32 crear hook para mejor uso de context
2:00:40 solucion error context vite react
2:03:00 autorefresh ?...
2:11:30 h1 dinamicos
2:18:11 enablereinitialize para cargar datos de task para editar
2:23:17 redireccion desde formik
2:55:00 onclick done like edit flask
2:32:20 autorefresh datos manipulados
2:51:45 ruta absoulta

[NNeshz]

Man, eres totalmente increíble, tu manera de enseñar y el contenido que genera hace que cualquier persona que quiera aprender pueda llegar al área laboral con los conocimientos que compartes y los proyectos que haces, eres el mejor enseñando <3

[miguelangelfc]

de verdad muchísimas gracias Fazt, mi primer sueldo será para unir me a tu canal y las cariñosas.

[oscarclaros]

Siempre tus tutoriales son los mejores, mil gracias FAZT por compartir tu conocimiento

[FreddyFullStack]

Me encantó el trucazo para no usar hook en el formulario, la simplificaste como un Súper Sinnior en Reactjs ❤

[andresleonardo]

gracias por tus videos. El problema de CORS 1:20:49

[maicoljaquez]

Dios mio que gran aporte, no me canso de ver tus videos y de seguir tu ejemplo, muchas gracias fast.

[nythe]

Como siempre, excelente, he visto muchos videos sobre useEffect, use State, routes, context etc etc pero todo queda tan claro con ejericios practicos. Muchas gracias. Ojala que sigas trayendo mas cosas sobre react (cosas que se usen en proyectos reales como autenticacion, validacion de formularios, datatbles etc)

[joshsanders]

Excelente! Cada vez te superas más y más.

[nelsonmeza]

Buenas Tardes amigo FAZT, le felicito por este tutorial que instruye en como integrar todas estas herramientas, ademas le doy las gracias por compartir su

[fabyoaryel]

Excelente colaboración amigo, sigue siempre así. Saludos desde Paraguay.

[marvinzuniga]

El bro que me ha servido de inspiracion para darle mucho mas duro al webdev. Gracias Crack.

[misaellorenzo]

He aprendido mucho con tus videos! Gracias por brindar tu conocimiento que me han ayudado muchisimo! Grande Fatz!👏👏

[arromero]

Maestro Fazt, nuevamente gracias por tus aportes...

PD: Shot por cada vez que Fazt confunde TaskProvider con TaskContext😆

[carlosperez-hzoh]

Excelente, . Me encantan los videos de larga duracion y proyectos completos, donde se aprende bastante