LEARN REACT in 30 MINUTES ⏰ - React Tutorial from scratch

[@CarlosAzaustre]

📘Mi nuevo libro "Aprendiendo React" ¡Ya a la venta! amzn.to/3r83cjL

[@sebascalderon5842]

En mi opinión alguien que nunca ha visto React, se pierde en este video. React no es algo que se pueda digerir en 30 min. Gracias por el video! :)

[@CarlosAzaustre]

La idea no es salir siendo experto, es conocer los fundamentos básicos y de ahí ir profundizando por cuenta propia. Para explicar a fondo React se necesitan muchas horas y Aprender a aplicarlo mucho tiempo 😊

[@sebascalderon5842]

@@CarlosAzaustre gracias por tu respuesta, este video me impulsado mucho más a aprender React! Saludos 😀

[@ospcg]

Concuerdo 😅

[@jpvladsa235]

@Adan Galaz duarte si quieres aprender react pasa ppr el canal de Jhonatan Mircha acabo de terminar su curso de React y es un 9/10 en mi opinion

[@mosaic9316]

Es la primera vez que he visto react y entendí bien la forma en la que funciona, es un buen ejemplo para no tener que leer toda la documentación el primer día. y al menos tienes una base para comenzar

[@ireyes1985]

Como recordatorio para la gente que hace tiempo que no tocamos React está brutal. Muchas gracias por hacer el video Carlos.

[@ArlexGuzman]

Carlos yo creo que en la internet hay mucho material acerca de React, sin embargo he visto que mayoritariamente está desactualizado, me parece oportuno y pertinente tu enfoque en React y el fronten en general, en este sentido someto a tu consideración la necesidad de hacer un énfasis especial y superlativo en los componentes funcionales y los hooks, éstos a mi juicio son la columna vertebral de react.

[@PedroSerranoGr]

Estar "actualizado" en JS actual es imposible o efímero. Lo que hoy es "la leche" mañana es basura y hay que cambiarlo.

[@andresrhernandez7789]

Uff tremendo está increíble, es la primera vez que veo react en la vida, hay muchas cosas que obviamente no entendí, pero me gusta mucho, creo que valió totalmente la pena elegir este video como mi primer acercamiento a React. Gracias Carlos, tu contenido es muy bueno.

[@CarlosAzaustre]

Que bueno Andres! Pues se vienen más!

[@kelvinescobar9312]

Me sigue sorprendiendo lo bien que enseñas y la calidad de tus videos. De los mejores sin duda. Sigue así bro!

[@CarlosAzaustre]

Muchísimas gracias Kelvin! Compártelo con quién creas que le pueda servir 😊

[@marcoantoniovalencia8694]

@@CarlosAzaustre 3:00 pongo el comando pero luego de un buen rato manda error y dice que se borraron los archivos 😢

[@efrainhernandez861]

Jamás pensé aprender tanto de React en menos de 40 minutos.

[@magnusmanz]

Genial! más claro no se puede, me sacaste en media hora las dudas existenciales del State , las props, event y de paso el localStorage. ¡Un verdadero genio, gracias!

[@compartelo007]

Más allá de que el vídeo está muy bien explicado, gracias. Me gusta tu manera de estructurar y sobretodo nombrar las cosas. Me refiero a cosas como usar en vez de ó no usar arrow fuctions cuando creas la functión que define al componente sino usar la manera tradicional con la palabra reservada function. Gracias

[@nikolaus_dev]

Es una maravilla con la facilidad que hace ver las cosas, y realmente deja facilmente entendible todo.. Que genialidad!

[@GOGODEV]

Muy bueno y al grano, como debe ser. Puntos de interés para continuar la serie: - Service providers (para consumir y enviar datos a una API externa) - Gestión de sesiones (con un bearer token por ejemplo) Con estos dos puntos más la base ya explicada, queda un overview bastante curioso sobre React.

[@LuisGonzalez-co8yz]

