React + TypeScript: useContext , createContext, ContextProvider

[@PedriqueArtoq]

Excelente profe, ya termine el curso de React de cero a experto, luego completé el curso de TypeScript, y ahora estoy terminando esta lista de videos para continuar con React PRO. Muchisimas gracias, eres un crack.

[@josemanuelmunozmanzano4379]

Todo explicado muy clarito. Recomiendo los cursos de Fernando sobre React, son muy buenos!!

[@migesualdo]

Sos un ejemplo a seguir, naciste para aprender y enseñar, seguí así!

[@greluma]

Muchas Gracias Fernando, hace poco lo descubrí como profesor y explica de una forma directa y completa, estoy haceindo su curso de Next.js por Udemy. Le agradezco infinitamente por crear tantos recursos de calidad, esta ayudando mucho a personas como yo con contenido de calidad en Español, saludos y felicitaciones por su trabajo

[@juanpa92008]

Maestro gracias a usted aprendí React, estoy pronto a comenzar mi primer trabajo como React Software Engineer y esto vino como anillo al dedo!!! muchísimas gracias

[@francoangulo2653]

Espectacular contenido Fernando! Muchas gracias por compartir tus conocimientos con la comunidad dev!!

[@prodrigu75]

Felicitaciones Profe. Todos tus cursos valen oro, ya que tu manera de explicar es muy didáctica. Estoy iniciando tu curso de NEXTJS y allí justo recomendabas ver esta playlist Saludos desde Chile.

[@juancbusta]

Muchas gracias Fernando, excelentes los 6 videos. Todo muy claro como siempre. Exitos!!!!

[@nihil_um]

Como siempre haciendo ejemplos muy prácticos. Siempre aprendo pequeñas cosas en tus videos que me facilitan la vida (como en este caso el uso de custom hook para hacer uso del context de los todos). Un saludo.

[@jaimesanchezgalvis]

Q grande Profe muchas gracias, he seguido tu ruta de aprendizaje y tengo mi primer trabajo tech, en la oficina todos te conocen y ahora voy por el siguiente curso React Pro infinitas gracias Fer.

[@JoseMedina-xp6vi]

Un millón de gracias por compartir tu conocimiento, Fer! Un fuerte abrazo desde Venezuela

[@jsammy23]

Increible, incluso después de dos años, es bastante útil, ahora voy por el curso de React PRO, voy con ansias y mejorar más con el uso de TypeScript

[@fernando_her85]

Esto es una ventaja de React, que realmente no ha cambiado dramáticamente desde los hooks.

[@kevinbacaangeles754]

Muchas gracias profe, excelente play list, pense que seria mas dificil con typescript pero ahora veo el potencial que tiene, nuevamente gracias y lo veo en otro curso

[@jesusbriceno9733]

Excelente video! Gracias por estos aportes que nos ayudan muchisimo. Mas videos de react + typescript. A la espera del curso de react avanzado. q salga pronto

[@luisblanco2768]

Excelente play list de React con TS. Gracias Fernando, con tus explicaciones y cursos es mas claro el comportamiento de todo el código. Se disfruta mucho tus explicaciones. Actualmente me encuentro realizando el de React Native, pero viene a repasar un poco los conceptos .

[@fercho1463]

Muy bueno Fernando!! Por favor mas videos de Reacy con typescript...muchas gracias por compartir todas tus explicaciones con tanto detalle!!

[@sebastianalvarezmunoz9870]

Gracias Fernando por el curso, por el tiempo dedicado. Muy completa la playlist para entrar al mundo de React + Typescript

[@cristianmorales9942]

Terminando de repasar esta parte para iniciar con el curso de React Pro, ¡excelentes explicaciones!

[@darius1751]

Yo vengo del curso de Next, aun no lo he visto, decidi como me recomendaste ver esta serie de videos y bueno, siempre se aprendieron cositas y al ya haber visto el de Typescript es mas divertido.

[@albertogurrion487]

Increible video con los diferentes estilos de manejar estado en react!

[@JIMO_17_]

