⚛️ REACT + TYPESCRIPT: Creando un proyecto desde cero y paso a paso (Tutorial en español)
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- Aprende a crear una API REST con Node.js, Express y tipos, gracias a TypeScript.
Clase basada en el original FullStack Open que tiene toda la atribución al contenido de la clase: fullstackopen.com/es/
🔷 ¿No sabes TypeScript? ¡Revisa la clase anterior!
• TypeScript - Tutorial ...
📚 Todas las clases del FullStack Bootcamp JavaScript:
• 🧑💻 Presentación del c...
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 - วิทยาศาสตร์และเทคโนโลยี
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
La comunidad agradece semejante aporte! Ya había buscado sobre este tema pero no encontré una buena respuesta hasta que midu apareció! Gracias!
Muchas gracias midu, es increible que este material este al alcance de todos🟦♥
de verdad... eres oro en la comunidad hispana. muchas gracias!!!
Gracias Midu! 🤗 Justo tenía dudas con pasar el useState 👏🏼👏🏼 . Ya tenía la intuición que estaba quedando acoplado pasándolo así 🤞🏼
GRAN video para empezar a entender como implementar TYPESCRIPT. Recomendadisimo!
Pedazo de video! Lo ultimo que has comentado de la arquitectura hexagonal (1:43:40) interesa y mucho
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! :)
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!!!
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! 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!
Que grande Midu la calidad de tus videos y tu forma de enseñar 100 puntos!
locooo sos el mejooorr, sos muy crack explicando, sos un libro abierto
Gracias midu que las 2 horas han pasado volando y eh aprendido mucho.
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!! :-)
Gracias, está increible el video
Te amo miudev, esto es justo lo que necesitaba
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
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!
Muy buena practica, he aprendido un monton.
Gracias Ignacio! ☺️
Grande Midu!
Gracias.
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
muchas gracias, muy instructivo!!!!
Gracias Midu!!
Respect to your good work, thanks a lot
Excelente explicacion. Gracias.
Excelente, muchas gracias.
Gracias a ti!
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 👏👏
Excelente video, saludos !
Gracias! 😊
minu yo ya sabia react y typescript pero los consejos que das son muy buenos. saludos1
Gracias, saludos! 🤗
excelente video
Gracias midudev, super profe!! gracias gracias gracias!!
Gracias a ti, Miguel!
Justo empece a crear un proyecto con la api de rick y morty para practicar react + ts, gracias midu!
Rick and Morty siempre ayuda!!! 🚀
que buen video lo voy a ver tres veces
I Love React and Typescript
Genial , me lo iré viendo , Midu , habrá algún momento en el que enseñes un poquito de Vite ? Un saludo
Sei un grandee😁😁 ahora que vivo aqui en españa, tengo che mirar video en ingles, italiano y español🤯😂
Hola miduuu, ya me vi los ultimos dos cursos de typescript y ahora sigo con este
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 😉..!
Muy buen video!! Nuevo sub! :)
que crack🤩🤩🤩
Buen video, saludos desde Venezuela
Suscrito, excelente video
gracias Miducrack!
Midu que gran explicación de los casos típicos. Si quisiera aplicar lo mismo pero en React native, q cambiaría?
MiDu es un dios! I Love MiDuDev ❤
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!!
Te amo miduuuu
el video genial! pero donde existe un curso completo de React + TS?
Que bueno, lo veré más tarde
Genial, Sebas!!!
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. =)
Gracias por el aporte, está excelente.
En el minuto 54 codeas = useState
¿Existe alguna diferencia si hago useState ?
Saludos.
te amo midu
Hola midu! Que usas como base de datos Json Server?
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
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...?
"Se lo come con patatas..." 😅 Te amé❤
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.
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?
que extencion utiliza para las advertencia que le tira en el minuto 13:55
podrias subir el repositorio por favor? para analizar el codigo mas en detalle
18:08 🤣🤣🤣🤣 como te quiero midu
En vez de interface se puede usar una clase como un modelo y como se usaría?
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
45:30 MEGA KUDOS for this
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 !
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
❤️❤️❤️❤️
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
Exel en te!!!
Angle brackets
npx create-react-app da muchos errores con react 18 y Typescrip, sabrías de alguna solución a esos problemas?.
Gracias
usar vite
Like 2000 😎😎
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
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
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
EFECTIVAMENTE ES CINE 😎😎🥵🥵 MIDUCRACK!! LE TEMIA TS PERO YA SE FUE EL TEMOR!!!
jajajaja gracias! 🤗
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, 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.
🤘🤘💥💥💥💯💯💯🔥🔥🔥🔥🔥
Gracias por el hype, Nahuel! :)
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.
En vite es tsx o jsx
Operador diamante
Midudev presumiendo que sale en los primeros lugares en el buscador.
Ángulos de apertura y de cierre. jeje. 😅 Saludos.
el mejor nombre que eh encontrado para es "Parentesis Angulares"
Midu TKM
🥰🥰🥰🥰
Alguien sabe como hacer para ver los comentarios todo el tiempo en pantalla ?
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
¿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
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
Este video de cuando es??
De hace unos meses. Los domingos hicimos un bootcamp completo.
Tienes todas las clases aquí: midu.link/bootcamp
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
Midu, Sube el codigo please 😆
7:40 chevron capaz?
57:23 midu fuera de contexto
th-cam.com/video/15VKbky2gB4/w-d-xo.html tuve esa discusión sobre hungarian notation, bastante interesante ver históricamente de donde viene todo este asunto
A veces es que hacemos cosas por historia que no por necesidad. :)
no entendí lo de useRef
X2