Seas mamón excelente explicación!!!! Nunca había comprendido React con algo tan explícito pude comprender los conceptos que mostraste perfectamente. Muchas gracias por compartir has ganado un seguidor.

[@sergioernestotostadosanche2509]

Muchas gracias por compartir tu conocimiento, ¡saludos desde México!

[@arturovasquezoficial]

Buenísimo tu vídeo. Llevo ya más de 12 años en la programación web. Al fin he entendido bien react Gracias a ti. Saludos desde Caracas, Venezuela.

[@CarlosAzaustre]

Que grande Arturo! Me alegro mucho!

[@oscarmvillajimenez]

Excelente, muy útil y buen concepto docente. Quiero empezar con Web App usando React (vengo de más de 20 años de programación Pascal), ya he bajado varios libros y he leído algunos, pero lo que me permitió hacer el primer "Hola Mundo React" fue este corto video. Muchas gracias, de veras.

[@CarlosAzaustre]

Muchas gracias Oscar por tu feedback! Me alegro que te sirviera :)

[@andrestorres3239]

Muy bueno el video Carlos. Éxitos a todos.

[@mundogamer5813]

Yo ya sé React pero estoy viendo el video por repasarlo y lo explicas super bien.

[@RicardoMorales-km6yy]

Nunca mejor explicado. Como recordatorio para retomar React es muy bueno y has dado en el clavo con aquel concepto de la propagación de los eventos en react y el de las props. A día de hoy han cambiado un par de cosas en relación al proyecto, usando CRA, pero este video aún vale mucho. Me quedo también con la costumbre de usar en vez de solo porque me parece mas ordenado. Gracias!.

[@CarlosAzaustre]

Gracias Ricardo! Me alegro que te resultara útil :)

[@danielaaraujo7836]

Muchas gracias. Hay muchísima claridad en lo que explicaste.

[@diegoivanrodriguezlozada9738]

Hola Carlos, ¿Cómo configuraste tu consola de Visual Studio Code para que se vea de esa manera? ¿Es un plugin? ¡Gracias y excelente vídeo!

[@wowhouston]

Espectacular! Muchas gracias!!

[@carlosalejandro9505]

Excelente tu explicación, creo que comenzaré a seguirte.

[@roymartinez94]

hasta que despues de meses, comprendi bien el uso de useEffect, aprendo de forma autodidacta, y hasta ahora entre tantos videos alguien me aclaro el uso del useEffect y porque se ocupa para el consumo de API, espero que un dia hagas ejemplos de react context o de redux dado que al dia de hoy no les encuentro mas funcionalidad que guardar parametros de la session, saludos y gracias

[@CarlosAzaustre]

Gracias Roy! Tomo nota :)

[@JuanSanchez950317]

muy buen paso a paso para iniciar, un saludo y muchas gracias

[@argentinocqc]

Un kilombo hermosamente explicado, excelente claridad para explicar e integrar conceptos, muy interesante Bro, saludos desde Argentina!!!

[@CarlosAzaustre]

Muchísimas gracias Ariel! :) Me alegra saber que te sirve :)

[@AmayaMuni]

Ha sido súper completo, ¡muchas gracias! Sobretodo gracias por lo del localStorage, que normalmente no se explica cómo se utiliza, y lo veo utilísimo para hacer pruebas un poco más realistas.

[@tanacing347]

Qué genial resumen! Gracias!

[@jesuslara88]

Se sabe que eres bueno, cuando en tu video aparece un anuncio que es tambien tuyo jaja. Gracias por esos videos tan bien explicados.

[@davichois]

Wauuu, eres un super profesor, mas videos asi, sigue asi carlos....

[@eanappi]

Es el mejor video para introducirse en el mundo de REACT

[@DiegoSilva-Bass]

Genio!, hice un curso en una plataforma.... un monton de clases, y con este video termine entendiendo mas

[@CarlosAzaustre]

