LEARN REACT in 30 MINUTES ⏰ - React Tutorial from scratch
HTML-код
- Опубликовано: 5 июл 2024
- 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 
Наука
📘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! :)
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 😊
@@CarlosAzaustre gracias por tu respuesta, este video me impulsado mucho más a aprender React!
Saludos 😀
Concuerdo 😅
@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
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.
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!
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.
Estar "actualizado" en JS actual es imposible o efímero. Lo que hoy es "la leche" mañana es basura y hay que cambiarlo.
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
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! :)
¡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.
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.
Que bueno Andres! Pues se vienen más!
Excelente inicio en React, muy clara la explicación y sobre todo la dependencias de los diferentes componentes.
Muy buen resumen del uso de React, buenazo explicando como siempre CA!
Wauuu, eres un super profesor, mas videos asi, sigue asi carlos....
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
Muchas gracias. Hay muchísima claridad en lo que explicaste.
Gracias Carlos. Este vídeo es oro puro.
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!
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.
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.
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!
Muchas gracias por el apoyo Joe!
Que buennnnnnn tutorial!
Lo necesario, lo útil y lo actualizado 👏
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
Genial Diego! ¿Que otros framework o librerías habías utilizado antes ?
Me encanto, pensé que seria mas complicado, pero esta super explicado.
Gracias Carlos! vengo de Vue
Excelente video, muchas gracias!!
Muchas gracias! Muy bien explicado
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!
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.
Muchísimas gracias por tu comentario Leo!!
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.
Muchas gracias Oscar por tu feedback! Me alegro que te sirviera :)
Muchas gracias por el tutorial, ideal para comenzar a conocer esta librería
Excelente video Carlos! nunca habia usado React, pero como siempre! lo haces fácil ver fácil.
Muchísimas gracias Jhon! Espero que te haya servido ☺️
Excelente video Carlos. Gracias!
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.
Que grande Arturo! Me alegro mucho!
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!.
Gracias Ricardo! Me alegro que te resultara útil :)
Espectacular! Muchas gracias!!
Muchas gracias, necesitaba aprender para un bootcamp, a ver que tal me va.
Excelente tu explicación, creo que comenzaré a seguirte.
Excelente, como siempre! 🙏🏾
Muchas gracias Julian! ¿Es tu primer vistazo a React?
Muy claro, muchas gracias!
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.
Gracias!! La verdad es que es muy útil, tengo que ponerlo en otros vídeos que tengo pendientes
Un kilombo hermosamente explicado, excelente claridad para explicar e integrar conceptos, muy interesante Bro, saludos desde Argentina!!!
Muchísimas gracias Ariel! :) Me alegra saber que te sirve :)
Muy buena explicación felicidades estaré atento a tus vídeos 👍
Es el mejor video para introducirse en el mundo de REACT
Yo ya sé React pero estoy viendo el video por repasarlo y lo explicas super bien.
Genio!, hice un curso en una plataforma.... un monton de clases, y con este video termine entendiendo mas
Me alegro haber aclarado tus dudas Diego :)
Muy bueno el video Carlos. Éxitos a todos.
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
Me alegro mucho que te haya sido útil el vídeo Sebastián :)
Muy bueno Carlos, como todo lo que subis, un abrazo!
Muchísimas gracias Yoel!! :)
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
Gracias Roy! Tomo nota :)
Eres un buenazo brother, gracias por tomarte el tiempo y compartir!
Gracias, muy buen video, toca los puntos que requería
Joé, por fin voy entendiendo el useEffect!!!! GRacias.
Yay!! Tiene su truqui pero una vez lo coges ya es tuyo 😄
Ey bro como vas me esta costando react, creo que me falta mas Javascript algún consejo
muy buen paso a paso para iniciar, un saludo y muchas gracias
Muy buen vídeo Carlos, lo has explicado todo de forma muy clara y fácil de comprender.
Muchísimas gracias Rafa!
¿Hay algún concepto de React que te gustaría que explicase?
@@CarlosAzaustre Estoy empezando con React, así que cualquier vídeo nuevo que subas sobre ello será bienvenido :)
Muchas gracias! Por fin pude entender unos puntos con los que no podia.
Que bueno Melissa! Me alegro mucho :)
Creo que he tenido mucha suerte al ser esta la primera clase de react. Me genera mucha curiosidad ... muchas gracias
Muchas gracias por compartir tu conocimiento, ¡saludos desde México!
Se sabe que eres bueno, cuando en tu video aparece un anuncio que es tambien tuyo jaja. Gracias por esos videos tan bien explicados.
Excelente bro, muchas gracias
Me sigue sorprendiendo lo bien que enseñas y la calidad de tus videos. De los mejores sin duda. Sigue así bro!
Muchísimas gracias Kelvin!
Compártelo con quién creas que le pueda servir 😊
@@CarlosAzaustre 3:00 pongo el comando pero luego de un buen rato manda error y dice que se borraron los archivos 😢
Excelente amigo 👍 gracias.
Un golazo este video!!!
Muy clarito todo!!!
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!
Qué genial resumen! Gracias!
Muy buen video, me ha ayudado muchísimo. Muchas gracias!
Me alegra leer eso Manu :)
muy buen video, muchas gracias por brindar este tipo de material, tu explicación me sirvió bastante, bendiciones
Me alegra mucho leer eso Estuardo! Muchas gracias por tu comentario ☺️
Gracias por compartir tus conocimientos Carlos! :)
Un placer :) me alegro que te sirvan :)
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í.
Muchas gracias Fernando :)
@@CarlosAzaustre Si estoy por iniciar me recomiendas iniciar por React?
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 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!
No acostumbro a ver videos en español pero este pequeño curso es excepcional
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
Hola Guillermo! Quizá este vídeo te pueda ayudar a entender el Javascript necesario Antea de aprender React ruclips.net/video/sKsNO-quEAw/видео.html
Y also aún tienes dudas te comparto el curso completo de JavaScript que tengo gratis aquí en RUclips ruclips.net/video/S9ojNaeC1RI/видео.html
Buen video, aprendí un poco lo básico de react
Eres un fenomeno. Me suscribo!
Muchas gracias 👌🏽
Carlos, Muy buenas !!! Me encantaria un curso de React Completo. Que tengas buen dia.
Me encantaaa!! podrías activar los subtítulos, por favor? :D
Menos mal que tenía conocimientos de Angular, si no me pierdo.
Aún así, buen vídeo ;-)
Te felicito, muy interesante y además sos muy claro explicando.
Muchas gracias Luis!
¿Es la primera vez que ves algo de React?
@@CarlosAzaustre Acabo de terminar un curso de React Js pero tu video me sirvió como para aclarar ciertas cosas. Muy didáctico.
MUCHAS GRACIAS MASTER!!!!
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 bueno muchas gracias
muy bueno, genial esa misma explicacion con vue y angular para saber cual es mas facil :p
Con Vue... todavía, pero con Angular,... ya hace mucho que no lo toco :)
Excelente introduccion React.
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
totalmente gracias!
Excelente mini curso
Visto en 14/04/2022
Muchisimas gracias! =)
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?
Excelente!
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.
Genial!!
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!
debemos instalar los uuid con "npm install uuid"?.....
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.
Muy instructivo! Muchas gracias, Carlos. Como sugerencia, creo que estaría bien algo de este estilo pero con React-Redux, quiero decir construir una app muy sencilla para ver los fundamentos. Saludos.
Tomo nota, aunque por preferencia, me gusta más el ContextAPI de React :)
Sí, yo en principio también prefiero Context, aunque según he leído, para apps grandes con muchos cambios de estado Redux es preferible, por ser más eficiente en ese aspecto. En cualquier caso, muchas gracias por tu respuesta, aprendo mucho con tu canal. Saludos.
Increíble contenido 🔥
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
Te felicito por tu tutorial de REACT JS, tu enfoque es muy directo y está muy bien explicado, gracias
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!