Fundamentos de JSX

Que es JSX?

JSX (JavaScript XML) es una extension de sintaxis para JavaScript que se parece a HTML. Te permite escribir codigo de UI que es intuitivo y legible. JSX no es JavaScript valido—se transforma en llamadas de funciones JavaScript regulares por un compilador como Babel.

Sintaxis Basica de JSX

// Elemento JSX
const elemento = <h1>Hola, Mundo!</h1>;

// JSX con multiples elementos (debe tener un padre)
const tarjeta = (
  <div>
    <h2>Titulo</h2>
    <p>Contenido aqui</p>
  </div>
);

// Usando Fragment para evitar divs extra
const lista = (
  <>
    <li>Item 1</li>
    <li>Item 2</li>
  </>
);

Incrustando Expresiones JavaScript

Usa llaves {} para incrustar cualquier expresion JavaScript valida:

const nombre = "Maria";
const edad = 25;

function Saludo() {
  return (
    <div>
      <h1>Hola, {nombre}!</h1>
      <p>Tienes {edad} anios.</p>
      <p>El proximo anio tendras {edad + 1}.</p>
      <p>Fecha actual: {new Date().toLocaleDateString()}</p>
    </div>
  );
}

Diferencias Clave con HTML

Estilos en Linea en JSX

function ComponenteEstilizado() {
  const estilos = {
    backgroundColor: 'azul',
    color: 'blanco',
    padding: '20px',
    borderRadius: '8px'
  };

  return (
    <div style={estilos}>
      <p style={{ fontSize: '18px', fontWeight: 'bold' }}>
        Texto estilizado
      </p>
    </div>
  );
}

Renderizado Condicional en JSX

function Saludo({ estaLogueado }) {
  return (
    <div>
      {/* Usando operador ternario */}
      {estaLogueado ? <h1>Bienvenido de vuelta!</h1> : <h1>Por favor inicia sesion</h1>}

      {/* Usando && para renderizado condicional */}
      {estaLogueado && <button>Cerrar Sesion</button>}
    </div>
  );
}