Componentes: Los bloques de construccion

Un componente es una funcion que retorna JSX. Es la unidad basica de React.

Componente funcional

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

// Arrow function (equivalente)
const Saludo = () => {
  return <h1>Hola Mundo!</h1>;
};

// Return implicito
const Saludo = () => <h1>Hola Mundo!</h1>;

Usando componentes

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

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

Organizando componentes

// src/components/Header.jsx
function Header() {
  return (
    <header>
      <h1>Mi Aplicacion</h1>
      <nav>
        <a href="/">Inicio</a>
        <a href="/about">Acerca</a>
      </nav>
    </header>
  );
}

export default Header;

// src/App.jsx
import Header from './components/Header';

function App() {
  return (
    <div>
      <Header />
      <main>Contenido</main>
    </div>
  );
}

Composicion de componentes

function Card() {
  return (
    <div className="card">
      <CardHeader />
      <CardBody />
      <CardFooter />
    </div>
  );
}

function CardHeader() {
  return <div className="card-header">Titulo</div>;
}

function CardBody() {
  return <div className="card-body">Contenido</div>;
}

function CardFooter() {
  return <div className="card-footer">Pie</div>;
}

Los componentes deben empezar con mayuscula. React distingue entre componentes (Saludo) y elementos HTML (div).