Me alegro haber aclarado tus dudas Diego :)

[@Flaminguero14]

Gracias Carlos. Este vídeo es oro puro.

[@chuck-as-usual]

Joé, por fin voy entendiendo el useEffect!!!! GRacias.

[@CarlosAzaustre]

Yay!! Tiene su truqui pero una vez lo coges ya es tuyo 😄

[@Odesza-777]

Ey bro como vas me esta costando react, creo que me falta mas Javascript algún consejo

[@johannesperez9548]

Muy claro, muchas gracias!

[@josemontoyaguzman239]

Muy buen resumen del uso de React, buenazo explicando como siempre CA!

[@estelasanchez8889]

Gracias por compartir tus conocimientos Carlos! :)

[@CarlosAzaustre]

Un placer :) me alegro que te sirvan :)

[@DanlHb]

Hola Carlos gran video, gracias. Que theme o que Font usas para VSCode?

[@msasoftware]

Además de bien explicado, se agradece el colocar la lista de secciones para ir rápidamente a ellas, cuando se desea consultar. Es un adicional muy util.

[@CarlosAzaustre]

Gracias!! La verdad es que es muy útil, tengo que ponerlo en otros vídeos que tengo pendientes

[@pedroarnoldomachadoduran546]

Gracias, muy buen video, toca los puntos que requería

[@jetsivamartinez9210]

Primeramente Muchas gracias por tomarte tu tiempo para crear estos contenidos, me fue muy util toda la explicacion. ¿Qué sitio es de donde obtuviste los iconos que usaste para los botones?

[@melissagalvan89]

Muchas gracias! Por fin pude entender unos puntos con los que no podia.

[@CarlosAzaustre]

Que bueno Melissa! Me alegro mucho :)

[@retrogameplays_]

Muchas gracias por el tutorial, ideal para comenzar a conocer esta librería

[@rbatc6891]

Ya que es un tutorial rápido creo que vendría muy bien tener el código disponible para no perder tiempo copiándolo. Gracias por el vídeo!

[@asterisko]

¡Muchas gracias por el tutorial! Muy didáctico. Me ha sido muy útil para hacerme una idea general de cómo funciona y se estructura React. Con esta base explicada en tan solo media hora, me veo capaz de desarrollar una applicación web mucho más completa.

[@fxrl1681]

Me encanto, pensé que seria mas complicado, pero esta super explicado. Gracias Carlos! vengo de Vue

[@daromacs]

Eres un buenazo brother, gracias por tomarte el tiempo y compartir!

[@vladimirvarelaherbage1180]

Muchas gracias! Muy bien explicado

[@emanuelconstancio2858]

Excelente video, muchas gracias!

[@leomarqz]

Tienes talento para enseñar "Carlos Azaustre", apenas conozco un par de cosas de react por que aun estoy aprendiendo maquetación y programación en JavaScript, pero reconozco que e aprendido muchas cosas en tu canal, eres un reverendo Crack.

[@CarlosAzaustre]

Muchísimas gracias por tu comentario Leo!!

[@willymatheoo]

Que buennnnnnn tutorial! Lo necesario, lo útil y lo actualizado 👏

[@ArTrodes]

Menos mal que tenía conocimientos de Angular, si no me pierdo. Aún así, buen vídeo ;-)

[@luisangelvidalmagana7574]

Fue divertido , me hiciste la clase super facil , se me habia olvidado como era probar react, yo desarrolle un app movil en react native y relativamente no cambia mucho jaja, GRACIAS

[@fernandoortegomelendez4377]

Me flipa lo bien que coges los fundamentos y conceptos basicos, los metes en una pequeña app y haces que en la cabeza tome forma estructurada y lógica. Ayuda un montón si uno va a empezar a hacer un curso de algo de esto haberse visto este video. Al menos en mi experiencia. PD: Esto mismo en Vue! gracias y sigue así.

[@CarlosAzaustre]

Muchas gracias Fernando :)

