Fazt, llevo poco mas de un año trabajando como frontEnd y gran parte de lo que se es gracias a tus videos, recordar esto es de gran ayuda, es parte de lo que se hace a diario en la vida laboral y aveces aun me cuesta entender ciertas partes del código y esto me refresca mucho infinitas gracias!!!
Cuando consiga mi primer trabajo de programador juro que voy a apoyar monetariamente el canal. Por ahora solo le pongo like a todos los videos, sos muy bueno !
Eres el máximo exponente de la web , gracias fazt. que alegria que vuelvas a los origenes y regrabar los cursos que lo veiamos hace ya varios años. cuanto te debo mi querido FAZT
Muchas gracias por el contenido,justo estoy practicando full React. Excelente video 👌 como siempre. Si puedes hacer más de React sería lo máximo. Un saludo !
nah la verdad me encantan tus videos, esto me sirve muchisimo para entender de a poquito react (no entendi la mitad del video aprox, soy medio lento, pero igual esto me sigue sirviendo muchisimo) tu canal me esta ayudando mucho a ir entendiendo todo esto del desarrollo web, y me encanta tu manera de explicar, me gustan un monton tus videos! mil gracias!!
Oe Fazt explicas muy bien, veo tus videos desde hace tiempo, gracias por tu contenido Yo utilice context API para manejas el estado de todas las tareas y useEffect en 1 solo archivo ya que no me gusta tener funciones ni variables de estado en App, solamente llamar los componentes
parece facil de principio ,pero despues se vuelve todo un cubo magic y mucha informacion clara..esta muy bien asi nos ayuda a ejercitar la mente,exelente!!!
Excelente video fazt como siempre!!!! Más vídeos de este tipo estarían genial!!!! Oye sería genia uno de autenticación back + front (node express jet react y el plus de react Google login)
Que interesante sería un video de solo errores con hooks, porque toda gente que veo muestran ejemplos fáciles y curados y nunca muestran errores y warnings. Por ejemplo, si yo quiero usar un useEffect únicamente después que se carga en el primer render del componente, pero se usan varias variables, el React te manda warnings.
@@FaztCode gracias por tu respuesta. Otro video con respecto a React es el library hell: - que contienen warnings de seguridad porque no actualizan sus dependencias - que son incompatibles cuando se cambian de versión, como de 16 a 17
47:55 tengo una duda cuando eliminaste el a mi no me persiste o queda en localstorage los datos, desaparece, incluso en un video anterior de localstorage tu no quitas el React.StrictMode ? por que , gracias
una muy buena práctica, están geniales los tutoriales. Consulta, habría forma de ir subiendo de un local storage a una base de datos 'real', abría un tutorial con esa funcionalidad o es muy específica?.
Me lo imagino con una pwa que a almacenado datos offline y necesita enviarlos al backend cuando la conexión vuelva. Es buena idea para un ejemplo, voy a crear algo. Gracias por la idea Ricardo :)
Este tema se llama Ayu, y extensiones que tipicamente uso con React son Prettier, ESlint, material icon themes, react ES7 Snippets, Github copilot y Vim (la extension de VScode). De hecho me has dado idea para mostar un video del tema :)
Hola Fazt Excelente, gracias por todo tu trabajo y gran esfuerzo. Si puedes publicar alguno de estos tutoriales: -MySQL -TailwindCSS a fondo -MERN con Redux Toolkit, GraphQL, mongodb Atlas & TailwindCSS en vs code (Desarrrollo y Despliegue) Gracias
Hola Gustavo, con HTML, CSS y Javascript (funciones, arreglos, objetos, y apis basicas de navegador como fetch) te bastaria para poder empezar en React. Muy pronto voy a estar renovando el curso de React, para esta semana entrante
Hola William, el tema que uso se llama Ayu: marketplace.visualstudio.com/items?itemName=teabyii.ayu Y en cuanto a las configuraciones, mencione varias en este video :) ua-cam.com/video/3gAq62EKkv8/v-deo.html
Fazt saludos, comenzé a aprender React hace pocos días con este video, siguiendo paso por paso, pero me está dando unos problemas aún teniendo el código igual al del video, el primero es que cuando creo una tarea se muestra el checkbox pero no me muestra el nombre de la tarea, solo el checkbox y el segundo, en el metodo toggleTask para cambir el estado de la tarea, cuando se lo paso a el onChange del checkbox me da Uncaught TypeError: toggleTask is not a function at onChange. Qué podría ser? Espero tu respuesta. Gracias por los videos, son de gran ayuda
Hola, Alguien sabe por qué cuando estoy en un repo el intellisense de VSC me muestra las opciones para escribir mas rápido por ejemplo etiquetas en el return de un componente de react, pero voy a empezar con este proyecto y ya el intellisense no muestra los atajos que me mostraba en otros proyectos, tengo la extension de react de snippets, pero nada que funciona, tengo que escribir toda la etiqueta, si es un input tengo que escibir todo hasta el type, placeholder, el onChange y onClcik, AIIIUDAA!
Amigo, justo unos minutos despues de responderte encontre lo que te puede estar faltando, lo encontre en otro curso de Fazt, claro el curso no es de Emmet pero si encontre lo que quizas pueda darte solucion, está en el minuto 6:30 ua-cam.com/video/-LB0N_EO7X0/v-deo.html
@@FaztCode gracias por considerarlo, lo estoy viendo en la escuela y no hay ejemplos con capacitor, solo cordova igual y no es complicado hacerlo pero se me acaba el tiempo jaja. de igual manera estare atento a proximos videos
si deseo pasar toda esa informacion a una base de datos usando express con mongodb ? hariasn un tuto? estoy aprendiendo react pero con vite y me resulta complejo a la hora de enlazar jsx con js ya que tus tutos estan en js pero no comprendo como hacer la logica ya que cuando uso modulos js me da un error
Hola Andres, React es solo una biblioteca de Frotend, asi que para poder guardar los datos en una base de datos necesitas crear un backend, alli desarrollaras algo llamado una REST API, y esta es la que se comunicara con un backend, te recomendaria hacer este ejemplo practico para que puedas ver cual es el proceso. - ¿Que es MERN Stack? ua-cam.com/video/d7_CeHM9FRc/v-deo.html - MERN CRUD con MySQL ua-cam.com/video/dJbd7BYofp4/v-deo.html - MERN con Mongodb y API Context ua-cam.com/video/zm5gpipw3HM/v-deo.html
Fazt como va, tengo una duda es necesario hacer la funcion en app.js y despues pasarsela a los componentes hijos o puedo hacer la funcion en el componente directo alli?
Hola Daniel, por lo general es necesario si tus datos residen en el componente app.js, porque de esa forma las funciones pueden leer los datos. Intenta removerlos a sus propios archivos para que te des cuenta. Ahora si buscas una mejor forma de evitar pasar funciones a otras funciones, te recomendaría estudiar React Context que este si te permite evitar pasar funciones creando un contexto global. Y después de esto podrás continuar estudiando redux, o lo que se llaman bibliotecas de manejo de estado :)
Debes asegurarte de tener el otro useeffect que revisa primero si hay datos en el localstorage de lo contrario establecerá el arreglo vacío que está en el estado inicial
He buscado, y antes que eliminar el strict mode es mejor hacer esto: useEffect(() => { const handleBeforeUnload = (event) => { // Guardamos los datos en localStorage antes de que la página se cierre localStorage.setItem("tasks", JSON.stringify(tasksItems)); // Cancelamos el evento para evitar que se muestre el mensaje de confirmación al usuario event.preventDefault(); event.returnValue = ""; ("esto es para firefox que si q muestra mensaje") }; window.addEventListener("beforeunload", handleBeforeUnload); return () => { window.removeEventListener("beforeunload", handleBeforeUnload); }; }, [tasksItems]);
Fazt, llevo poco mas de un año trabajando como frontEnd y gran parte de lo que se es gracias a tus videos, recordar esto es de gran ayuda, es parte de lo que se hace a diario en la vida laboral y aveces aun me cuesta entender ciertas partes del código y esto me refresca mucho infinitas gracias!!!
Un gusto leer Jonathan, y saber que te es útil :)
Cuando consiga mi primer trabajo de programador juro que voy a apoyar monetariamente el canal. Por ahora solo le pongo like a todos los videos, sos muy bueno !
Yo también se lo merece
Eres el máximo exponente de la web , gracias fazt. que alegria que vuelvas a los origenes y regrabar los cursos que lo veiamos hace ya varios años. cuanto te debo mi querido FAZT
no se puede más q agradecer, éstas son las cosas para las que todo esto tiene sentido... felicitaciones
Muchas gracias por el contenido,justo estoy practicando full React.
Excelente video 👌 como siempre. Si puedes hacer más de React sería lo máximo. Un saludo !
Gracias Fazt literal me acabas de salvar el semestre en un prueba que tenia, tu forma de explicar hace que sea muy facil de aprender
nah la verdad me encantan tus videos, esto me sirve muchisimo para entender de a poquito react (no entendi la mitad del video aprox, soy medio lento, pero igual esto me sigue sirviendo muchisimo) tu canal me esta ayudando mucho a ir entendiendo todo esto del desarrollo web, y me encanta tu manera de explicar, me gustan un monton tus videos! mil gracias!!
Empezé react hace poco y gracias a ti estoy practicando a full! Gracias fazt ♥ , espero que hagas uno con REDUX, porfaaa y gracias de nuevo :)
voy a publicar un ejemplo con Redux Toolkit muy pronto, son 2 de hecho, uno solo en el front y otro con un backend de nodejs :)
@@FaztCode Te amo mas que a mi mismo xdd Gracias
Excelente proyecto faz, te sigo desde hace mucho y me parece excelente tu forma de explicar y hacer videos, sigue asi mucho exito
Actualmente estoy con lit, pero esta tarde le echaré un vistazo, y el fin de semana a aplicar react siguiendo tu tutorial.
Gracias fazt
Con este man poco a poco me estoy haciendo fullstack. Gracias Fazt!.
Oe Fazt explicas muy bien, veo tus videos desde hace tiempo, gracias por tu contenido
Yo utilice context API para manejas el estado de todas las tareas y useEffect en 1 solo archivo ya que no me gusta tener funciones ni variables de estado en App, solamente llamar los componentes
En este canal siempre doy LIKE antes de ver el video. 🔥🔥
parece facil de principio ,pero despues se vuelve todo un cubo magic y mucha informacion clara..esta muy bien asi nos ayuda a ejercitar la mente,exelente!!!
yo iba bien hasta unn punto empece a marearme. pero no es por que explica mal. es por que recien estoy aprendiendo como se maneja en react y me pierdo
Impresionante la reutilización de código en el componente
Buen ejemplo, sirven mucho para practicar y se aprende bastante, nuevamente gracias FAZT.
Excelente Fatz como siempre, gracias x compartir 1 lujo.
Excelente tu contenido Fazt, tenes una excelente forma de explicar. Por favor mas contenido de React, saludos!
justo estaba empezando con react .... este video me viene impecable graciass
Me gusta el contenido de react 👌
Venga bruh!!! Lo estas haciendo muy bien, sigue asi!!!
Gracias bruh
Muchas gracias Fazt, excelente tutorial, me gusto la parte de github pages que yo lo hacia desde el lado complicado LOL
A demas de probar mi insignia, vengo a decirte que este video es excelente. Abrazo gande!
Wow muchas gracias Manuel 🫡
Excelente video fazt como siempre!!!! Más vídeos de este tipo estarían genial!!!! Oye sería genia uno de autenticación back + front (node express jet react y el plus de react Google login)
Ese ya lo tengo listo para grabar se llamar Mern stack login con jwt, tratarte de empezar a grabarlo pronto
Maestro de maestros.
excelente el video!
el unico canal que compite con este, es Fazt 😂😂
Genial Fazt! Gracias por tan excelentes videos. Siempre me ayudan muchisimo!
Buenísimo , estos proyectos de React o Js me vienen genial , gracias ❤️
Justo lo que quería ver, gracias fazt!
Muchísimas gracias Fazt por todo de verdad. Si puedes hacer algo metiendo Redux sería lo máximo.
Claro que si ya estoy elaborando varios ejemplos de RTK
@@FaztCode De fábula tio, muchas gracias por regalarnos de tus conocimientos tio. Un abrazo y saludos desde España, se te quiere.
Aca los que seguimos aprendiendo gracias a Fazt y no sabemos quienes son Ryan y Joe, ni por que los usa en todos sus ejemplos.
Son nombres que tomo de una serie llamada Halt and catch fire :)
Eres el mejor Bro enserio que si.
Gracias Fazt
Fazt TKM x siempre.
Gracias Fazt por tu contenido la verdad he aprendido mucho, para cuándo tendremos el curso de redux
Un ejemplo practico de RTK se viene para la semana entrante
Gracias Hermano me encantó!!!!!!!!!!!!!!
gracias por las practicas que compartes eso me ayuda a reforzar
TE AMOOOOO ANIMALITO DE DIOSSSSSSSSSSSS
Muchas gracias execelente contenido!
A ti Daniel :)
Fazt!! para cuando te lanzas un curso en Udemy con proyectos reales que hayas realizado de React y Next, explicas muy bien !!
FreeCodeCamp me enseña y fazt me pule..... gracias!!
Que interesante sería un video de solo errores con hooks, porque toda gente que veo muestran ejemplos fáciles y curados y nunca muestran errores y warnings. Por ejemplo, si yo quiero usar un useEffect únicamente después que se carga en el primer render del componente, pero se usan varias variables, el React te manda warnings.
Es muy buena idea, voy a crear un video de manejo de errores en React :) Gracias por comentar Lorenzo
@@FaztCode gracias por tu respuesta. Otro video con respecto a React es el library hell:
- que contienen warnings de seguridad porque no actualizan sus dependencias
- que son incompatibles cuando se cambian de versión, como de 16 a 17
Épico!!!!!!!
te amo fazt
TE AMO
47:55 tengo una duda cuando eliminaste el a mi no me persiste o queda en localstorage los datos, desaparece, incluso en un video anterior de localstorage tu no quitas el React.StrictMode ? por que , gracias
Ojalá puedas algún día hacer este mismo ejercicio con django. Pero de verdad te agradezco por tu contenido.
es que Platzi está hecho con esas 2 tecnologías pero quiero integrarlo de una forma más pro
Lo tengo muy pendiente, solo que me atraso en las publicaciones, voy a tratar de publicar los dos ejemplos de django esta semana
@@FaztCode pero django + react por favor, hay muy poco contenido en español sobre eso
una muy buena práctica, están geniales los tutoriales. Consulta, habría forma de ir subiendo de un local storage a una base de datos 'real', abría un tutorial con esa funcionalidad o es muy específica?.
Me lo imagino con una pwa que a almacenado datos offline y necesita enviarlos al backend cuando la conexión vuelva. Es buena idea para un ejemplo, voy a crear algo. Gracias por la idea Ricardo :)
Excelente video, más de este tipo fazt. Por cierto, que extensiones recomiendas o usas para React? Y el tema que estás usando se ve genial !
Este tema se llama Ayu, y extensiones que tipicamente uso con React son Prettier, ESlint, material icon themes, react ES7 Snippets, Github copilot y Vim (la extension de VScode). De hecho me has dado idea para mostar un video del tema :)
gracias por todo pa
Buenisimos el video, si podes pasar el nombre del tema de vscode, buenisimo. Tenes mi like
Hola Nico, el tema se llama Ayu
Excelente video. Muchas gracias por esto! :)
Pregunta, que distro de linux usas? Se ve muy bonita.
Gracias. La distro es Xubuntu :)
Hola Fazt
Excelente, gracias por todo tu trabajo y gran esfuerzo.
Si puedes publicar alguno de estos tutoriales:
-MySQL
-TailwindCSS a fondo
-MERN con Redux Toolkit, GraphQL, mongodb Atlas & TailwindCSS
en vs code (Desarrrollo y Despliegue)
Gracias
Todos ya los tengo avanzado en un 90%, asi que voy a terminarlos para publicarlos pronto, son muy buenas sugerencias :)
Hola tío Fazt. Qué tengo que saber antes de aprender React? js,html y css? o algo más?
Hola Gustavo, con HTML, CSS y Javascript (funciones, arreglos, objetos, y apis basicas de navegador como fetch) te bastaria para poder empezar en React. Muy pronto voy a estar renovando el curso de React, para esta semana entrante
Puedes hacer un video de cosas Senior con React y Nodejs, bajo tu larga experiencia?
Es buena idea. JavaScript avanzado sería. Voy a elaborar algo
Hola Fazt, gracias por el vídeo, que Thema y configuración de vsc estás usando
Hola William, el tema que uso se llama Ayu:
marketplace.visualstudio.com/items?itemName=teabyii.ayu
Y en cuanto a las configuraciones, mencione varias en este video :)
ua-cam.com/video/3gAq62EKkv8/v-deo.html
Fazt saludos, comenzé a aprender React hace pocos días con este video, siguiendo paso por paso, pero me está dando unos problemas aún teniendo el código igual al del video, el primero es que cuando creo una tarea se muestra el checkbox pero no me muestra el nombre de la tarea, solo el checkbox y el segundo, en el metodo toggleTask para cambir el estado de la tarea, cuando se lo paso a el onChange del checkbox me da Uncaught TypeError: toggleTask is not a function
at onChange. Qué podría ser? Espero tu respuesta. Gracias por los videos, son de gran ayuda
Hola, Alguien sabe por qué cuando estoy en un repo el intellisense de VSC me muestra las opciones para escribir mas rápido por ejemplo etiquetas en el return de un componente de react, pero voy a empezar con este proyecto y ya el intellisense no muestra los atajos que me mostraba en otros proyectos, tengo la extension de react de snippets, pero nada que funciona, tengo que escribir toda la etiqueta, si es un input tengo que escibir todo hasta el type, placeholder, el onChange y onClcik, AIIIUDAA!
amigo a mi me paso pero no con las de html sino con las de react, creo si mal no estoy que lo tuyo tiene que ver con emmet
Amigo, justo unos minutos despues de responderte encontre lo que te puede estar faltando, lo encontre en otro curso de Fazt, claro el curso no es de Emmet pero si encontre lo que quizas pueda darte solucion, está en el minuto 6:30
ua-cam.com/video/-LB0N_EO7X0/v-deo.html
Master 🥵
Hola. Cual de tu material recomiendas para iniciar de 0 React? Gracias.
El curso de Javacript para React: ua-cam.com/video/lVqHiTCIRQg/v-deo.html
y Luego el curso de React: ua-cam.com/video/rLoWMU4L_qE/v-deo.html
Gracias@@FaztCode muy amable!!
hola, disculpa no tienes algun video de ionic capactitor haciendo un CRUD con SQlite?
Hola Gerardo, aun no tengo un tutorial, pero es buena idea para un ejemplo, lo apunto para crear algo relacionado pronto
@@FaztCode gracias por considerarlo, lo estoy viendo en la escuela y no hay ejemplos con capacitor, solo cordova igual y no es complicado hacerlo pero se me acaba el tiempo jaja. de igual manera estare atento a proximos videos
💪💪
si deseo pasar toda esa informacion a una base de datos usando express con mongodb ? hariasn un tuto? estoy aprendiendo react pero con vite y me resulta complejo a la hora de enlazar jsx con js ya que tus tutos estan en js pero no comprendo como hacer la logica ya que cuando uso modulos js me da un error
Hola Andres, React es solo una biblioteca de Frotend, asi que para poder guardar los datos en una base de datos necesitas crear un backend, alli desarrollaras algo llamado una REST API, y esta es la que se comunicara con un backend, te recomendaria hacer este ejemplo practico para que puedas ver cual es el proceso.
- ¿Que es MERN Stack? ua-cam.com/video/d7_CeHM9FRc/v-deo.html
- MERN CRUD con MySQL ua-cam.com/video/dJbd7BYofp4/v-deo.html
- MERN con Mongodb y API Context ua-cam.com/video/zm5gpipw3HM/v-deo.html
👽👽😍😍😍
tengo una pregunta algo ingenua, aun se puede usar creat-react-app, ahora toca no next, si quiero seguir el tutorial?
actualmente recomendaria usar Vitejs y el resto del tutorial seria lo mismo:
ua-cam.com/video/UX4gvort2TU/v-deo.html
@@FaztCode muchas gracias
Fazt como va, tengo una duda es necesario hacer la funcion en app.js y despues pasarsela a los componentes hijos o puedo hacer la funcion en el componente directo alli?
cuando no sea necesario hacerla en app
Hola Daniel, por lo general es necesario si tus datos residen en el componente app.js, porque de esa forma las funciones pueden leer los datos. Intenta removerlos a sus propios archivos para que te des cuenta. Ahora si buscas una mejor forma de evitar pasar funciones a otras funciones, te recomendaría estudiar React Context que este si te permite evitar pasar funciones creando un contexto global. Y después de esto podrás continuar estudiando redux, o lo que se llaman bibliotecas de manejo de estado :)
@@FaztCode excelente consejo, gracias men
fazt ya elimine el ReactStrictMode del archivo index, y cuando refresco la pagina se borran los datos que puse. ayuda
Debes asegurarte de tener el otro useeffect que revisa primero si hay datos en el localstorage de lo contrario establecerá el arreglo vacío que está en el estado inicial
@@FaztCode tengo el código exactamente igual que el repositorio de github Y me sigue el borrando las tareas :(
Me pasó lo mismo, ubica el UseEffect de "let data" arriba del otro useEffect, de esta forma se ejecutara en primer orden y mantendrá al refrescar
@@nacholopez3320sos mi padre, gracias
Por cierto usando pnpm y vite, la instalacion va mucho más rápido que create react app.
Si, aunque no estaba seguro de usarlo como todavía no es muy popular. Pero para próximos ejemplos voy a empezar a usar Vite
Cuando un tutorial de Flexbox Bro? Así como el de Grid que hiciste
Ese lo tengo en 90% pero se me ha olvidado terminarlo, como salto de tema en tema. lo voy a colocar para la semana entrante :)
Que tema usas ?
Este se llama Ayu
He buscado, y antes que eliminar el strict mode es mejor hacer esto:
useEffect(() => {
const handleBeforeUnload = (event) => {
// Guardamos los datos en localStorage antes de que la página se cierre
localStorage.setItem("tasks", JSON.stringify(tasksItems));
// Cancelamos el evento para evitar que se muestre el mensaje de confirmación al usuario
event.preventDefault();
event.returnValue = ""; ("esto es para firefox que si q muestra mensaje")
};
window.addEventListener("beforeunload", handleBeforeUnload);
return () => {
window.removeEventListener("beforeunload", handleBeforeUnload);
};
}, [tasksItems]);
Podrías hacer este mismo video con Angular?
Tenia un ejemplo algo antiguo, pero voy a actualizarlo muy pronto.
@@FaztCode Muchas gracias.
Cual es ese tema de vscode?
El tema se llama ayu
tienes servidor de discord?
Hola, te dejo un enlace:
discord.gg/JpnY3YqzCN
Fazt
A pesar de que tiene 7 meses, este tutotial creo q está desactualizado. No se puede seguir al pie de la letra, hay cosas q no funcionan.
Fazt Code
, enseña como encontrar trabajo. 😭
Es buena idea, voy a crear algún video de tips :)
Que tema usas?
El que se muestra en este video se llama Ayu