LEARN REACT in 30 MINUTES ⏰ - React Tutorial from scratch
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 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 - วิทยาศาสตร์และเทคโนโลยี
![[TH] 2024 PMWC x EWC Group Stage Day 3 | PUBG MOBILE WORLD CUP x ESPORTS WORLD CUP](http://i.ytimg.com/vi/VnOqutfqWqU/mqdefault.jpg)
📘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!
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! :)
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
¡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.
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
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 tu explicación, creo que comenzaré a seguirte.
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!
Muchas gracias. Hay muchísima claridad en lo que explicaste.
Excelente inicio en React, muy clara la explicación y sobre todo la dependencias de los diferentes componentes.
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.
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!
Muchas gracias por compartir tu conocimiento, ¡saludos desde México!
muy buen paso a paso para iniciar, un saludo y muchas gracias
Muy buen resumen del uso de React, buenazo explicando como siempre CA!
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!
Yo ya sé React pero estoy viendo el video por repasarlo y lo explicas super bien.
Wauuu, eres un super profesor, mas videos asi, sigue asi carlos....
Gracias, muy buen video, toca los puntos que requería
Muchas gracias, necesitaba aprender para un bootcamp, a ver que tal me va.
Hola Carlos, muy bien explicado, gracias por el tutorial.
Espectacular! Muchas gracias!!
Muy bueno el video Carlos. Éxitos a todos.
Me encanto, pensé que seria mas complicado, pero esta super explicado.
Gracias Carlos! vengo de Vue
Muchas gracias por el tutorial, ideal para comenzar a conocer esta librería
Que buennnnnnn tutorial!
Lo necesario, lo útil y lo actualizado 👏
Jamás pensé aprender tanto de React en menos de 40 minutos.
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.
Gracias Carlos. Este vídeo es oro puro.
Muy claro, muchas gracias!
Creo que he tenido mucha suerte al ser esta la primera clase de react. Me genera mucha curiosidad ... muchas gracias
Muchas gracias! Por fin pude entender unos puntos con los que no podia.
Que bueno Melissa! Me alegro mucho :)
Es el mejor video para introducirse en el mundo de REACT
Muchas gracias! Muy bien explicado
Muy buena explicación felicidades estaré atento a tus vídeos 👍
Excelente video, muchas gracias!!
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!
Eres un buenazo brother, gracias por tomarte el tiempo y compartir!
Excelente bro, muchas gracias
Menos mal que tenía conocimientos de Angular, si no me pierdo.
Aún así, buen vídeo ;-)
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 ☺️
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 video Carlos. Gracias!
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!!
Un golazo este video!!!
Excelente amigo 👍 gracias.
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 buen video, me ha ayudado muchísimo. Muchas gracias!
Me alegra leer eso Manu :)
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 :)
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 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 😢
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 :)
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!
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 :)
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
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?
Buen video, aprendí un poco lo básico de react
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!
Eres un fenomeno. Me suscribo!
Excelente introduccion React.
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?
Qué genial resumen! Gracias!
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!
No acostumbro a ver videos en español pero este pequeño curso es excepcional
Carlos, Muy buenas !!! Me encantaria un curso de React Completo. Que tengas buen dia.
Te felicito por tu tutorial de REACT JS, tu enfoque es muy directo y está muy bien explicado, gracias
MUCHAS GRACIAS MASTER!!!!
Gracias por compartir tus conocimientos Carlos! :)
Un placer :) me alegro que te sirvan :)
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 ☺️
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 :)
Muchas gracias por el video, por alguna razon el get del local storage no me funciona, alguien sabe a que se puede deber? es decir cuando agrego los todos el localstorage se modifica pero si recargo la pagina aparece solo el inicial...saludos desde colombia
muy bueno muchas gracias
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.
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 :)
Excelente mini curso
Visto en 14/04/2022
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
Muchas gracias 👌🏽
Me encantaaa!! podrías activar los subtítulos, por favor? :D
No puedo instalar el uuid estoy desde la terminal de linux ubuntu y de editor no visual si no sublime text, que puedo hacer??
Muchisimas gracias! =)
ayuda tengo un error, " El elemento JSX 'div' no tiene la etiqueta de cierre correspondiente.", tambien dice Se esperaba '>'. /////// hola y esta escrito asi
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 !!
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
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 th-cam.com/video/sKsNO-quEAw/w-d-xo.html
Y also aún tienes dudas te comparto el curso completo de JavaScript que tengo gratis aquí en TH-cam th-cam.com/video/S9ojNaeC1RI/w-d-xo.html
Muy clarito todo!!!
Excelente, como siempre! 🙏🏾
Muchas gracias Julian! ¿Es tu primer vistazo a React?
Muy bueno Carlos, como todo lo que subis, un abrazo!
Muchísimas gracias Yoel!! :)
Como le tendria que hacer si quisiera que se añadieran tareas a la lista cuando presiono enter?
Hola Carlos,
He realizado todo el curso y me he encontrado con un "fallo" que no entiendo. Mi problema se daba cuando llamaba a la función useEffect que recuperaba los datos. Por lo que he observado es importante el orden de llamada, si llamo primero a la función useEffect que guarda los datos no se ejecuta el segundo useEffect. En cambio si el orden de llamada es el que esta en tu video todo funciona bien. ¿Cuál seria la explicación a este comportamiento?
Gracias, un saludo.
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
el unico problema que tengo es que cuando usas el todos.map no se como sacar la flecha roja del minuto 11:30. tampoco me sale en las opciones recomendadas del mini cuadro que sale cuando estas escribiendo y te recomienda opciones para no escribir todo. pero ahi no me aparece ninguna flecha. ¿podrias ayudarme?
No jodas, 3 veces viendo el video y no consigo hacer uno solo, jajjaaj, me gusta el video, creo que me falta aprender mas
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 :)
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.
hola un saludo desde venezuela estoy empezando en este mudo de react note que en mi caso cuando importo el App import {App} from './App tengo que agregar .jsx para que me funcione si no me sale error no se si lo estoy haciendo mal pero esa fue la solucion que encontre
Cuales son los plugins de VScode para mostrar las carpetas asi?