[@enriqueacevedo4587]

@@CarlosAzaustre Si estoy por iniciar me recomiendas iniciar por React?

[@macaji93]

Pero hombre Carlos, no nos dejes con la miel en los labios... Un curso completo por dios :S

[@chukiperez8496]

Con este curso ya estariamos capacitados para trabajar en una empresa como desarrolladores de software usando tecnologia REACT?

[@CarlosAzaustre]

@@chukiperez8496 este vídeo no es un curso. Es un tutorial con las bases de React. La librería tiene muchas más cosas a tener en cuenta. Deberías aprender un poco más y hacer algún proyecto algo más grande que un simple TODO List para encontrar trabajo. Creo yo, bajo mi experiencia y punto de vista.

[@chukiperez8496]

@@CarlosAzaustre Muchas gracias Carlos. DIgamos que con esto no tenemos ni para empezar. Gracias de todas formas.

[@CarlosAzaustre]

@@chukiperez8496 es un punto de entrada. Hay muchas más cosas, más hooks, patrones, etc...

[@leo_perez_2023]

Muchas gracias Carlos, me ayudo muchisimo a comprender mejor los conceptos, todavía me cuesta un poco, al venir de java, tengo que descontracturar un poco jeje. Una consulta, que plugin estas usando en visual para que se denote asi el texto?

[@jhonromero9266]

Excelente video Carlos! nunca habia usado React, pero como siempre! lo haces fácil ver fácil.

[@CarlosAzaustre]

Muchísimas gracias Jhon! Espero que te haya servido ☺️

[@guillermoortellado4306]

Me falta aprender Javascript lo vi muy por arriba.Pero excelente video no tenia ni idea de react aca puedo ver como se aplican las funciones los id y los if. Muchas gracias

[@CarlosAzaustre]

Hola Guillermo! Quizá este vídeo te pueda ayudar a entender el Javascript necesario Antea de aprender React kzbin.info/www/bejne/qXzWf4Jjptp4d9k Y also aún tienes dudas te comparto el curso completo de JavaScript que tengo gratis aquí en KZbin kzbin.info/www/bejne/iWrSm4GXmqhkiKs

[@AlejoTSL]

Yo hace poco sali de un curso rápido donde aprendí lo básico y este video para complementar lo que aprendi sirve demasiado Buen video!

[@franciscogilt]

Excelente video Carlos. Gracias!

[@mmslfdave1764]

Hola, gran video como siempre. Carlos, eres un crack. Explicas muy bien las cosas y además razonas el porqué programas de una manera o de otra, pero, por qué me da error en "setTodos"? Hasta ahora no se había mencionado y a mi me da error

[@SanchayanPackiyanathan]

Excelente amigo 👍 gracias.

[@MaTXiNGuN]

Muchas gracias por esta introducción. Viene genial para empezar a profundizar en React. A ver ese libro que estás preparando si pronto ve la luz!

[@CarlosAzaustre]

Muchas gracias por el apoyo Joe!

[@Manu-49876]

Muy buen video, me ha ayudado muchísimo. Muchas gracias!

[@CarlosAzaustre]

Me alegra leer eso Manu :)

[@elestayo]

Creo que he tenido mucha suerte al ser esta la primera clase de react. Me genera mucha curiosidad ... muchas gracias

[@nomatw]

Es la primera vez que me adentro en React y teniendo conocimientos previos de otros lenguajes similares, entendí todos los conceptos gracias a este video. Saludos! :)

[@franr9789]

Lo que no me queda del todo claro es porque usas todo el rato "const". ¿const no es de constante? No entiendo porque lo usas también para las funciones y para las variables. Y por otro lado cuado he intentado hacer import { App } from "./App.jsx"; en el index.js solo me ha reconocido el componente App cuando he puesto la extensión, a pesar de estar en la misa carpeta. ¿sabes a que se debe? Muchas gracias, ha sido un vídeo muy bien explicado :)

