React tutorial en español para principiantes
React es de las tecnologías más populares del desarrollo frontend moderno. Es adorada por cientos de miles de desarrolladores y su popularidad sigue en subida.
Es por ello que en esta serie de vídeos te ayudo a que puedas conocer esta librería desde cero, haciendo una App de Memes, enfocada en principiantes, esto es, desarrolladores que vayan iniciando en el mundo de Javascript.
¿Qué es React? ¿Quiénes lo usan? Estas preguntas son respondidas en este vídeo introductorio.
¿Cómo puedo iniciar una app en React? ¿Cómo configuro mi entorno de desarrollo? En este vídeo lo verás paso a paso.
Entramos en el corazón de React. ¿Qué es un buen component? ¿Cómo hago un web component en React?
Hemos visto cómo hacer web components en React, pero ¿Qué es esa sintaxis que parece HTML? ¿Cómo es posible que sea Javascript? En este vídeo lo veremos más a detalle.
Ya que sabes lo que es un web component en React y lo que es JSX, es hora de ver que existen tipos diferentes de componentes 😮
Un componente en React tiene un ciclo de vida. Conocerlo es elemental para realizar ciertas operaciones en tus componentes. Aquí lo veremos:
Entrando a una de las buenas prácticas. Siempre validar los props con prop-types. Aquí aprenderás qué es y cómo usarlo.
A partir de este vídeo entramos a temas más interesantes. Usando todos los conceptos aprendidos anteriormente, vamos a comenzar a consumir una API externa que nos trae datos sobre memes.
Las listas de elementos en apps de React es algo muy común. En este vídeo vamos a hacer una lista de memes de acuerdo a los datos obtenidos en la API
Ya hemos visto cómo consumir la API y enlistar memes. Es hora de aplicar buenas prácticas en nuestro código para mantener desacoplados nuestros componentes y nuestra lógica de llamadas a la API.
Ahora vamos a definir mejor nuestro componente Meme para que nos muestre toda la información del mismo, ya que de momento estamos mostrando sólo el nombre.
Ya tenemos nuestra App más decente. Consumimos la API, enlistamos los memes a través de nuestro componente. Ahora vamos a agregar estilos para que tenga un look mucho mejor.
Ya que tenemos avanzada nuestra App, vamos a hacer un pequeño refactor en los componentes. Veremos lo que es React.fragment y props.children.
Nos hace falta crear el buscador de memes en nuestra app. Esto constará de: crear la UI del buscador, consumir la API de acuerdo al buscador y mostrar los resultados.
En este vídeo comenzaremos con la UI.
Teniendo nuestra UI para la búsqueda, vamos a comunicar de nuestro componente hijo a nuestro componente padre qué valor es el que queremos buscar. De este modo, consumiremos la API.
Ahora vamos a tocar el tema de crear componentes controlados en formularios, esto para que sea el componente de Search quien controle el valor del input donde el usuario escribirá el meme a buscar.
Llegados a este punto, sólo nos falta poner la cereza al pastel handleando el formulario de Search para consumir la API.
Finalmente, haremos unos detalles finales en nuestra App usando diferentes expresiones condicionales.
🔔 Bonus: ¿Te gustaría dar un paso al siguiente nivel en React JS?
He publicado este ebook en el que te ayudo a dar el siguiente paso en tu carrera con conocimientos de React JS avanzados, dale un ojo!
👉👉👉 Da click aquí para ver el ebook.
Espero que este curso introductorio a React te haya servido. En lo personal, React es mi librería preferida para hacer apps frontend y disfruto mucho compartiendo conocimiento sobre ella.
¿Te ha gustado el contenido? te invito a darle clap 👏 y compártelo! 😃
Puedes subscribirte a mi canal de YouTube y entrar al blog de developero para más contenidos de este tipo ⚡️🤘