Increible!!! apenas pueda comprare el curso de react, apenas termine el curso de typescript que compre hace unos dias que tienes muchas gracias por todo el conocimiento que compartes

[@fabc6]

Hola Fernando, muchas gracias por todo el conocimiento que compartes, para agregar mi granito de arena, en el case del toggleTodos, otra forma que me funciona es recibir el todo como parámetro y hacer spread en el return... Saludos desde Costa Rica

[@juangomez874]

Wow. Excelente tutoriales. Te Felicito Fernando. Super bien explicado. Gracias por hacer estos videos. Vamos pa delante tigre!

[@berndeveloper]

2022 retomando tus cursos desde 2021 y tomando nuevos, vamos que se puede!

[@facundobrusa6094]

Hice cursos de react + js y esto me ayudo muchisimo a agarrarle la mano a react + ts. Muchas gracias genio, espero poder comprar el curso de nextjs y seguir aprendiendo

[@neriogalvez6325]

Maestro!! ..... gracias por compartir tus conocimientos.

[@addevmoises]

Excelente video, que bueno ver un app usando Context API, reducers y custom hook al mismo tiempo. Y mejor si es con TS

[@jsegomez]

Excelente, React + TypeScript

[@sounje]

Buen video, muy completo. Gracias. Ya estoy llevando los cursos por Udemy

[@adelaserna82]

Muchísimas gracias por la Play List, tenemos un proyecto en React con JavaScript y como vamos a colaborar más compañer@s en el desarrollo lo estamos pasando a TypeScript ;-)

[@felipemireles8422]

Muy bien explicado! los mejores cursos

[@noprogramessolo]

Gracias, ayudo a despejar en que casos usar los hooks

[@gabz_23]

Exelente contenido Fernando, Gracias a ti me encanta React y poco a poco estoy integrandolo con Typescript. Sigue creciendo!

[@tortilla-dev]

Profe Fernando mas tutoriales de React con Typescript por favor.

[@ezravazquez3795]

Super útil el customHook muchas gracias, Fernando!

[@saulrojas2679]

Soy junior en una compañía, me salvaste en el trabajo bro toma tu poderoso like 👍

[@cristhianoswaldopinedaburg7374]

Qué genioo!! Todo muy claroo. Muchas graciaaas

[@frankomartinez1686]

Me agrado la explicación, muy recomendable y entendible. Gracias 👌

[@josuedaniel7611]

Muy detallado al momento de explicar, recomendado.

[@julianblond]

Fernando, que prefieres para programar (en gral, sin importar lenguaje, framework, etc), macOS, linux o windows? Espero que me contestes🙏. Soy usuario de linux hace mucho tiempo y estoy considerando acceder a una mac sin conocerla aun.

[@lix5694]

Excelente curso. ¡Gracias!

[@alejandracasado7636]

La palabra "interface" en el tiempo 12:14 del video se refiere a una palabra reservada?

[@julioparra3009]

Este tipo de explicacion es sencillamente "genial"

[@bramucl]

Muy claro Fernando, gracias.

[@hack_crack]

Gracias por la explicación, pense que era más fácil realizar un cambio a TS, pero es un poco más complejo xD

[@sauterxd]

Maravilla explicación! Me servicio demasiado 🧑‍💻

[@ajichyrus]

¡Excelente explicación! ¡Sigue así profe!

[@marccastro3994]

Tome su like buen hombre, me acaba de salvar la vida

[@bluediu1714]

Excelente, repasando antes de curso de React Pro

[@josedanielrodriguez3348]

Como siempre, excelente contenido educativo de tu parte! pronto comenzare tu curso de Nodejs para tambien tener conocimiento sobre Backend Gracias

[@ItihellAnthonyMejiaUrbina]

Tremendo, excelente PlayList

[@goomerr]

Gracias por tus enseñanzas

[@alankrug3993]

yendo a comprar el curso de Native! (3era inversion hecha con El maestro!)

[@cristianhernandezresendiz6733]

Mi ídolo de la programación 👍👍👍