[@martinjulioluzuriaga4584]

Un golazo este video!!!

[@thankful777]

Excelente bro, muchas gracias

[@sebastianochoa716]

Gracias Carlos, en verdad me ayudaste a organizar todo el conocimiento que estaba digiriendo por parte de otros vídeos sobre, react. Saludos desde Ecuador

[@CarlosAzaustre]

Me alegro mucho que te haya sido útil el vídeo Sebastián :)

[@j2dt237]

En mi humilde opinión se ve muy práctico el curso, pero una persona que es nueva en este tipo de desarrollo, obvias muchas cosas, al terminar de crear app me marcó error al ejecutar yarn y listo tu calavera. Gracias.

[@rodrigov424]

hola buenas. hay algo que no tengo claro. si cierro el visual y el explorador. como hago para abrir la aplicación desde donde la deje? o tengo que hacer todo desde npx?

[@TomaHawk00HouseMusic]

Eres un fenomeno. Me suscribo!

[@ariadnaluna4228]

Muchas gracias, necesitaba aprender para un bootcamp, a ver que tal me va.

[@luciodedio]

Hola Carlos ! Espero no molestarte, pero quería saber si puedo eliminar la carpeta de node module ya que pesa mucho y por lo que estuve investigando hay muchas dependencias que no utilizo. Saludos !!

[@dfredmusic]

No acostumbro a ver videos en español pero este pequeño curso es excepcional

[@baeli3852]

pasa el link de tu libro? otra pregunta: también contiene cosas de frameworks,librerias ,testing y Node incluidos en el libro?

[@mcpangara]

Excelente inicio en React, muy clara la explicación y sobre todo la dependencias de los diferentes componentes.

[@lugonzalezpm]

Excelente introduccion React.

[@george003]

Muy buena explicación felicidades estaré atento a tus vídeos 👍

[@nyok1912]

Enhorabuena por tu canal Carlos, estoy empezando con react y te he conocido por este video, por aquí un suscriptor nuevo ;). Una pregunta, ¿Por qué usar algo tan elaborado como uuid cuando puedes meter un valor incremental directamente? es decir, `new-${n++}` por ejemplo... Entiendo que aunque exista más de una instancia de un mismo componente (caso en el que podría haber más de un new-0 en una misma instancia del dom) cada uno tiene su ámbito local para todo como keys, identificadores, variables, etc. ¿no? En caso de consumir listas que provengan de una api yo estoy usando el identificador de la db de cada elemento como key... es decir, este suele ser de tipo 1,2,3... ¿Sería conveniente no usar estos identificadores como keys para react a la hora de obtener datos de API's? Un saludo!

[@AndresRocker81]

Hola Carlos, muy bien explicado, gracias por el tutorial.

[@thebroki6684]

MUCHAS GRACIAS MASTER!!!!

[@lortyaitor]

Muy bueno el vídeo, pero me han faltado un par de cosillas para hacerlo redondo. Una sería poder llamar a una API para recuperar los todos y la otra es como tener varios componentes "hermanos" que de comuniquen entre ellos. Gracias!

[@paullazcano2077]

Buen video, aprendí un poco lo básico de react

[@abrahamwilton4749]

se puede seguir puramente el patrón MVVM en react?, es decir, no implementar escuchas de eventos en los compomentes, si no mas bien separar la logica de eventos, de la interfaz? veo que pones los handlers en el codigo, como soy novato, no se si esto asi se haga en react, en xamarin se utiliza un codigo subyacente para esto

[@agustinrodriguez6198]

Hola amigo, gracias por traer este curso a Yt! Te hago una consulta.. cual es una buena opción en cuanto a bases de datos para usar con React? Cuales son las que se pueden usar? Saludos!

[@lecpredator]

Pregunta no estas haciendo tuneling de props al pasar el toggletodo?

[@estuardovilleda7547]

muy buen video, muchas gracias por brindar este tipo de material, tu explicación me sirvió bastante, bendiciones

