00:00:00 Intro a la magia de TS 00:08:35 Creando la App con TS 00:08:45 useState con TS 00:12:00 Renderizando el JSX con TS 00:15:50 Creando Interface de TS 00:18:00 Comprendiendo errores de TS 00:19:15 Arrays en TS 00:21:00 Recomendación de Midu sobre el State 00:23:20 Diferencias archivos .tsx y .ts 00:24:20 Props con TS 00:29:05 Tipado de Functional Components 00:33:47 Usando render list 00:37:37 Eventos en TS con formulario 00:41:40 Handle change & Event con TS 00:49:35 Reutilizar Interfaces y uso de archivo types.d.ts 00:54:40 Props de formulario 01:01:35 UseRef con TS 01:04:14 Diferencia entre Type e Interface (Explicado por milésima vez por Midu) lol 01:10:50 UseReducer con TS 01:19:40 UseReducer como custom Hook 01:22:39 Fetching de Datos con Fetch 01:34:59 Fetching de Datos con Axios 01:37:15 Documentación TS Cheat Sheets React 01:43:45 Clean Architecture PS. Muchas gracias Midu me ha aclarado mucho de TS! sigo aprendiéndolo es muy interesante. PS. Yo le di los nombres que pensé correctos, si algo me faltó o consideran un mejor cambio lo hacemos, al igual con la asignación de los tiempos. WAGMI.
Este video me viene como anillo al dedo, estaba buscando como aprender react con typescript por qué la empresa me lo pide. Y lo mejor que lo explica desde cero creando un proyecto 👏👏👌
Hermano de verdad que me quitaste un monton de dudas q siempre me ocurren cuando programo con typescript dentro de react, siempre pensaba q typescript era una pesadilla por el tema de las quejas q hace, pero con esto me resuelves bastante
Gracias por el video Minu, no estaba comprendiendo como era el tema de la aplicacion de tipos con React y me voy con mucha idea sobre el tema. Muchas Gracias!!!
Hola Midu! Excelente video! Me ha servido mucho para llevar toda la experiencia que tengo en React al siguiente nivel con Typescript. Tú crees que puedas hacer un video de Redux con Typescript también? Saludos!
He visto varios de tus videos Midu y me gusta tu contenido, me gustaría mucho tener acceso al repo de este ejercicio, ya que cuando uno esta comenzando le es mas fácil rectificar algunas cosas viendo el proyecto como tal. Un abrazo!
Hola midu, he visto un montón de tus vídeos, me encantó tu ejemplo de superación cuando estuviste apunto de dejarlo al principio. Creo yo estar en un momento parecido, me podrías aconsejar que hacer para dar el salto a manejar cualquier cosa en programación? No sé por dónde continuar
Creo que sería bueno ver cómo tu lo harías realmente con todas la buenas prácticas de clean architecture desde principio para no quedar mareado al final...! al menos yo espero eso de tu gran experiencia...que si que la tienes clara, seria algo como lo que dijiste al final mas robusto y profesional. Igual se te agradece y espero lo tomes como un feedback positivo 😉..!
@@sebastianmedina5106 pues, react sin librerías de terceros o templates, ya después vas metiendo librerías y templates o frameworks de react, osea domina react puro
midu querido, al hacer clic en el boton de agregar usuario, me aparece una decima de segundo algo como que agrega el nuevo usuario, pero desaparece, o sea NO lo agrega. No me marca ningun error la consola ni typescript, ni recarga la pagina.... que puede estar pasando...?
Buenas Midudev primero agradecerte por estos tutoriales que haces me han servido mucho lo otro puede hacerte uno de react mostrando como hacer un reporte ya sea en pdf o algun reporteador que recomiendes para react o hacerlo desde nodejs que el backend lo proceso y lo reciba react Saludos, desde honduras gracias por tus aportes
que conocimientos puedo necesitar para conseguir mi primer trabajo FRONT-END junior. actualmente me manejo bien con HTML CSS (sass, boostrap, tailwing) Javascript, y estoy empezando a tocar react. =)
tenía la misma duda y que incluso la misma documentación dice que no hay una diferencia tan en concreto, esto dicen en su documentación: "Differences Between Type Aliases and Interfaces Type aliases and interfaces are very similar, and in many cases you can choose between them freely. Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable."
Es una aplicación backend que el ya tenía preparada, simplemente expone un endpoint que devuelve ciertos datos con el objetivo de consumirlos desde el frontend y poder explicar fetching de datos con fetch y axios.
Una opción es que crees una api mock online con los mismos datos que le devolvía el endpoint de midudev, él tiene un video corto donde explica como crear una api mock, te dejo como tarea buscarlo.
Midu, llevo una semana aprox viendo tus videos y ya soy tu fan número 1 jeje, pero porfa me podrías decir que significa el flag o tag -E que pones en el npm install, lo busco por todos lados en internet y nada, incluso con npm ls o npm help install y no sale ese flag "-E" ni ahí, alguien ayuda por favor, no me gusta quedarme con esas dudillas, tal vez sea algo muy fácil pero no me gusta avanzar si no he entendido todo a cabalidad, aiuda xd
Puedes usar el router en el componente donde quieres otro layout, no tiene que ser necesariamente solo en index.js. No sé si sea eso a lo que te refieres, pero así puedes hacer multiples layouts
porque me sale error al ejecutar el comando: npm run build, he de hacer algo anteriormente o es que debo instalar algo más, disculpad pero soy nuevo y voy siguiendo los pasos y me ha salido ese ERROR.
Que buen contenido Midu, me encanto! Una pregunta, utilice vite.js, y me gustaría saber si alguien sabe como configurar para que me salte el failed to compile. He buscado documentación pero no encuentro, si alguien me ayuda lo agradecería muchisimo.
Si, como ya sabe que tipo tiene cada cosa es más fácil que su algoritmo de autocompletado te ayude, mejor que tabnine free u otros autocompletadores o snippets
00:00:00 Intro a la magia de TS
00:08:35 Creando la App con TS
00:08:45 useState con TS
00:12:00 Renderizando el JSX con TS
00:15:50 Creando Interface de TS
00:18:00 Comprendiendo errores de TS
00:19:15 Arrays en TS
00:21:00 Recomendación de Midu sobre el State
00:23:20 Diferencias archivos .tsx y .ts
00:24:20 Props con TS
00:29:05 Tipado de Functional Components
00:33:47 Usando render list
00:37:37 Eventos en TS con formulario
00:41:40 Handle change & Event con TS
00:49:35 Reutilizar Interfaces y uso de archivo types.d.ts
00:54:40 Props de formulario
01:01:35 UseRef con TS
01:04:14 Diferencia entre Type e Interface (Explicado por milésima vez por Midu) lol
01:10:50 UseReducer con TS
01:19:40 UseReducer como custom Hook
01:22:39 Fetching de Datos con Fetch
01:34:59 Fetching de Datos con Axios
01:37:15 Documentación TS Cheat Sheets React
01:43:45 Clean Architecture
PS. Muchas gracias Midu me ha aclarado mucho de TS! sigo aprendiéndolo es muy interesante.
PS. Yo le di los nombres que pensé correctos, si algo me faltó o consideran un mejor cambio lo hacemos, al igual con la asignación de los tiempos.
WAGMI.
Espectacular. MUCHAS GRACIAS. T_T Ojalá más gente se animase a dejar en los vídeos las marcas! jajajajaja Te lo agradezco un montón!!!!
@@midudev Con gusto, gracias a ti por todos los aportes. Es lo menos que podemos hacer :D
Este video me viene como anillo al dedo, estaba buscando como aprender react con typescript por qué la empresa me lo pide. Y lo mejor que lo explica desde cero creando un proyecto 👏👏👌
Confirmo, un gran profesor cómo lo es Midu sobre todo para aprender algo desde cero vale por x10000
ingresaste sin saber typescrip?
@@Austin_de_Backyardigans No era un requisito cuando entre, ahora ya es obligatorio
de verdad... eres oro en la comunidad hispana. muchas gracias!!!
Pedazo de video! Lo ultimo que has comentado de la arquitectura hexagonal (1:43:40) interesa y mucho
La comunidad agradece semejante aporte! Ya había buscado sobre este tema pero no encontré una buena respuesta hasta que midu apareció! Gracias!
que grande los redondos
GRAN video para empezar a entender como implementar TYPESCRIPT. Recomendadisimo!
locooo sos el mejooorr, sos muy crack explicando, sos un libro abierto
Hermano de verdad que me quitaste un monton de dudas q siempre me ocurren cuando programo con typescript dentro de react, siempre pensaba q typescript era una pesadilla por el tema de las quejas q hace, pero con esto me resuelves bastante
Qué grande, me alegro un montón que te haya servido!
Gracias Midu, ya sabia de que iban los interfaces, pero las buenas practicas como ordenar en props y en states fue lo mejor
Muchas gracias Andrés! :)
MiDu es un dios! I Love MiDuDev ❤
Gracias midu que las 2 horas han pasado volando y eh aprendido mucho.
Gracias por el video Minu, no estaba comprendiendo como era el tema de la aplicacion de tipos con React y me voy con mucha idea sobre el tema. Muchas Gracias!!!
Muchas gracias midu, es increible que este material este al alcance de todos🟦♥
Justo empece a crear un proyecto con la api de rick y morty para practicar react + ts, gracias midu!
Rick and Morty siempre ayuda!!! 🚀
Muy buena practica, he aprendido un monton.
Gracias Ignacio! ☺️
Te amo miudev, esto es justo lo que necesitaba
Hola Midu! Excelente video! Me ha servido mucho para llevar toda la experiencia que tengo en React al siguiente nivel con Typescript.
Tú crees que puedas hacer un video de Redux con Typescript también?
Saludos!
He visto varios de tus videos Midu y me gusta tu contenido, me gustaría mucho tener acceso al repo de este ejercicio, ya que cuando uno esta comenzando le es mas fácil rectificar algunas cosas viendo el proyecto como tal. Un abrazo!
Que grande Midu la calidad de tus videos y tu forma de enseñar 100 puntos!
Hola miduuu, ya me vi los ultimos dos cursos de typescript y ahora sigo con este
Sei un grandee😁😁 ahora que vivo aqui en españa, tengo che mirar video en ingles, italiano y español🤯😂
Muy bueno el tutorial!! Me va a servir un montón para una extensión de Chrome que estoy montando con React y Typescript! Muchas gracias!! :-)
minu yo ya sabia react y typescript pero los consejos que das son muy buenos. saludos1
Gracias, saludos! 🤗
Excelente video, me da la sensación de que al usar typescript es darle un poco de Java a Javascript :D :D :D muy bueno lo de arquitectura hexagonal 👏👏
Gracias Midu! 🤗 Justo tenía dudas con pasar el useState 👏🏼👏🏼 . Ya tenía la intuición que estaba quedando acoplado pasándolo así 🤞🏼
excelente video
muchas gracias, muy instructivo!!!!
Grande Midu!
Gracias.
Respect to your good work, thanks a lot
Perfecto yo llegué aquí sin saber TS y ahora ya hasta se me olvidó JS Ajajaja no, enserio es demasiada información para procesar en dos horas
Gracias Midu!!
Gracias midudev, super profe!! gracias gracias gracias!!
Gracias a ti, Miguel!
que buen video lo voy a ver tres veces
Genial , me lo iré viendo , Midu , habrá algún momento en el que enseñes un poquito de Vite ? Un saludo
Gracias, está increible el video
Buen video, saludos desde Venezuela
Hola midu, he visto un montón de tus vídeos, me encantó tu ejemplo de superación cuando estuviste apunto de dejarlo al principio. Creo yo estar en un momento parecido, me podrías aconsejar que hacer para dar el salto a manejar cualquier cosa en programación? No sé por dónde continuar
Excelente video, saludos !
Gracias! 😊
Creo que sería bueno ver cómo tu lo harías realmente con todas la buenas prácticas de clean architecture desde principio para no quedar mareado al final...! al menos yo espero eso de tu gran experiencia...que si que la tienes clara, seria algo como lo que dijiste al final mas robusto y profesional. Igual se te agradece y espero lo tomes como un feedback positivo 😉..!
Voy como en la mitad del primer curso de React, luego haré el de clon de Twitter y luego haré este =)
Te recomiendo que antes refuerces react vanila
@@hendrickgalarza5369 que es React vainla? Conozco el concepto de vanilla JS que es JS puerto y duro pero no React vanila
@@sebastianmedina5106 pues, react sin librerías de terceros o templates, ya después vas metiendo librerías y templates o frameworks de react, osea domina react puro
@@sebastianmedina5106 no le hagas caso, no sabe lo que dice
que extencion utiliza para las advertencia que le tira en el minuto 13:55
Suscrito, excelente video
te amo midu
midu querido, al hacer clic en el boton de agregar usuario, me aparece una decima de segundo algo como que agrega el nuevo usuario, pero desaparece, o sea NO lo agrega. No me marca ningun error la consola ni typescript, ni recarga la pagina.... que puede estar pasando...?
Excelente explicacion. Gracias.
Que bueno, lo veré más tarde
Genial, Sebas!!!
I Love React and Typescript
que crack🤩🤩🤩
Buenas Midudev primero agradecerte por estos tutoriales que haces me han servido mucho lo otro puede hacerte uno de react mostrando como hacer un reporte ya sea en pdf o algun reporteador que recomiendes para react o hacerlo desde nodejs que el backend lo proceso y lo reciba react
Saludos, desde honduras
gracias por tus aportes
Excelente, muchas gracias.
Gracias a ti!
"Se lo come con patatas..." 😅 Te amé❤
18:08 🤣🤣🤣🤣 como te quiero midu
Te amo miduuuu
Cómo activa la depuración en el navegador ? Y cuál extensión es la que usa para que los errores aparezcan en el editor?
45:30 MEGA KUDOS for this
Hola midu! Que usas como base de datos Json Server?
En vez de interface se puede usar una clase como un modelo y como se usaría?
gracias Miducrack!
el video genial! pero donde existe un curso completo de React + TS?
Gracias por el aporte, está excelente.
En el minuto 54 codeas = useState
¿Existe alguna diferencia si hago useState ?
Saludos.
En donde puedo conseguir el enlace al repo? Muchas gracias Midu por tus clases abierta!!! sos un genio!!
yo tambien estoy buscando el repo !!!
Tan peresoso que no puede picar codigo por 1 hora.... no hay pasta de programador
Muy buen video!! Nuevo sub! :)
Que extension es la que muestra el error resaltando el renglon??
si te cambias la foto de anime te lo digo
@@Austin_de_Backyardigans Jamás
@@bryangodinez8684 ok, a los otakus no les comparto nada, tu te lo pierdes
Error Lens bro
Midu que gran explicación de los casos típicos. Si quisiera aplicar lo mismo pero en React native, q cambiaría?
Like 2000 😎😎
Angle brackets
Bro, you are awsome ! You should get into FiveM scripts bro, I wish i had friends like you to help me with the server scripts jajajja !
que conocimientos puedo necesitar para conseguir mi primer trabajo FRONT-END junior. actualmente me manejo bien con HTML CSS (sass, boostrap, tailwing) Javascript, y estoy empezando a tocar react. =)
EFECTIVAMENTE ES CINE 😎😎🥵🥵 MIDUCRACK!! LE TEMIA TS PERO YA SE FUE EL TEMOR!!!
jajajaja gracias! 🤗
Gracias Miguel, excelente aporte! PD: Yo se que tal vez sea mucho pedir jaja. Pero estaría excelente si pudieras subir el código. Saludos!!
Gran video Midudev!!! 16:11 consulta, que se tiene en cuenta a la hora de elegir entre hacer una interface o un type? Slds
tenía la misma duda y que incluso la misma documentación dice que no hay una diferencia tan en concreto, esto dicen en su documentación:
"Differences Between Type Aliases and Interfaces
Type aliases and interfaces are very similar, and in many cases you can choose between them freely. Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable."
Respuesta aquí -> 1:04:24
Midu, muchas gracias por tu cotenido, me he perdido en el minuto 1:22:47 porque no sé de donde salió ese npm run, me puedes iluminar porfa ?
Es una aplicación backend que el ya tenía preparada, simplemente expone un endpoint que devuelve ciertos datos con el objetivo de consumirlos desde el frontend y poder explicar fetching de datos con fetch y axios.
Me puedes iluminar indicandome como la consigo para poder seguir el flujo del video ?
Una opción es que crees una api mock online con los mismos datos que le devolvía el endpoint de midudev, él tiene un video corto donde explica como crear una api mock, te dejo como tarea buscarlo.
Midudev presumiendo que sale en los primeros lugares en el buscador.
Midu, llevo una semana aprox viendo tus videos y ya soy tu fan número 1 jeje, pero porfa me podrías decir que significa el flag o tag -E que pones en el npm install, lo busco por todos lados en internet y nada, incluso con npm ls o npm help install y no sale ese flag "-E" ni ahí, alguien ayuda por favor, no me gusta quedarme con esas dudillas, tal vez sea algo muy fácil pero no me gusta avanzar si no he entendido todo a cabalidad, aiuda xd
Midu, estoy haciendo un curso pero me piden que use angular. Angular es muuuy distinto de react?
Comparte ciertos conceptos pero si tiene sus diferencias
En vite es tsx o jsx
Por cierto habrán más vídeos para este Bootcamp ?
Sí, las próximas clases son sobre React Native. ;) Faltan unos cuantos vídeos todavía!
@@midudev genial ,muchas gracias por el curso midu , me ha ayudado mucho a ir entendiendo muchos conceptos y aprender más , que tengas un gran día
podrias subir el repositorio por favor? para analizar el codigo mas en detalle
pregunta midudev cuando como prondria multiple layout en un react router dom v6
Puedes usar el router en el componente donde quieres otro layout, no tiene que ser necesariamente solo en index.js. No sé si sea eso a lo que te refieres, pero así puedes hacer multiples layouts
porque me sale error al ejecutar el comando: npm run build, he de hacer algo anteriormente o es que debo instalar algo más, disculpad pero soy nuevo y voy siguiendo los pasos y me ha salido ese ERROR.
Probablemente no estes en la carpeta de tu proyecto de react cheka tu buscador lateral si estas en la main o una carpeta antes
@@eltrolado5764 Hola, muchas gracias, el ERROR era ello, estaba ejecutandolo en una carpeta anterior.
7:40 chevron capaz?
Alguien sabe como hacer para ver los comentarios todo el tiempo en pantalla ?
el mejor nombre que eh encontrado para es "Parentesis Angulares"
Este video de cuando es??
De hace unos meses. Los domingos hicimos un bootcamp completo.
Tienes todas las clases aquí: midu.link/bootcamp
¿Que tema de vscode estás usando?
One Dark Pro!
@@midudev muchas gracias!!!
estos simbolos se llaman angle brackets.
paréntesis angulares, corchetes angulares, "cuñas" o "corchángulos" ... me gusta la última xD
Que buen contenido Midu, me encanto! Una pregunta, utilice vite.js, y me gustaría saber si alguien sabe como configurar para que me salte el failed to compile. He buscado documentación pero no encuentro, si alguien me ayuda lo agradecería muchisimo.
ESAS SUGERENCIAS que te dan e solo de typecripts?
Si, como ya sabe que tipo tiene cada cosa es más fácil que su algoritmo de autocompletado te ayude, mejor que tabnine free u otros autocompletadores o snippets
npx create-react-app da muchos errores con react 18 y Typescrip, sabrías de alguna solución a esos problemas?.
Gracias
usar vite
Operador diamante
Ángulos de apertura y de cierre. jeje. 😅 Saludos.
27:47 me siento culpable viendo como midu arregla eso de forma correcta y yo usando "any" 😔
❤️❤️❤️❤️
Que opinas que Microsoft haya propuesto el typado fuerte de forma nativa a las versiones futuras de JavaScript?
Que muere typescript
No ha propuesto eso. Lo que ha propuesto es que los tipos JavaScript los entienda como comentarios (que los ignore).
@@midudev bueno de esa forma, no me supe explicar
@@eltrolado5764 No creo que eso pase por ahora
soy al único al que le pasa que el audio del vídeo popea? Me ha pasado también con el de React desde 0 de este año
Midu TKM
🥰🥰🥰🥰
Exel en te!!!
🤘🤘💥💥💥💯💯💯🔥🔥🔥🔥🔥
Gracias por el hype, Nahuel! :)
Midu, Sube el codigo please 😆
no entendí lo de useRef
X2