⚛️ REACT + TYPESCRIPT: Creando un proyecto desde cero y paso a paso (Tutorial en español)

[@colinparrado6767]

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 👏👏👌

[@rubendariohernandezcenteno5259]

Confirmo, un gran profesor cómo lo es Midu sobre todo para aprender algo desde cero vale por x10000

[@Austin_de_Backyardigans]

ingresaste sin saber typescrip?

[@colinparrado6767]

@@Austin_de_Backyardigans No era un requisito cuando entre, ahora ya es obligatorio

[@daromacs]

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.

[@midudev]

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

[@daromacs]

@@midudev Con gusto, gracias a ti por todos los aportes. Es lo menos que podemos hacer :D

[@Missmmmmmmmmmm]

de verdad... eres oro en la comunidad hispana. muchas gracias!!!

[@jesusmaciasfelix3439]

Pedazo de video! Lo ultimo que has comentado de la arquitectura hexagonal (1:43:40) interesa y mucho

[@lucasgazzola]

La comunidad agradece semejante aporte! Ya había buscado sobre este tema pero no encontré una buena respuesta hasta que midu apareció! Gracias!

[@nikood2907]

que grande los redondos

[@andresbustamante972]

Gracias Midu, ya sabia de que iban los interfaces, pero las buenas practicas como ordenar en props y en states fue lo mejor

[@midudev]

Muchas gracias Andrés! :)

[@juanpabloriglos654]

GRAN video para empezar a entender como implementar TYPESCRIPT. Recomendadisimo!

[@carlosbenavides6354]

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!

[@brandondanielparrillassanchez]

Muchas gracias midu, es increible que este material este al alcance de todos🟦♥

[@leoamato6113]

locooo sos el mejooorr, sos muy crack explicando, sos un libro abierto

[@jonathanivanferreira819]

Gracias Midu! 🤗 Justo tenía dudas con pasar el useState 👏🏼👏🏼 . Ya tenía la intuición que estaba quedando acoplado pasándolo así 🤞🏼

[@joseluisfernandez621]

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!

[@YasinAnatoli]

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

[@iyustlop]

Muy buena practica, he aprendido un monton.

[@midudev]

Gracias Ignacio! ☺️

[@cesarcarmona2627]

Gracias midu que las 2 horas han pasado volando y eh aprendido mucho.

[@Weagle1337]

Justo empece a crear un proyecto con la api de rick y morty para practicar react + ts, gracias midu!

[@midudev]

Rick and Morty siempre ayuda!!! 🚀

[@alexiscabvb]

Que grande Midu la calidad de tus videos y tu forma de enseñar 100 puntos!

[@saav5343]

minu yo ya sabia react y typescript pero los consejos que das son muy buenos. saludos1

[@midudev]

Gracias, saludos! 🤗

[@jesuscabrita5815]

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

[@midudev]

Qué grande, me alegro un montón que te haya servido!

[@jcwolff]

Gracias, está increible el video

[@atrandafir]

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

[@enrique2652]

Te amo miudev, esto es justo lo que necesitaba

[@GabrielPozo]

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

[@vivarantx]

excelente video

[@luiscova3996]

Respect to your good work, thanks a lot

[@lucasgonzalez2231]

Hola miduuu, ya me vi los ultimos dos cursos de typescript y ahora sigo con este

[@diecau]

MiDu es un dios! I Love MiDuDev ❤

[@dfmf1982]

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

[@diego0ji]

Sei un grandee😁😁 ahora que vivo aqui en españa, tengo che mirar video en ingles, italiano y español🤯😂

[@rennypetit4891]

Excelente, muchas gracias.

[@midudev]

Gracias a ti!

[@ivansierrasaez441]

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

[@Deus-lo-Vuilt]

Genial , me lo iré viendo , Midu , habrá algún momento en el que enseñes un poquito de Vite ? Un saludo

[@miguelviloria4596]

muchas gracias, muy instructivo!!!!

[@quantum-dev-ia]

que buen video lo voy a ver tres veces

[@miguelalvarez4591]

