¡Hola! Si deseas aprender React, estás en el lugar correcto. En este curso gratuito de React (8 horas) aprenderás paso a paso todo lo que necesitas saber para comenzar a crear proyectos interactivos.
En este artículo encontrarás una breve introducción a React. Aprenderás por qué es tan importante para el desarrollo web y por qué deberías aprenderlo. Luego encontrarás un curso gratuito de React en nuestro canal de YouTube en español con el cual puedes aprender los fundamentos de React creando cuatro proyectos interactivos paso a paso.
¡Comencemos! ✨
🔸 ¿Qué es React?
React es una biblioteca (también traducido como "librería") de JavaScript para construir interfaces de usuario. Puedes usarla para crear interfaces de usuario que se actualizan y que se muestran de forma muy eficiente porque React solo actualiza los componentes que deben ser actualizados.
¿Por qué deberías aprender React?
La popularidad de React en la comunidad de desarrolladores ha aumentado continuamente. Según la 2021 Developer Survey, una encuesta realizada por Stack Overflow, React.js fue la biblioteca usada más comúnmente por los 67,593 encuestados. Obtuvo 40.14% de los votos cuando se les preguntó a los desarrolladores con cuál biblioteca o framework habían trabajado durante el año o con cuál tenían intenciones o planes de trabajar el año siguiente (2022).
En base a estos resultados, ahora sabes que al aprender React estarás invirtiendo tu tiempo y tus recursos sabiamente porque este es un indicador clave de la relevancia actual y futura de React como biblioteca web.
🔹 Conceptos Básicos de React
Veamos algunos conceptos esenciales que necesitarás para comenzar a trabajar con React:
- Componentes: un componente es una parte independiente y reusable de la interfaz de usuario. Un componente puede manejar su propio estado y podemos combinar componentes como bloques de construcción para formar interfaces de usuario más complejas.
- Props: esta es una abreviación de "propiedades." En React, si un componente es renderizado (creado) por otro componente, puede recibir valores del componente que lo crea. Enviar props a un componente es como enviarle un "mensaje" pero este mensaje consiste en distintos valores que puede usar para personalizar cómo se verá el componente y cómo funcionará dentro de la aplicación.
💡 Dato: los props solo pueden ser enviados del componente "padre" al componente "hijo", no del componente "hijo" al componente "padre".
- Estado: el estado de un componente es una representación de su conjunto de propiedades y sus valores actuales en un momento en particular de la ejecución de la aplicación. Los componentes pueden manejar y actualizar su estado internamente.
- Hook: los hooks son funciones que te permiten "engarcharte" o "conectarte" a ciertas características del estado y del ciclo de vida de los componentes funcionales (fuente).
- Event Listener: una función que se ejecuta cuando ocurre un evento específico. Por ejemplo, una función que será llamada cuando el usuario haga clic en un botón.
¡Genial! Ahora que ya sabes estos conceptos importantes, veamos lo que aprenderás durante el curso.
🔸 Contenido del Curso
Esta es una descripción general de los temas principales que aprenderás durante el curso.
💡 Dato: para tomar el curso debes tener conocimiento previo de HTML, CSS y JavaScript. Si deseas repasar estos temas, te recomiendo tomar estos cursos en nuestro canal de YouTube en Español.
Conceptos y Herramientas Básicas
- Conocimiento previo necesario para tomar el curso.
- Qué es React y por qué es importante para el desarrollo web.
- Conceptos básicos de React (biblioteca, componentes, componentes funcionales y de clase, props, hooks y event listeners).
- Ventajas de React.
- Cómo descargar e instalar Node.js.
- Tour rápido de la página oficial de React y de su documentación.
Estructura de una Aplicación de React
- Cómo crear una aplicación de React con el comando
npx create-react-app. - Descripción detallada de las carpetas y de los archivos creados por este comando.
- Cómo abrir la carpeta de la aplicación en Visual Studio Code.
- Cómo ejecutar una aplicación de React con
npm start. - Cómo eliminar archivos innecesarios y actualizar archivos existentes según las necesidades de tu proyecto.
Introducción a JSX
- Significado de JSX.
- Ventajas de JSX.
- Elementos en JSX.
- Elementos vs. Componentes en React.
- Introducción al DOM.
- Atributos en JSX.
- Cómo renderizar componentes con react-dom.
- Cómo insertar JavaScript en JSX.
- Elementos JSX anidados.
- Etiquetas self-closing en JSX (que no requieren una etiqueta de cierre) .
- Estilos en JSX.
Componentes y Archivos de React
- Cómo definir un componente funcional y un componente de clase.
- Convenciones de nomenclatura para archivos de React.
- Analizar componentes a partir del diseño inicial de la aplicación.
- Exportar e importar componentes.
- Exportaciones por defecto y nombradas.
- Herramientas de React para Google Chrome.
- Pasar props a un componente y usarlos en el componente.
- Etiquetas de apertura y de cierre y
props.children. - Asignar estilo a un componente con hojas de estilo CSS.
- Usar imágenes en una aplicación de React.
- Renderizar varios componentes.
- Asignar event listeners a los elementos de un componente.
- Pasar event listeners como props.
- Componentes de clase, cómo trabajar con ellos y cómo transformar componentes funcionales en componentes de clase y vice versa.
Y... ¡mucho más!✨
Construirás 4 proyectos para practicar tus habilidades. Veamos.
🔹 Proyectos
Durante el curso, contruirás 4 proyectos paso a paso:
Clon de Testimonios de freeCodeCamp
Primero, construirás un clon de la sección de testimonios de freeCodeCamp. En este proyecto, aprenderás y practicarás cómo analizar la estructura de un componente, cómo implementarlo con JSX, cómo asignar estilo a un componente con CSS y cómo renderizar varios componentes pasando distintos props a cada uno de ellos.
Contador de Clics
Nuestro segundo proyecto será un contador de clics. El contador se incrementará al hacer clic en el botón azul y se reiniciará al hacer clic en el botón morado. En este proyecto aprenderás cómo usar el hook useState con componentes funcionales para mantener y actualizar el estado de un componente. También trabajarás con event listeners.
Calculadora Interactiva
Nuestro tercer proyecto será una calculadora interactiva que realizará las cuatro operaciones aritméticas básicas. En este proyecto, practicarás tus conocimientos y trabajarás con flexbox para crear una estructura más elaborada. También aprenderás a instalar paquetes con node package manager y aprenderás cómo verificar si un paquete fue añadido a la lista de dependencias de tu proyecto de React. También trabajarás con props.children.
Aplicación de Tareas Pendientes
Nuestro cuarto proyecto será una aplicación interactiva de tareas pendientes. Podrás añadir tareas, marcarlas como completadas y eliminarlas. Combinarás todo tu conocimiento en este proyecto final y aprenderás a renderizar listas de componentes a partir de arreglos (arrays) y a trabajar con texto ingresado por el usuario.
Al final del curso también adaptaremos los primeros dos proyectos (Clon de Testimonios de freeCodeCamp y Contador de Clics) para practicar cómo usar componentes de clase y cómo convertir componentes funcionales a componentes de clase.
📌 Curso de React en YouTube
Genial. Ahora que ya sabes los principios básicos de React y lo que aprenderás durante el curso, puedes comenzar a tomar el curso en nuestro canal de YouTube:
✍️ Curso creado por Estefania Cassingena Navone (@EstefaniaCassN).
De verdad espero que te guste el curso y que te ayude a tomar tus primeros pasos en el mundo de React.
También te invitamos a continuar aprendiendo con nuestros cursos en español: