Componentes

Que son los Componentes?

Los componentes son los bloques de construccion de cualquier aplicacion React. Son piezas de UI independientes y reutilizables que puedes componer para construir interfaces complejas. Piensa en ellos como funciones JavaScript que aceptan entradas (props) y retornan elementos React.

Componentes Funcionales

La forma moderna de escribir componentes React es usando funciones:

// Componente funcional simple
function Saludo() {
  return <h1>Hola, Mundo!</h1>;
}

// Funcion flecha (tambien valido)
const Saludo = () => {
  return <h1>Hola, Mundo!</h1>;
};

// Retorno implicito para componentes simples
const Saludo = () => <h1>Hola, Mundo!</h1>;

Usando Componentes

function App() {
  return (
    <div>
      <Saludo />
      <Saludo />
      <Saludo />
    </div>
  );
}

// Renderiza:
// Hola, Mundo!
// Hola, Mundo!
// Hola, Mundo!

Composicion de Componentes

Los componentes pueden contener otros componentes:

function Encabezado() {
  return (
    <header>
      <Logo />
      <Navegacion />
    </header>
  );
}

function Logo() {
  return <img src="/logo.png" alt="Logo" />;
}

function Navegacion() {
  return (
    <nav>
      <a href="/">Inicio</a>
      <a href="/acerca">Acerca</a>
      <a href="/contacto">Contacto</a>
    </nav>
  );
}

function App() {
  return (
    <div>
      <Encabezado />
      <main>Contenido principal</main>
      <footer>Pie de pagina</footer>
    </div>
  );
}

Organizacion de Archivos

// src/components/Boton.jsx
export default function Boton({ children }) {
  return <button className="btn">{children}</button>;
}

// src/components/Tarjeta.jsx
export default function Tarjeta({ titulo, contenido }) {
  return (
    <div className="tarjeta">
      <h2>{titulo}</h2>
      <p>{contenido}</p>
    </div>
  );
}

// src/App.jsx
import Boton from './components/Boton';
import Tarjeta from './components/Tarjeta';

function App() {
  return (
    <div>
      <Tarjeta titulo="Hola" contenido="Bienvenido a React" />
      <Boton>Haz clic</Boton>
    </div>
  );
}