LEARN REACT in 30 MINUTES ⏰ - React Tutorial from scratch
Ғылым және технология
Learn React.js in no time with an introduction to the basics of the library to start working with it.
Want to learn more? Check out this REACT COURSE from scratch, totally FREE.
▶ • REACT ⚛️ CURSO Práctic...
We will see how to start a React app with create-react-app, component based development, state, props, main hooks, event handling and much more.
By the end of the video you will have a basic understanding of React.js principles to get into the library.
Repository on GitHub with the code of the example seen in the video: github.com/carlosazaustre/rea...
📘 Be among the first people to know when I publish the new book 👉 leanpub.com/reactpractico/
⏱ VIDEO CONTENT
00:00 | Introduction
01:37 | Create React App
04:04 | File Structure
05:07 | JSX
07:35 | Root Component
09:31 | List Component
11:39 | Props
13:00 | Hook useState
14:25 | Fragments
17:43 | Item Component
19:35 | Event Change Management
24:53 | Keys
28:42 | Flow of Props and Events
32:10 | Hook useEffect
You may also be interested in
How to build a BLOG from scratch with NEXT.js REACT and MARKDOWNX
► • CÓMO CREAR UN BLOG JAM...
We test GITHUB COPILOT, the AI that helps you? to program
► • PROBANDO GITHUB COPILO...
🔔 Don't forget to subscribe and turn on the little bell so you don't miss any video.
► cazaustre.link/youtube
Пікірлер: 426
📘Mi nuevo libro "Aprendiendo React" ¡Ya a la venta! amzn.to/3r83cjL
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
3 жыл бұрын
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
3 жыл бұрын
@@CarlosAzaustre gracias por tu respuesta, este video me impulsado mucho más a aprender React! Saludos 😀
@ospcg
2 жыл бұрын
Concuerdo 😅
@jpvladsa235
2 жыл бұрын
@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
2 жыл бұрын
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
Como recordatorio para la gente que hace tiempo que no tocamos React está brutal. Muchas gracias por hacer el video Carlos.
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
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!
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
3 жыл бұрын
Que bueno Andres! Pues se vienen más!
Es una maravilla con la facilidad que hace ver las cosas, y realmente deja facilmente entendible todo.. Que genialidad!
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.
¡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.
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! :)
Gracias Carlos. Este vídeo es oro puro.
Wauuu, eres un super profesor, mas videos asi, sigue asi carlos....
Muchas gracias. Hay muchísima claridad en lo que explicaste.
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
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.
Jamás pensé aprender tanto de React en menos de 40 minutos.
Muy buen resumen del uso de React, buenazo explicando como siempre CA!
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!
Excelente inicio en React, muy clara la explicación y sobre todo la dependencias de los diferentes componentes.
Excelente video, muchas gracias!!
Muchas gracias! Muy bien explicado
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
3 жыл бұрын
Muchas gracias por el apoyo Joe!
Hola Carlos, muy bien explicado, gracias por el tutorial.
Excelente video me quedo muy claro como funciona react, primera vez que lo intento y ya me llamo la atención
@CarlosAzaustre
3 жыл бұрын
Genial Diego! ¿Que otros framework o librerías habías utilizado antes ?
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
3 жыл бұрын
Muchísimas gracias por tu comentario Leo!!
Me sigue sorprendiendo lo bien que enseñas y la calidad de tus videos. De los mejores sin duda. Sigue así bro!
@CarlosAzaustre
3 жыл бұрын
Muchísimas gracias Kelvin! Compártelo con quién creas que le pueda servir 😊
@marcoantoniovalencia8694
2 жыл бұрын
@@CarlosAzaustre 3:00 pongo el comando pero luego de un buen rato manda error y dice que se borraron los archivos 😢
Muchas gracias por el tutorial, ideal para comenzar a conocer esta librería
Que buennnnnnn tutorial! Lo necesario, lo útil y lo actualizado 👏
Muy claro, muchas gracias!
Espectacular! Muchas gracias!!
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!
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 :)
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
3 жыл бұрын
Gracias Roy! Tomo nota :)
Excelente video Carlos! nunca habia usado React, pero como siempre! lo haces fácil ver fácil.
@CarlosAzaustre
2 жыл бұрын
Muchísimas gracias Jhon! Espero que te haya servido ☺️
Excelente tu explicación, creo que comenzaré a seguirte.
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.
Excelente video Carlos. Gracias!
Excelente, como siempre! 🙏🏾
@CarlosAzaustre
3 жыл бұрын
Muchas gracias Julian! ¿Es tu primer vistazo a React?
Es el mejor video para introducirse en el mundo de REACT
Me encanto, pensé que seria mas complicado, pero esta super explicado. Gracias Carlos! vengo de Vue
Muy clarito todo!!!
muy buen paso a paso para iniciar, un saludo y muchas gracias
Gracias, muy buen video, toca los puntos que requería
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.
Muy buena explicación felicidades estaré atento a tus vídeos 👍
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
2 жыл бұрын
Gracias!! La verdad es que es muy útil, tengo que ponerlo en otros vídeos que tengo pendientes
Muchas gracias, necesitaba aprender para un bootcamp, a ver que tal me va.
Yo ya sé React pero estoy viendo el video por repasarlo y lo explicas super bien.
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
10 ай бұрын
Gracias Ricardo! Me alegro que te resultara útil :)
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!
Genio!, hice un curso en una plataforma.... un monton de clases, y con este video termine entendiendo mas
@CarlosAzaustre
2 жыл бұрын
Me alegro haber aclarado tus dudas Diego :)
Muchas gracias! Por fin pude entender unos puntos con los que no podia.
@CarlosAzaustre
2 жыл бұрын
Que bueno Melissa! Me alegro mucho :)
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!
Muchas gracias por compartir tu conocimiento, ¡saludos desde México!
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
2 жыл бұрын
Me alegro mucho que te haya sido útil el vídeo Sebastián :)
Eres un buenazo brother, gracias por tomarte el tiempo y compartir!
Un kilombo hermosamente explicado, excelente claridad para explicar e integrar conceptos, muy interesante Bro, saludos desde Argentina!!!
@CarlosAzaustre
2 жыл бұрын
Muchísimas gracias Ariel! :) Me alegra saber que te sirve :)
MUCHAS GRACIAS MASTER!!!!
Muchas gracias 👌🏽
Qué genial resumen! Gracias!
Excelente bro, muchas gracias
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?
Muy bueno Carlos, como todo lo que subis, un abrazo!
@CarlosAzaustre
3 жыл бұрын
Muchísimas gracias Yoel!! :)
Excelente amigo 👍 gracias.
Un golazo este video!!!
Muy buen video, me ha ayudado muchísimo. Muchas gracias!
@CarlosAzaustre
Жыл бұрын
Me alegra leer eso Manu :)
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!
Joé, por fin voy entendiendo el useEffect!!!! GRacias.
@CarlosAzaustre
3 жыл бұрын
Yay!! Tiene su truqui pero una vez lo coges ya es tuyo 😄
@Odesza-777
4 ай бұрын
Ey bro como vas me esta costando react, creo que me falta mas Javascript algún consejo
totalmente gracias!
muy bueno muchas gracias
Creo que he tenido mucha suerte al ser esta la primera clase de react. Me genera mucha curiosidad ... muchas gracias
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
2 жыл бұрын
Hola Guillermo! Quizá este vídeo te pueda ayudar a entender el Javascript necesario Antea de aprender React kzread.info/dash/bejne/pX-nsLFmodircdo.html Y also aún tienes dudas te comparto el curso completo de JavaScript que tengo gratis aquí en KZread kzread.info/dash/bejne/hW2jzLCalaaXgqw.html
muy buen video, muchas gracias por brindar este tipo de material, tu explicación me sirvió bastante, bendiciones
@CarlosAzaustre
2 жыл бұрын
Me alegra mucho leer eso Estuardo! Muchas gracias por tu comentario ☺️
Muy buen vídeo Carlos, lo has explicado todo de forma muy clara y fácil de comprender.
@CarlosAzaustre
3 жыл бұрын
Muchísimas gracias Rafa! ¿Hay algún concepto de React que te gustaría que explicase?
@RafaDG88
3 жыл бұрын
@@CarlosAzaustre Estoy empezando con React, así que cualquier vídeo nuevo que subas sobre ello será bienvenido :)
Buen video, aprendí un poco lo básico de react
Muy bueno el video Carlos. Éxitos a todos.
Excelente mini curso Visto en 14/04/2022
Me encantaaa!! podrías activar los subtítulos, por favor? :D
Muchisimas gracias! =)
Gracias por compartir tus conocimientos Carlos! :)
@CarlosAzaustre
Жыл бұрын
Un placer :) me alegro que te sirvan :)
Eres un fenomeno. Me suscribo!
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
3 жыл бұрын
Muchas gracias Fernando :)
@enriqueacevedo4587
2 жыл бұрын
@@CarlosAzaustre Si estoy por iniciar me recomiendas iniciar por React?
No acostumbro a ver videos en español pero este pequeño curso es excepcional
Excelente introduccion React.
muy bueno, genial esa misma explicacion con vue y angular para saber cual es mas facil :p
@CarlosAzaustre
3 жыл бұрын
Con Vue... todavía, pero con Angular,... ya hace mucho que no lo toco :)
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?
Te felicito, muy interesante y además sos muy claro explicando.
@CarlosAzaustre
3 жыл бұрын
Muchas gracias Luis! ¿Es la primera vez que ves algo de React?
@Iuris2k1
3 жыл бұрын
@@CarlosAzaustre Acabo de terminar un curso de React Js pero tu video me sirvió como para aclarar ciertas cosas. Muy didáctico.
Excelente!
Carlos ¿puedes hacer un video tutorial de electron react y parcel?, por fis, sería de mucha ayuda poder desarrollar esa combinación de desarrollo
Carlos, Muy buenas !!! Me encantaria un curso de React Completo. Que tengas buen dia.
Muy buena analogía con la burbuja
Increíble contenido 🔥
@CarlosAzaustre
3 жыл бұрын
Se sabe que eres bueno, cuando en tu video aparece un anuncio que es tambien tuyo jaja. Gracias por esos videos tan bien explicados.
Te felicito por tu tutorial de REACT JS, tu enfoque es muy directo y está muy bien explicado, gracias
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!
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.
Excelente video! Recién lo estuve codeando a la par y me funcionó! El único cambio que recuerdo que hice, fue que uuid está en la carpeta ./uuid....Ahora más tarde me voy a poner a hacerle unos cambios. Por un lado cambiarle un poco la vista, y por otro lado que cuando la tarea se complete, que se vaya a otra lista de completadas, y que tenga su propio contador, y tal.
@CarlosAzaustre
3 жыл бұрын
Genial!!
@dguillemi
3 жыл бұрын
a@@CarlosAzaustre Gracias por tu comentario, realmente se siente muy bien el feedback. Fui llevando lo que quería hacer, y lo logré! Le puse bootstrap para la vista, el resto que quería hacer era bastante vanilla. Una vez que me di cuenta como era, salió sin muchos problemas. Ahora estoy viendo este video de vuelta, comentando el código para cementar un poco los conceptos y procedimientos. La verdad, para recomendar!
@andresgrondona8785
2 жыл бұрын
debemos instalar los uuid con "npm install uuid"?.....
Hola excelentes videos, podrías hacerte uno de Angular, saludos
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
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