React

Una biblioteca JavaScript para construir interfaces de usuario

Creado por Facebook en 2013

¿Qué es React?

  • Biblioteca JavaScript para construir interfaces de usuario
  • Basado en componentes reutilizables
  • Utiliza un DOM virtual para mejor rendimiento
  • Mantiene un flujo de datos unidireccional

Ventajas de React

  • Componentes reutilizables
  • Rendimiento optimizado con DOM virtual
  • Gran ecosistema y comunidad
  • Fácil de aprender y usar
  • Excelente para aplicaciones de una sola página (SPA)
react-logo

Estado y Props

  • Se accede a través de this.props
  • Props: Datos que se pasan a un componente
  • Estado: Datos internos del componente

Componentes

  • Podemos generar componentes que manejen su propio estado, y conviértelos en interfaces de usuario complejas.
react-logo
react-logo

JSX

  • Sintaxis que combina JavaScript y XML
  • Permite escribir código similar a HTML dentro de JavaScript
  • Se compila a JavaScript normal
  • Ejemplo:
const elemento = (
                    

                        < h1>Hola {nombre}
                        < p>Bienvenido a React
                    

                );

Ciclo de vida de componentes

  • Montaje (componentDidMount)
  • Actualización (componentDidUpdate)
  • Desmontaje (componentWillUnmount)

Requisitos para comenzar

  • Node.js y npm instalados
  • Editor de código (VS Code recomendado)
  • Conocimientos básicos de:
    • HTML
    • CSS
    • JavaScript moderno (ES6+)

Crear un proyecto React


# Usando Vite (más rápido y moderno)
npm create vite@latest mi-aplicacion -- --template react

Herramientas útiles

  • React Developer Tools (extensión del navegador)
  • Create React App o Vite
  • React Router (para navegación)
  • Redux o Context API (para gestión de estado)
  • Material-UI o Tailwind CSS (para estilos)

Recursos adicionales