React - Aplicación de tareas con useState, useEffect y localStorage

[@JonathanRestan]

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!!!

[@FaztCode]

Un gusto leer Jonathan, y saber que te es útil :)

[@joaqo09]

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 !

[@danielaguilar7570]

Yo también se lo merece

[@josealonso3685]

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

[@ryfr1702]

no se puede más q agradecer, éstas son las cosas para las que todo esto tiene sentido... felicitaciones

[@Dun_Dev]

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 !

[@oh-vito]

Impresionante la reutilización de código en el componente

[@khessed3545]

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

[@gianfrancoperaltabravo6004]

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 :)

[@FaztCode]

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 :)

[@gianfrancoperaltabravo6004]

@@FaztCode Te amo mas que a mi mismo xdd Gracias

[@tomasanch7941]

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!!

[@brokeneyes8951]

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

[@leninlima416]

Con este man poco a poco me estoy haciendo fullstack. Gracias Fazt!.

[@PalestinianCode]

Actualmente estoy con lit, pero esta tarde le echaré un vistazo, y el fin de semana a aplicar react siguiendo tu tutorial. Gracias fazt

[@cristian_27]

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!!!

[@leandrov8992]

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

[@josedanielrodriguez3348]

el unico canal que compite con este, es Fazt 😂😂

[@zaik6383]

justo estaba empezando con react .... este video me viene impecable graciass

[@rafaelAgc1996]

Excelente proyecto faz, te sigo desde hace mucho y me parece excelente tu forma de explicar y hacer videos, sigue asi mucho exito

[@eliuddyn]

En este canal siempre doy LIKE antes de ver el video. 🔥🔥

[@edmundodominguezagurcia7254]

Muchas gracias Fazt, excelente tutorial, me gusto la parte de github pages que yo lo hacia desde el lado complicado LOL

[@oscarclaros2225]

Buen ejemplo, sirven mucho para practicar y se aprende bastante, nuevamente gracias FAZT.

[@matiasperessutti6443]

Excelente tu contenido Fazt, tenes una excelente forma de explicar. Por favor mas contenido de React, saludos!

[@CAFernandezB]

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)

[@FaztCode]

Ese ya lo tengo listo para grabar se llamar Mern stack login con jwt, tratarte de empezar a grabarlo pronto

[@manularrere]

A demas de probar mi insignia, vengo a decirte que este video es excelente. Abrazo gande!

[@FaztCode]

Wow muchas gracias Manuel 🫡

[@elricho72]

Excelente Fatz como siempre, gracias x compartir 1 lujo.

[@jhonycastellanos25]

Me gusta el contenido de react 👌

[@jevar4502]

FreeCodeCamp me enseña y fazt me pule..... gracias!!

[@santiagosuarez8479]

Venga bruh!!! Lo estas haciendo muy bien, sigue asi!!!

[@FaztCode]

Gracias bruh

[@Deus-lo-Vuilt]

Buenísimo , estos proyectos de React o Js me vienen genial , gracias ❤️

[@joecode_13]

Muchísimas gracias Fazt por todo de verdad. Si puedes hacer algo metiendo Redux sería lo máximo.

[@FaztCode]

Claro que si ya estoy elaborando varios ejemplos de RTK

[@joecode_13]

@@FaztCode De fábula tio, muchas gracias por regalarnos de tus conocimientos tio. Un abrazo y saludos desde España, se te quiere.

[@FrankGP.Systems]

gracias por las practicas que compartes eso me ayuda a reforzar

[@tomasa8497]

Genial Fazt! Gracias por tan excelentes videos. Siempre me ayudan muchisimo!

[@kintaqentadclash8398]

Justo lo que quería ver, gracias fazt!

[@janieranez4026]

Gracias Fazt por tu contenido la verdad he aprendido mucho, para cuándo tendremos el curso de redux

[@FaztCode]

Un ejemplo practico de RTK se viene para la semana entrante

[@mauroandressosa1342]

Maravilloso como siempre. Para cuando un tutorial de React Testing Fazt ?

[@FaztCode]

Probablemente la semana entrante, que ya esta listo :)

[@mauroandressosa1342]

@@FaztCode Muchas gracias ! Es increíble como me haz ayudado con tus videos desde que comencé a estudiar, hasta ahora que ya estoy trabajando como desarrollador, y así me imagino que a miles de personas más. Crack !

[@jesus_84_]

Maestro de maestros.

[@DanielCodContent]

Muchas gracias execelente contenido!

[@FaztCode]

A ti Daniel :)

[@raulriquelme4734]

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

[@jesusfs]

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.

[@FaztCode]

Son nombres que tomo de una serie llamada Halt and catch fire :)

[@mordorr1958]

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 !

[@FaztCode]

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 :)

[@Ricardo_Torales]

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?.

[@FaztCode]

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 :)

[@williamherrera7366]

Hola Fazt, gracias por el vídeo, que Thema y configuración de vsc estás usando

[@FaztCode]

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 :) kzbin.info/www/bejne/aZikomloerCerJo

[@andressuarez1]

Eres el mejor Bro enserio que si.

[@asdasd258]

Excelente video. Muchas gracias por esto! :) Pregunta, que distro de linux usas? Se ve muy bonita.

[@FaztCode]

Gracias. La distro es Xubuntu :)

[@_hugo_cruz]

Gracias Hermano me encantó!!!!!!!!!!!!!!

[@Myglobalsounds]

Fazt TKM x siempre.

[@gustavobp9854]

Hola tío Fazt. Qué tengo que saber antes de aprender React? js,html y css? o algo más?

[@FaztCode]

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

[@F1PP3]

excelente el video!

