Aprende React en Español – Curso para Principiantes

¿Hablas español y quieres aprender React? Estás en el lugar correcto. En este artículo, encontrarás una introducción completa a React, la popular biblioteca de JavaScript para construir interfaces de usuario interactivas. Aprenderás por qué React es tan importante para el desarrollo web y por qué deberías aprenderlo.

Luego, te presentaré un curso gratuito de React en español de 8 horas en el canal de YouTube de freeCodeCamp en español. En este curso, aprenderás los fundamentos de React y construirás cuatro proyectos paso a paso. Si tienes amigos que hablan español, no dudes en compartir con ellos la versión en español de este artículo. ¡Comencemos! ✨

🔸 ¿Qué es React?

React es una biblioteca de JavaScript de código abierto para construir interfaces de usuario. Fue desarrollada por Facebook y se utiliza para crear aplicaciones web de una sola página (SPA) y aplicaciones móviles.

Con React, puedes crear componentes de interfaz de usuario reutilizables que manejan su propio estado y se actualizan de manera eficiente cuando los datos cambian. React utiliza un DOM virtual para minimizar las actualizaciones del DOM real, lo que resulta en un alto rendimiento.

¿Por qué deberías aprender React?

La popularidad de React en la comunidad de desarrolladores ha ido en constante aumento. Según la Encuesta para desarrolladores de 2022 de Stack Overflow, React.js fue la biblioteca más comúnmente utilizada entre los 73,268 encuestados.

React también obtuvo el 44.63% de los votos cuando se les preguntó a los desarrolladores con qué frameworks, bibliotecas y herramientas han trabajado extensivamente durante el año pasado. Estos números son indicadores clave de la relevancia actual y futura de React como biblioteca web.

Además de su popularidad, React tiene varias ventajas:

• Curva de aprendizaje suave: React es relativamente fácil de aprender comparado con otros frameworks. Con una sólida comprensión de HTML, CSS y JavaScript, puedes comenzar a construir aplicaciones con React rápidamente.

• Componentes reutilizables: React promueve la creación de componentes reutilizables que encapsulan su propia lógica y presentación. Esto conduce a una base de código más modular y mantenible.

• Rendimiento eficiente: React minimiza las costosas actualizaciones del DOM utilizando un DOM virtual y una renderización eficiente. Esto resulta en aplicaciones web rápidas y con capacidad de respuesta.

• Ecosistema sólido: React tiene una enorme comunidad activa y un vasto ecosistema de herramientas, bibliotecas y extensiones. Puedes aprovechar estos recursos para acelerar tu desarrollo.

• Habilidad demandada: Como una de las bibliotecas web más populares, las habilidades de React son muy demandadas en la industria. Aprender React puede abrir muchas oportunidades profesionales.

🔹 Conceptos básicos de React

Antes de sumergirnos en el curso, veamos algunos conceptos esenciales que necesitarás para comenzar a trabajar con React:

Componentes

En React, construyes tu interfaz de usuario con componentes. Un componente es una pieza independiente y reutilizable de la interfaz de usuario que encapsula su propia estructura, lógica y estilo.

Los componentes pueden ser funcionales (funciones de JavaScript que retornan JSX) o de clase (clases de ES6 que extienden React.Component). He aquí un ejemplo de un componente funcional simple:

function Saludo(props) {
  return ;
}

JSX

JSX es una extensión de sintaxis para JavaScript que te permite escribir código similar a HTML dentro de tus componentes de React. Con JSX, puedes describir la estructura y apariencia de tu interfaz de usuario de una manera declarativa e intuitiva.

He aquí un ejemplo de JSX:

const elemento = ;

Aunque parece HTML, JSX es en realidad azúcar sintáctica para llamadas a funciones de React. Babel compila JSX a llamadas React.createElement().

Props

Los props son argumentos que se pasan a los componentes de React. Son de solo lectura y permiten que los componentes padres pasen datos a los componentes hijos.

Aquí tienes un ejemplo de un componente que recibe props:

function Saludo(props) {
  return ;
}

const elemento = <Saludo nombre="Sara" />;

En este ejemplo, el componente Saludo recibe un prop llamado nombre y lo incorpora en su salida JSX.

Estado

Mientras que los props permiten pasar datos de componentes padres a hijos, el estado permite que los componentes manejen sus propios datos que pueden cambiar con el tiempo.

En componentes funcionales, puedes agregar estado usando el Hook useState. He aquí un ejemplo:

import { useState } from ‘react‘;

function Contador() {
  const [cuenta, setCuenta] = useState(0);

  return (
    <div>
      <p>Has hecho clic {cuenta} veces</p>
      <button onClick={() => setCuenta(cuenta + 1)}>
        Haz clic aquí
      </button>
    </div>
  );
}

