Que es React y Para Que Sirve (Explicacion Simple)

React es la libreria de JavaScript mas popular del mundo para construir interfaces de usuario. La usan Facebook, Instagram, Netflix, Airbnb, Uber, Discord y miles de empresas mas. Si quieres trabajar en frontend, React es casi obligatorio.

Que es React (en simple)

React te permite construir paginas web dividiendolas en piezas pequenas llamadas componentes. En vez de tener un archivo HTML gigante, divides la pagina en partes reutilizables:

// Un componente = una pieza de la interfaz
function Saludo({ nombre }) {
  return <h1>Hola {nombre}!</h1>;
}

// Lo usas como un bloque de LEGO
function App() {
  return (
    <div>
      <Saludo nombre="Ana" />
      <Saludo nombre="Carlos" />
      <Saludo nombre="Maria" />
    </div>
  );
}

Cada componente maneja su propia logica y apariencia. Cuando cambias uno, no afecta a los demas.

Por que React es tan popular

• Componentes reutilizables: Escribes un boton una vez y lo usas en toda la app
• Virtual DOM: React solo actualiza lo que cambio, no toda la pagina — es ultra rapido
• Ecosistema enorme: Miles de librerias, tutoriales, y comunidad activa
• Demanda laboral: El framework frontend #1 en ofertas de trabajo
• React Native: El mismo conocimiento te sirve para hacer apps moviles

Los 3 conceptos clave de React

1. Componentes

Son funciones que devuelven JSX (HTML dentro de JavaScript). Cada pieza de tu interfaz es un componente.

2. Props

Son los datos que le pasas a un componente desde afuera, como parametros de una funcion.

3. Estado (useState)

Son datos que pueden cambiar dentro del componente. Cuando el estado cambia, React re-renderiza automaticamente:

import { useState } from "react";

function Contador() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Sumar
      </button>
    </div>
  );
}

Como empezar con React

1. Aprende JavaScript primero (variables, funciones, arrays, objetos, DOM)
2. Entiende ES6+ (arrow functions, destructuring, spread, modules)
3. Empieza con React: componentes, props, useState, useEffect
4. Construye un proyecto: app de notas, to-do list, buscador