Construcción de IU con Componentes

Conceptos básicos de React

Existen tres conceptos fundamentales de React que necesitarás conocer para comenzar a construir aplicaciones con React. Estos son:

• Componentes
• Props (Propiedades)
• Estado (State)

En los próximos capítulos, revisaremos estos conceptos y proporcionaremos recursos donde podrás seguir aprendiendo. Una vez que estés familiarizado con estos conceptos, te mostraremos cómo instalar Next.js y utilizar características más recientes de React como los Componentes de Servidor y Cliente.

Componentes

Las interfaces de usuario pueden descomponerse en bloques más pequeños llamados componentes.

Los componentes te permiten construir fragmentos de código autocontenidos y reutilizables. Si piensas en los componentes como piezas de LEGO, puedes tomar estos bloques individuales y combinarlos para formar estructuras más grandes. Si necesitas actualizar una parte de la interfaz, puedes modificar el componente o bloque específico.

Esta modularidad permite que tu código sea más mantenible a medida que crece, ya que puedes añadir, actualizar y eliminar componentes sin afectar el resto de la aplicación.

Lo bueno de los componentes de React es que son simplemente JavaScript. Veamos cómo puedes escribir un componente de React desde una perspectiva de JavaScript:

Creación de componentes

En React, los componentes son funciones. Dentro de tu etiqueta script, crea una nueva función llamada header:

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
  }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

Un componente es una función que devuelve elementos de interfaz de usuario. Dentro de la declaración return de la función, puedes escribir JSX:

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

Para renderizar este componente en el DOM, pásalo como primer argumento en el método root.render():

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(header);
</script>

Pero, espera un momento. Si intentas ejecutar el código anterior en tu navegador, obtendrás un error. Para que funcione, hay dos cosas que debes hacer:

Primero, los componentes de React deben escribirse con mayúscula inicial para distinguirlos del HTML y JavaScript convencional:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
// Capitaliza el Componente de React
root.render(Header);

Segundo, usas los componentes de React de la misma manera que usarías etiquetas HTML normales, con corchetes angulares <>:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

Si intentas ejecutar el código en tu navegador nuevamente, verás los cambios.

Anidación de componentes

Las aplicaciones suelen incluir más contenido que un solo componente. Puedes anidar componentes de React dentro de otros como lo harías con elementos HTML normales.

En tu ejemplo, crea un nuevo componente llamado HomePage:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return <div></div>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

Luego anida el componente <Header> dentro del nuevo componente <HomePage>:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      {/* Anidando el componente Header */}
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

Árbol de componentes

Puedes seguir anidando componentes de React de esta manera para formar árboles de componentes.

Por ejemplo, tu componente principal HomePage podría contener un Header, un Article y un Footer. Y cada uno de esos componentes podría a su vez tener sus propios componentes hijos, y así sucesivamente. Por ejemplo, el componente Header podría contener un Logo, un Title y un Navigation.

Este formato modular te permite reutilizar componentes en diferentes partes de tu aplicación.

En tu proyecto, dado que <HomePage> es ahora tu componente principal, puedes pasarlo al método root.render():

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);

Recursos adicionales:

• Tu primer componente
• Importación y exportación de componentes