TechLead

Introduccion a React

Que es React y por que usarlo para construir interfaces de usuario

Que es React?

React es una biblioteca de JavaScript para construir interfaces de usuario, creada por Facebook (ahora Meta) en 2013. Es la biblioteca frontend mas popular del mundo, utilizada por empresas como Netflix, Airbnb, Instagram y miles mas.

React facilita la creacion de interfaces interactivas dividiendo tu aplicacion en piezas pequenas y reutilizables llamadas componentes. Cada componente gestiona su propio estado y renderiza su propia interfaz.

Por que elegir React?

  • Basado en Componentes: Construye componentes encapsulados que gestionan su propio estado, luego componlos para crear interfaces complejas.
  • DOM Virtual: React usa un DOM virtual para actualizar eficientemente solo lo que ha cambiado, haciendo tus apps rapidas.
  • Declarativo: Describe como debe verse tu UI, y React se encarga de las actualizaciones cuando los datos cambian.
  • Aprende Una Vez, Escribe en Cualquier Lugar: Usa React para apps web, React Native para apps moviles, y mas.
  • Ecosistema Enorme: Comunidad masiva, miles de bibliotecas y excelentes herramientas.

Como Funciona React

El desarrollo web tradicional implica manipular manualmente el DOM (Document Object Model) con JavaScript. Esto puede ser lento y propenso a errores. React toma un enfoque diferente:

Enfoque Tradicional

Manipular directamente el DOM, rastrear cambios manualmente, actualizar elementos imperativamente

Enfoque React

Describe tu UI declarativamente, React calcula los cambios minimos necesarios en el DOM

Tu Primer Codigo React

Asi es como se ve un componente React simple:

function Bienvenida() {
  return (
    <div>
      <h1>Hola, React!</h1>
      <p>Bienvenido a tu primer componente React.</p>
    </div>
  );
}

export default Bienvenida;

Este es un componente funcional. Es simplemente una funcion JavaScript que retorna JSX (sintaxis similar a HTML). Aprenderemos mas sobre JSX en la siguiente leccion.

React vs Otros Frameworks

Caracteristica React Vue Angular
Tipo Biblioteca Framework Framework
Curva de Aprendizaje Moderada Facil Pronunciada
Flexibilidad Alta Media Baja
Mercado Laboral El mas grande Creciendo Empresarial

Configurando React

La forma mas facil de comenzar un nuevo proyecto React es con Vite o Next.js:

# Usando Vite (recomendado para aprender)
npm create vite@latest mi-app-react -- --template react

# Usando Next.js (recomendado para produccion)
npx create-next-app@latest mi-app-next

# Navega a tu proyecto
cd mi-app-react

# Instala dependencias
npm install

# Inicia el servidor de desarrollo
npm run dev

Prerrequisitos

Antes de sumergirte en React, asegurate de estar comodo con:

  • JavaScript ES6+: Funciones flecha, destructuring, operador spread, modulos
  • HTML y CSS: Estructura web basica y estilos
  • npm/Node.js: Conceptos basicos de gestion de paquetes

Conceptos Clave que Cubriremos

Componentes

Bloques de construccion reutilizables de apps React

Props

Pasando datos entre componentes

Hooks

useState, useEffect, y mas

Gestion de Estado

Gestionando datos de la aplicacion

Aprende Mas