En este ejemplo, cuenta es una variable de estado que se inicializa en 0. Cuando el usuario hace clic en el botón, la función setCuenta actualiza el estado, lo que desencadena una nueva renderización del componente.

Event Listeners

En React, puedes adjuntar event listeners a elementos JSX usando props con nombres como onClick, onSubmit, onChange, etc. Estos props aceptan una función que se llamará cuando ocurra el evento.

Aquí tienes un ejemplo de un componente con un event listener:

function Boton() {
  function handleClick() {
    console.log(‘¡Me hicieron clic!‘);
  }

  return (
    <button onClick={handleClick}>
      Hazme clic
    </button>
  );
}

En este ejemplo, cuando el usuario hace clic en el botón, se llama a la función handleClick y se registra un mensaje en la consola.

📚 Contenido del curso

Ahora que conoces los conceptos básicos de React, echemos un vistazo al contenido del curso en español. Aquí hay un resumen de los principales temas que aprenderás:

Conceptos básicos y herramientas

• Conocimientos previos necesarios para tomar el curso (HTML, CSS, JavaScript)
• 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
• Recorrido rápido por el sitio web oficial de React y la documentación

Estructura de una aplicación React

• Cómo crear una aplicación React con el comando npx create-react-app
• Descripción detallada de las carpetas y archivos creados por este comando
• Cómo abrir la carpeta de la aplicación en Visual Studio Code
• Cómo ejecutar una aplicación React con npm start
• Cómo eliminar archivos innecesarios y actualizar archivos existentes para adaptarlos a 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 incrustar JavaScript en JSX
• Elementos anidados en JSX
• Etiquetas de cierre automático en JSX
• 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
• Análisis de componentes a partir del diseño inicial de la aplicación
• Exportar e importar componentes
• Exportaciones por defecto vs. con nombre
• Herramientas de React Developer en Google Chrome
• Pasar props a un componente y usarlos en el componente
• Etiquetas de apertura y cierre y props.children
• Agregar estilo a un componente con hojas de estilo CSS
• Uso de imágenes en una aplicación React
• Renderizar múltiples 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 viceversa

Y… ¡mucho más! ✨ Construirás 4 proyectos para practicar tus habilidades. Veámoslos.

🛠️ Proyectos de React

Durante el curso, construirás 4 proyectos de React paso a paso:

Clon de Testimonios de freeCodeCamp

Primero, construirás un clon de la sección de testimonios de freeCodeCamp en español. En este proyecto, aprenderás y practicarás cómo analizar la estructura de un componente, cómo implementarlo con JSX, cómo agregar estilo a un componente con CSS y cómo renderizar múltiples componentes pasando diferentes props a cada uno de ellos.

Contador de Clics

Nuestro segundo proyecto será un contador de clics. El contador se incrementará cuando hagamos clic en el botón azul y podremos restablecerlo con el botón morado. En este proyecto, aprenderás a usar el Hook useState con componentes funcionales para realizar un seguimiento del estado de un componente y actualizarlo. 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 de React y trabajarás con Flexbox para crear un diseño más sofisticado. También aprenderás a instalar paquetes con el Administrador de paquetes de Node (npm) y cómo verificar si un paquete se ha agregado a las dependencias de tu proyecto. Además, trabajarás con props.children.

Aplicación de Lista de Tareas Interactiva

Nuestro cuarto proyecto será una aplicación interactiva de lista de tareas. Podrás agregar tareas, marcar tareas como completadas y eliminar tareas. Combinarás todos tus conocimientos en este proyecto final y aprenderás cómo renderizar listas de componentes a partir de arreglos y cómo trabajar con la entrada de texto ingresada por el usuario.

Al final del curso, también adaptaremos los dos primeros proyectos (Clon de Testimonios de freeCodeCamp y Contador de Clics) para practicar cómo trabajar con componentes de clase y cómo transformar componentes funcionales en componentes de clase.

🚀 ¿Listo para aprender React?

Aprender React te abrirá un mundo de posibilidades en el desarrollo web. Con React, podrás construir interfaces de usuario dinámicas y eficientes para aplicaciones web modernas.

Además, las habilidades de React son muy demandadas en el mercado laboral actual. Muchas empresas buscan desarrolladores con experiencia en React para sus proyectos. Al aprender React, estarás dando un paso importante hacia una carrera exitosa como desarrollador web.

Recuerda que aprender un nuevo framework o biblioteca lleva tiempo y práctica. No te desanimes si encuentras desafíos en el camino. Con perseverancia y dedicación, podrás dominar React y llevar tus habilidades de desarrollo web al siguiente nivel.

Entonces, ¿qué estás esperando? ¡Comienza tu viaje de aprendizaje de React hoy mismo! Toma el curso gratuito de React en español en el canal de YouTube de freeCodeCamp y construye increíbles aplicaciones web con tus nuevas habilidades.

Happy coding! 💻✨