Gracias midudev, super profe!! gracias gracias gracias!!

[@midudev]

Gracias a ti, Miguel!

[@blasnunez5493]

Grande Midu! Gracias.

[@albertog2196]

Excelente explicacion. Gracias.

[@EduardoHernandez-ux6gg]

Excelente video, saludos !

[@midudev]

Gracias! 😊

[@neilenmonlezun2287]

Gracias Midu!!

[@fernandocontrerasg9908]

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

[@felixfigueroa]

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

[@andysantisteban]

I Love React and Typescript

[@jaular14]

Buen video, saludos desde Venezuela

[@sebascalderon5842]

Que bueno, lo veré más tarde

[@midudev]

Genial, Sebas!!!

[@sebastianmedina5106]

Voy como en la mitad del primer curso de React, luego haré el de clon de Twitter y luego haré este =)

[@hendrickgalarza5369]

Te recomiendo que antes refuerces react vanila

[@sebastianmedina5106]

@@hendrickgalarza5369 que es React vainla? Conozco el concepto de vanilla JS que es JS puerto y duro pero no React vanila

[@hendrickgalarza5369]

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

[@Austin_de_Backyardigans]

@@sebastianmedina5106 no le hagas caso, no sabe lo que dice

[@onlytheuniversecandoitbett8306]

18:08 🤣🤣🤣🤣 como te quiero midu

[@samcl946]

gracias Miducrack!

[@moisesmunozsanchez8402]

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?

[@jonsegovia7699]

el video genial! pero donde existe un curso completo de React + TS?

[@jorgeandres4234]

Gracias por el aporte, está excelente. En el minuto 54 codeas = useState ¿Existe alguna diferencia si hago useState ? Saludos.

[@choneyg6127]

que crack🤩🤩🤩

[@brandon400]

te amo midu

[@juguetestoys1137]

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

[@M3D1707]

Suscrito, excelente video

[@jfelipeq14]

En vez de interface se puede usar una clase como un modelo y como se usaría?

[@ericmainhard2325]

Te amo miduuuu

[@alejandroz1606]

45:30 MEGA KUDOS for this

[@guillermolescano7520]

que extencion utiliza para las advertencia que le tira en el minuto 13:55

[@DEV_XO]

Muy buen video!! Nuevo sub! :)

[@ghedzko]

En donde puedo conseguir el enlace al repo? Muchas gracias Midu por tus clases abierta!!! sos un genio!!

[@pirufihho]

yo tambien estoy buscando el repo !!!

[@josbexerra8115]

Tan peresoso que no puede picar codigo por 1 hora.... no hay pasta de programador

[@jesusmatute7110]

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

[@GerardoGarcia-yg5zz]

Midu que gran explicación de los casos típicos. Si quisiera aplicar lo mismo pero en React native, q cambiaría?

[@lacaverna9151]

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. =)

[@TamirTube907]

Hola midu! Que usas como base de datos Json Server?

[@yudithserrano709]

"Se lo come con patatas..." 😅 Te amé❤

[@bryangodinez8684]

Que extension es la que muestra el error resaltando el renglon??

[@Austin_de_Backyardigans]

si te cambias la foto de anime te lo digo

[@bryangodinez8684]

@@Austin_de_Backyardigans Jamás

[@Austin_de_Backyardigans]

@@bryangodinez8684 ok, a los otakus no les comparto nada, tu te lo pierdes

[@cesarmartinez6341]

Error Lens bro

[@CHEF_ALMERIA]

Angle brackets

[@AllyaM33]

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 !

[@nicolasdiaz8168]

Midu, estoy haciendo un curso pero me piden que use angular. Angular es muuuy distinto de react?

[@luiggymacias5735]

Comparte ciertos conceptos pero si tiene sus diferencias

[@pirufihho]

podrias subir el repositorio por favor? para analizar el codigo mas en detalle

[@exxedridel9043]

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

[@mariocortez25]

Midudev presumiendo que sale en los primeros lugares en el buscador.

[@sergiom8288]

estos simbolos se llaman angle brackets.

[@nadiapisarello4703]