[@Luis-ue9ut]

Muchas gracias Profe, su contenido es excelente! :D

[@danielzapata9099]

Simplemente gracias. 👍👍

[@flavioforte790]

Hola por favor al crear el repositorio el --template para que se escribe? cosa vamos a obtener en especifico con eso?

[@maoposites]

Profe muchas gracias por tu dedicación !!!

[@martintorres8779]

Genial como siempre profe. Los todos pendientes y los completados usted los esta manejando por fuera del reducer cuando creo el customhook, no?? Si yo quisiera que las props {completed, pending} cambien en el state cada vez que los todos cambian su estado de pendiente a completado, deberia hacer que en la acción tambien modifique y evalue esas propiedades del estado y no tan solo tome accion donde solo se modifico/agrego un todo? Lo sigo esperando por el grupo de face de React js comunidad latina!

[@thomasjodt]

Ufff... Siempre he visto en distintos lugares personas comentando que si quieres aprender sobre algún tema que busquen tus cursos y veo el porqué lo dicen :D

[@futudev]

Excelente video! saludos.

[@adrielrodriguez8750]

ahora si nos vamos para el curso de React pro! jejeje

[@brianbrenes4182]

Vengo del curso de React de cero a experto, y estos videos complementan mucho al explicar TypeScript aplicado a React, muchas gracias por tan buen contenido Fernando!! por cierto, ¿me recomendarías seguir con tu curso de React Pro o con el de NextJs? Me dedico al front end development, saludos!

[@codingjhames]

yo compré el de Next antes del curso de React pro pero no lo inicié, sin embargo, la verdad es mejor apenas terminar el de React seguir con el de React pro, hay unas temáticas que son muy buenas y de paso que es en mayoría con TS entonces vale mucho la pena, luego cuando entras al de Next vas a llegar con un conocimiento más amplio, eso pienso yo.

[@felipemireles8422]

Yo te lo recomiendo, lo acabo de hacer a pesar que tiene un año de actualizado y esta genial!!!!

[@sebastianmedina5106]

Muchas gracias por los videos!

[@gastonquelali1226]

Excelente explicación, felicidades.

[@manuelmaciel8204]

Buenísimo profe, una pregunta, cual es el tema de visual que estás usando?

[@jeanpiermendoza4332]

Tokyo Night

[@carlosnana3033]

Totalmente crack!

[@josepared7243]

genial amigo buenos videos crack

[@diegosk8bt]

Eres un crack hermano, gracias. Subscribed campanita y todo eso..

[@diegosk8bt]

Por cierto, sería genial más tutoriales con react y typescript. Soy nuevo en estos ambientes y me estoy peleando mucho con typescript. Saludos!!

[@alvaroaguerre3149]

Gran divulgador !!!!

[@davidrosenblum4079]

38:03 De todos los videos del listado esta es la única parte que no entendí, sobre todo porque map() genera un arreglo nuevo, entonces no veo necesidad en usar una copia del argumento todo usando la desestructuración {...todo}.

[@nihil_um]

No sé si te servirá de algo o no pero esta es la forma que yo he usado en lugar de la que usa Fernando: case "toggle_todo": return { ...state, todos: state.todos.map((todo) => todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo ), } Un saludo.

[@vendjin]

Thanks bro, your video helped me to solve the task

[@facuelfacha12]

Muchisimas gracias!

[@erickcr91496]

Buena explicación, muchas gracias !

[@alejandrorobles4921]

Gracias por el video me sirvió bastante

[@juanguirao]

onDoubleClick no me funciona si tengo las DevTools abiertas. Si cierro DevTools y llamo alert en handleDoubleClick, puedo ver que se está llamando, pero no con DevTools abiertas. ¿Alguien sabe por qué y cómo solucionar esto?

[@emersonlopera6110]

Fernando buenas tardes e buscado cursos suyos sobre HTML5 pies me lo recomendaron pero en udemy no veo cursos de esos gracias ,,

[@danielsolis273]

Muchas gracias

[@mauriciobuffa1136]

Gracias Fer!