[@CarlosAzaustre]

Me alegra mucho leer eso Estuardo! Muchas gracias por tu comentario ☺️

[@alexsh26]

Cual sería la manera idónea de maquetar en React? Siempre he utilizado Bootstrap por pereza y ahora quiero salirme de esta zona de confort. Me veo aprendiendo React y los Styled Components me gustan muchísimo, pero me veo que puede ser un poco engorroso a la hora de hacer un grid etc. ¿Qué me recomiendas? Muchas gracias y como ya he dicho en anteriores vídeos felicidades por este canal muy bueno

[@RafaDG88]

Muy buen vídeo Carlos, lo has explicado todo de forma muy clara y fácil de comprender.

[@CarlosAzaustre]

Muchísimas gracias Rafa! ¿Hay algún concepto de React que te gustaría que explicase?

[@RafaDG88]

@@CarlosAzaustre Estoy empezando con React, así que cualquier vídeo nuevo que subas sobre ello será bienvenido :)

[@LuigiOsoQui]

Saludos Pregunta, al escribir el codigo : {todos.map((todo) => { Tarea })} Me genera error y no sale informacion, (Array.prototype.map() expects a return value from arrow function array-callback-return) Pero si lo escribo asi, trabaja bien. {todos.map((todo) => Tarea )} Cual es la diferencia? Muchas gracias.

[@luisangel8781]

Que en el segundo caso tuyo al escribirlo en una solía linea sin necesidad de corchetes , el return viene implícito, en cambio en el primero si tienes que poner el return .....

[@Luisiferful]

Joder amigo, un profesor se hizo un lio al explicar React, pero contigo entendí perfectamente

[@ramonrp90]

Me ha encantado el video! Me ha parecido genial para asentar conocimientos o inciarse con React. Una duda, sería mejor comprobar si existe algo en localStorage mediante un lazy loader cuando utilizas useState para definir el estado? Según tengo entendido useEffect se aplica una vez se ha renderizado el componente y pintado el navegador los cambios en el DOM que ha realizado react. Gracias por el curro!!!

[@CarlosAzaustre]

useEffect tiene varios usos. Si el array de dependencias está vacío, actúa como el antiguo ComponentDidMount, pero si el array lleva dependencias se llama cada vez que hay un cambio en esa dependencia, como el antiguo ComponentDidUpdate. Te dejo un link a un Post de Instagram , donde lo explicaba: instagram.com/p/CDilttMjFD1/?igshid=1kkvq7n4b9ihe

[@nuchojm]

Muchas gracias 👌🏽

[@globalintergold3360]

Que extencion tienes para ver los iconos asi en el explorer?

[@kevinandressegovia]

Me preguntaba lo mismo

[@kikeedejay1829]

Increible tutorial!!. Tengo dos preguntas si tienes un minuto, al momento de abrir mi index.js en Vscode me marca fallos de codigo pero me funciona a la perfección; y mi otra consula, que distro de linux usas? se la ve realmente fluida

[@CarlosAzaustre]

Hola Kikee. Los fallos pueden ser por el linter que no esté entendiendo código JSX. Prueba a instalar el plugin de React Snippets. Y distro de Linux, ninguna :D, es macOS

[@diexdom]

Excelente video me quedo muy claro como funciona react, primera vez que lo intento y ya me llamo la atención

[@CarlosAzaustre]

Genial Diego! ¿Que otros framework o librerías habías utilizado antes ?

[@Magistrado1914]

Excelente mini curso Visto en 14/04/2022

[@yoelnicolas6561]

Muy bueno Carlos, como todo lo que subis, un abrazo!

[@CarlosAzaustre]

Muchísimas gracias Yoel!! :)

[@julianandresmicoltalemus8476]

Excelente, como siempre! 🙏🏾

[@CarlosAzaustre]

Muchas gracias Julian! ¿Es tu primer vistazo a React?