paréntesis angulares, corchetes angulares, "cuñas" o "corchángulos" ... me gusta la última xD

[@marcosmartinez767]

el mejor nombre que eh encontrado para es "Parentesis Angulares"

[@hebertdev]

EFECTIVAMENTE ES CINE 😎😎🥵🥵 MIDUCRACK!! LE TEMIA TS PERO YA SE FUE EL TEMOR!!!

[@midudev]

jajajaja gracias! 🤗

[@ivanlovich5885]

Gran video Midudev!!! 16:11 consulta, que se tiene en cuenta a la hora de elegir entre hacer una interface o un type? Slds

[@daromacs]

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

[@ivanlovich5885]

Respuesta aquí -> 1:04:24

[@FidelEmilioSusanaJimenez]

❤️❤️❤️❤️

[@maximilianoespeche9258]

Alguien sabe como hacer para ver los comentarios todo el tiempo en pantalla ?

[@egan36]

En vite es tsx o jsx

[@estebanluna9854]

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.

[@asalvaz]

Like 2000 😎😎

[@SsmarcosS41]

ESAS SUGERENCIAS que te dan e solo de typecripts?

[@exxedridel9043]

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

[@goomerr]

npx create-react-app da muchos errores con react 18 y Typescrip, sabrías de alguna solución a esos problemas?. Gracias

[@carlirowsperrirow4694]

usar vite

[@innovarevolution9344]

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.

[@eltrolado5764]

Probablemente no estes en la carpeta de tu proyecto de react cheka tu buscador lateral si estas en la main o una carpeta antes

[@innovarevolution9344]

@@eltrolado5764 Hola, muchas gracias, el ERROR era ello, estaba ejecutandolo en una carpeta anterior.

[@raulbolanos4920]

Operador diamante

[@angelsrt3]

pregunta midudev cuando como prondria multiple layout en un react router dom v6

[@exxedridel9043]

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

[@ntrpause]

entonces ya no sirve de nada usar typescript?

[@TheDerch360]

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

[@williamssaya6789]

Exel en te!!!

[@timmioro]

Este video de cuando es??

[@midudev]

De hace unos meses. Los domingos hicimos un bootcamp completo. Tienes todas las clases aquí: midu.link/bootcamp

[@sergiogonzalezsanchez4020]

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 ?

[@JSneider05]

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.

[@sergiogonzalezsanchez4020]

Me puedes iluminar indicandome como la consigo para poder seguir el flujo del video ?

[@JSneider05]

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.

[@Deus-lo-Vuilt]

Por cierto habrán más vídeos para este Bootcamp ?

[@midudev]

Sí, las próximas clases son sobre React Native. ;) Faltan unos cuantos vídeos todavía!

[@Deus-lo-Vuilt]

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

[@romanrizo9590]

¿Que tema de vscode estás usando?

[@midudev]

One Dark Pro!

[@romanrizo9590]

@@midudev muchas gracias!!!

[@yudithserrano709]

Ángulos de apertura y de cierre. jeje. 😅 Saludos.

[@luiggymacias5735]

Que opinas que Microsoft haya propuesto el typado fuerte de forma nativa a las versiones futuras de JavaScript?

[@eltrolado5764]

Que muere typescript

[@midudev]

No ha propuesto eso. Lo que ha propuesto es que los tipos JavaScript los entienda como comentarios (que los ignore).

[@luiggymacias5735]

@@midudev bueno de esa forma, no me supe explicar

[@luiggymacias5735]

@@eltrolado5764 No creo que eso pase por ahora

[@mrmikedev_tech]

27:47 me siento culpable viendo como midu arregla eso de forma correcta y yo usando "any" 😔

[@Bleibruk]

no entendí lo de useRef

[@JSneider05]

X2

[@nahuelorselli5586]

🤘🤘💥💥💥💯💯💯🔥🔥🔥🔥🔥

[@midudev]

Gracias por el hype, Nahuel! :)

[@EsmerlinBorgesC]

Midu, Sube el codigo please 😆

[@its_simmons]

7:40 chevron capaz?