[@leonelpaez9358]

TE AMOOOOO ANIMALITO DE DIOSSSSSSSSSSSS

[@joshsanders2479]

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

[@FaztCode]

Todos ya los tengo avanzado en un 90%, asi que voy a terminarlos para publicarlos pronto, son muy buenas sugerencias :)

[@undavv]

Buenisimos el video, si podes pasar el nombre del tema de vscode, buenisimo. Tenes mi like

[@FaztCode]

Hola Nico, el tema se llama Ayu

[@louiseavilezx2b505]

Ojalá puedas algún día hacer este mismo ejercicio con django. Pero de verdad te agradezco por tu contenido.

[@louiseavilezx2b505]

es que Platzi está hecho con esas 2 tecnologías pero quiero integrarlo de una forma más pro

[@FaztCode]

Lo tengo muy pendiente, solo que me atraso en las publicaciones, voy a tratar de publicar los dos ejemplos de django esta semana

[@louiseavilezx2b505]

@@FaztCode pero django + react por favor, hay muy poco contenido en español sobre eso

[@todounchanito1543]

Gracias Fazt

[@andresespinoza3159]

Fazt!! para cuando te lanzas un curso en Udemy con proyectos reales que hayas realizado de React y Next, explicas muy bien !!

[@LorenzoJimenez]

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]

Es muy buena idea, voy a crear un video de manejo de errores en React :) Gracias por comentar Lorenzo

[@LorenzoJimenez]

​@@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

[@gerardoguerrero7004]

hola, disculpa no tienes algun video de ionic capactitor haciendo un CRUD con SQlite?

[@FaztCode]

Hola Gerardo, aun no tengo un tutorial, pero es buena idea para un ejemplo, lo apunto para crear algo relacionado pronto

[@gerardoguerrero7004]

@@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

[@jaimeirazabal]

Puedes hacer un video de cosas Senior con React y Nodejs, bajo tu larga experiencia?

[@FaztCode]

Es buena idea. JavaScript avanzado sería. Voy a elaborar algo

[@constantinostrada3590]

gracias por todo pa

[@Ezep02]

te amo fazt

[@neobelrolandopavonhernande8046]

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

[@julianlinero7474]

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!

[@BrayanChavarria]

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

[@BrayanChavarria]

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 kzbin.info/www/bejne/Y32lYYGVerRqjpI

[@OscarStMarquez]

Hola. Cual de tu material recomiendas para iniciar de 0 React? Gracias.

[@FaztCode]

El curso de Javacript para React: kzbin.info/www/bejne/oofUeZyKeK6Fh8k y Luego el curso de React: kzbin.info/www/bejne/qH3SiICLabGSp6c

[@OscarStMarquez]

Gracias@@FaztCode muy amable!!

[@gabrielgarofalo9057]

TE AMO

[@louiseavilezx2b505]

Épico!!!!!!!

[@danielaguilar7570]

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?

[@danielaguilar7570]

cuando no sea necesario hacerla en app

[@FaztCode]

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 :)

[@danielaguilar7570]

@@FaztCode excelente consejo, gracias men

[@ikm4ch0]

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

[@FaztCode]

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? kzbin.info/www/bejne/mmjCdJh-gp55iMU - MERN CRUD con MySQL kzbin.info/www/bejne/mnvFlWp4jtSZppY - MERN con Mongodb y API Context kzbin.info/www/bejne/sJ6YmKOfpdxmfq8

[@jam0106]

Cuando un tutorial de Flexbox Bro? Así como el de Grid que hiciste

[@FaztCode]

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 :)

[@juancarlosjerezMorales]

tengo una pregunta algo ingenua, aun se puede usar creat-react-app, ahora toca no next, si quiero seguir el tutorial?

[@FaztCode]

actualmente recomendaria usar Vitejs y el resto del tutorial seria lo mismo: kzbin.info/www/bejne/i4mXmKmlp9llirc

[@juancarlosjerezMorales]

@@FaztCode muchas gracias

[@andresbrown1419]

fazt ya elimine el ReactStrictMode del archivo index, y cuando refresco la pagina se borran los datos que puse. ayuda

[@FaztCode]

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

[@andresbrown1419]

@@FaztCode tengo el código exactamente igual que el repositorio de github Y me sigue el borrando las tareas :(

[@nacholopez3320]

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

[@ILevizzz]

​@@nacholopez3320sos mi padre, gracias

[@salvadorbellososantos8324]

Podrías hacer este mismo video con Angular?

[@FaztCode]

Tenia un ejemplo algo antiguo, pero voy a actualizarlo muy pronto.

[@salvadorbellososantos8324]

@@FaztCode Muchas gracias.

[@Johnny__G]

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]);

[@PalestinianCode]

Por cierto usando pnpm y vite, la instalacion va mucho más rápido que create react app.

[@FaztCode]

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

[@romanr6888]

Cual es ese tema de vscode?

[@FaztCode]

El tema se llama ayu

[@mordorr1958]

Que tema usas ?

[@FaztCode]

Este se llama Ayu

[@Holri]

Master 🥵

[@parrapiupiu]

tienes servidor de discord?

[@FaztCode]

Hola, te dejo un enlace: discord.gg/JpnY3YqzCN

[@FidelEmilioSusanaJimenez]

👽👽😍😍😍

[@haroldbm2432]

💪💪

[@comentsization]

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.

[@maximo_vj]

Fazt Code , enseña como encontrar trabajo. 😭

[@FaztCode]

Es buena idea, voy a crear algún video de tips :)

[@NovatoWTF]

Fazt

[@gabo7993]

Que tema usas?

[@FaztCode]

El que se muestra en este video se llama Ayu