[@이준현-x8y]

BIg thanks from korea ~~~~~!!!!

[@somebody-17546]

thanks you 💖💖

[@StrigoiBelmont]

pregunta de noob, el que importe automaticamente los componentes, contextos etc es mediante una extension o un shortcut? excelente contenido!!!

[@fernando_her85]

VSCode lo hace principalmente solo, yo uso una extensión llamada typescript importer… ayuda un poco también.

[@emersonmachado4188]

El tema de Redux y React Contex me parece muy complicado de implementar y honestamente con esta lección no fue mucho lo que entendí, es decir, entiendo para qué se define los contextos, pero no como se implementa desde cero, todos los videos que encuentro hacen ver esto más complejo de lo que ya es.

[@william3588]

magnifico!

[@leandrocosmetomassini5352]

POR FAVOR podrías enseñar SEO con Angular, como hacer para que Google lo indexe gracias !

[@contrerasgarciaangel6614]

Buen tutorial FH

[@davidGomez-dr7hm]

un crack

[@jesuszeballos8862]

Alguien me podría decir qué curso es este? Por favor.

[@fernando_her85]

Esto es propio de KZbin Jesús. Pero tengo cursos completos de React con TypeScript en mi sitio web Fernando-Herrera.com

[@DevTalles]

La lista completa esta aquí: kzbin.info/aero/PLCKuOXG0bPi26-eawizqyLOgM7j66H_4M&si=qovakN2pC9b6Xuhx

[@tiuqanaul8573]

Ayer comenté sobre useContext con TS y hoy sale, ¿y esta rosa? 😧

[@fernando_her85]

Ya ratos tenía las ganas de seguir la playlist, pero a veces falta un poco de motivación :)

[@tiuqanaul8573]

@@fernando_her85 no se si sirva de motivación, pero yo tengo tu curso de React, React con Socket io, Flutter, Flutter intermedio y estos 4 han sido una pasada, tómalo como una referencia personal: eres un god Fernando 🤠

[@krizalfaro]

Profe por favor también hacer videos de vue 3 con ts

[@carlostrinidad3545]

Ya sé algo de react y tengo un curso aparte de react... Pero me obligas a comprar uno más de tus cursos... este de react, solo porque usas TS... jajaja

[@yoiberbeitar2991]

Hola, como hacer si quiero que el initialstate sean de los datos que vienen del Api rest alguien me da una idea por favor 🙏🏾

[@fernando_her85]

Creas un estado inicial local que claramente sepas que aún no recibes respuesta del servicio http. Luego en un useeffect sin dependencias en el Provider, puedes hacer la petición para traer tus datos

[@yoiberbeitar2991]

Gracias muchas gracias Fernando por ti fue que aprendí react, Entonces el estado inicial en ese caso puede ser con las variables vacías cierto ?

[@andresescobar2582]

profe uno con redux y redux-thunk se lo agradeceria !!!

[@oscars.247]

Como observación constructiva Confunden mucho los nombres de variables e interfaces que usas.

[@daniel-24gra79]

Este hombre explica muy bien, pero la verdad me parece demasiado engorroso todo el useContext con typescript y los reducer, no es culpa de Fernando creo mas bien que me acostumbre tanto a trabajar con useState y useContext con Js que era menos engorroso, sin dispatch ni nada de eso, en mi mente tengo como el context y el redux separado y verlo asi me parece demasiado harto de leer y ver

[@juanguerrero339]

qué explicación más confusa!

[@andresescobar2582]

case "toggleTodo": return { ...state, todos: state.todos.map((todo) => todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo ), }; otra alternativa un poco más clara en lo del toggle :3

[@negroCardoso]

Consulta, me tira el siguiente error ERROR in ./src/App.js 6:0-35 Module not found: Error: Can't resolve './todo/Todo' in 'C: epos eact-todo-custom-hooks\todo-list\src' lo unico q hice fue poner el componente Todo dentro del App. alguna idea?

[@negroCardoso]

solucionado.. habia instalado react comun jejeje no typescrypt