Describir la UI

React es una biblioteca de JavaScript para renderizar interfaces de usuario (UI por sus siglas en ingl√©s). La UI se construye a partir de peque√Īas unidades como botones, texto e im√°genes. React te permite combinarlas en componentes reutilizables y anidables. Desde sitios web hasta aplicaciones de tel√©fonos, todo en la pantalla se puede descomponer en componentes. En este cap√≠tulo aprender√°s a crear, adaptar y mostrar de forma condicional componentes de React.

Tu primer componente

Las aplicaciones de React se construyen a partir de piezas independientes de UI llamadas componentes. Un componente de React es una funci√≥n de JavaScript a la que le puedes agregar un poco de marcado (markup). Los componentes pueden ser tan peque√Īos como un bot√≥n, o tan grandes como una p√°gina entera. Aqu√≠ vemos un componente Gallery que renderiza tres components Profile:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

¬ŅListo para aprender este tema?

Lee Tu primer componente para que aprendas cómo declarar y utilizar componentes de React.

Lee m√°s

Importar y exportar componentes

Es posible declarar muchos componentes en un archivo, pero los archivos grandes pueden resultar difíciles de navegar. Como solución, puedes exportar un componente a su propio archivo, y luego importar ese componente desde otro archivo:

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

¬ŅListo para aprender este tema?

Lee Importar y exportar componentes para que aprendas como dividir componentes en archivos propios.

Lee m√°s

Escribir marcado con JSX

Cada componente de React es una función de JavaScript que puede contener algo de marcado que React renderiza en el navegador. Los componentes de React utilizan una sintaxis extendida que se llama JSX para representar ese marcado. JSX se parece muchísimo a HTML, pero es un poco más estricto y puede mostrar información dinámica.

Si pegamos marcado existente HTML en un componente de React, no funcionar√° siempre:

export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Hedy Lamarr's Todos</h1>
    <img
      src="https://i.imgur.com/yXOvdOSs.jpg"
      alt="Hedy Lamarr"
      class="photo"
    >
    <ul>
      <li>Invent new traffic lights
      <li>Rehearse a movie scene
      <li>Improve spectrum technology
    </ul>

Si tienes HTML existente como este, puedes arreglarlo usando un convertidor:

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img
        src="https://i.imgur.com/yXOvdOSs.jpg"
        alt="Hedy Lamarr"
        className="photo"
      />
      <ul>
        <li>Invent new traffic lights</li>
        <li>Rehearse a movie scene</li>
        <li>Improve spectrum technology</li>
      </ul>
    </>
  );
}

¬ŅListo para aprender este tema?

Lee Escribir marcado con JSX para aprender cómo escribir JSX válido.

Lee m√°s

JavaScript en JSX con llaves

JSX te permite escribir marcado similar a HTML dentro de un archivo JavaScript, manteniendo la l√≥gica de renderizado y el contenido en el mismo lugar. En ocasiones ser√° deseable a√Īadir un poco de l√≥gica en JavaScript o referenciar una propiedad din√°mica dentro del marcado. En esta situaci√≥n, puedes utilizar llaves en tu JSX para ¬ęabrir una ventana¬Ľ hacia JavaScript:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

¬ŅListo para aprender este tema?

Lee JavaScript y JSX con llaves para aprender cómo acceder a JavaScript desde JSX.

Lee m√°s

Pasar props a un componente

Los componentes de React utilizan props para comunicarse entre ellos. Cada componente padre puede pasar alguna información a sus componentes hijos dándoles props. Las props pueden recodarte a los atributos de HTML, pero puedes pasar cualquier valor de JavaScript con ellas, incluyendo objetos, arreglos, funciones, ¡e incluso JSX!

import { getImageUrl } from './utils.js'

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

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

¬ŅListo para aprender este tema?

Lee Pasar props a un componente para aprender cómo pasar y leer props.

Lee m√°s

Renderizado condicional

Tus componentes a menudo necesitar√°n mostrar algo distinto en diferentes condiciones. En React, puedes renderizar JSX de forma condicional usando sintaxis de JavaScript como las sentencias if, y los operadores && y ? :.

En este ejemplo, el operador && se utiliza para renderizar condicionalmente una marca:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '‚úĒ'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item
          isPacked={true}
          name="Space suit"
        />
        <Item
          isPacked={true}
          name="Helmet with a golden leaf"
        />
        <Item
          isPacked={false}
          name="Photo of Tam"
        />
      </ul>
    </section>
  );
}

¬ŅListo para aprender este tema?

Lee Renderizado condicional para aprender las diferentes formas de renderizar contenido condicionalmente.

Lee m√°s

Renderizado de listas

A menudo querr√°s mostrar m√ļltiples componentes similares a partir de una colecci√≥n de datos. Puedes utilizar filter() y map() de JavaScript junto con React para filtrar y transformar tus arreglos de datos en un arreglo de componentes.

Para cada elemento del arreglo, deber√°s especificar una llave (la prop key). Usualmente, querr√°s usar un ID de la base de datos como key. Las llaves le permiten a React seguir el lugar de cada elemento en la lista a√ļn cuando la lista cambie.

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        known for {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>Scientists</h1>
      <ul>{listItems}</ul>
    </article>
  );
}

¬ŅListo para aprender este tema?

Lee Renderizado de listas para aprender cómo renderizar una lista de componentes, y cómo elegir una llave.

Lee m√°s

Mantener los componentes puros

Algunas funciones de JavaScript son puras. Una función pura:

  • Se ocupa de sus propios asuntos. No cambia ning√ļn objeto o variable que haya existido antes de ser llamada.
  • Misma entrada, misma salida. Dada la misma entrada, una funci√≥n pura deber√≠a devolver siempre el mismo resultado.

Si de forma estricta solo escribes tus componentes como funciones puras, puedes evitar toda una clase de errores desconcertantes y comportamientos impredecibles a medida que tu base de código crece. Aquí hay un ejemplo de un componente impuro:

let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  )
}

Puedes hacer este componente puro pasando una prop en lugar de modificar una variable ya existente:

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

¬ŅListo para aprender este tema?

Lee Mantener los componentes puros para aprender a escribir componentes como funciones puras y predecibles.

Lee m√°s

¬ŅQu√© sigue?

¡Dirígete a Tu primer componente para que comiences a leer este capítulo página por página!

O, si ya te resultan familiares estos temas, ¬Ņpor qu√© no leer sobre c√≥mo A√Īadir interactividad?