Componentes

Imagina que una página necesita la misma tarjeta de saludo en tres lugares, cada una con el mismo encabezado y diseño. Si copias el código tres veces, tendrás tres lugares donde actualizar cada vez que cambie el diseño. La solución de React es escribir esa parte de la interfaz una sola vez y reutilizarla como un componente: una función de JavaScript que devuelve JSX, una descripción de una parte de la interfaz. La usas escribiéndola como una etiqueta HTML, y React ejecuta la función para determinar qué mostrar en pantalla.

Aquí está el más simple:

function Greeting() {
  return <h1>Hola</h1>
}

Greeting es una función que devuelve <h1>Hola</h1>. Para mostrarlo realmente, lo renderizas dentro de otro componente, usándolo como una etiqueta:

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
    </div>
  )
}

App también es un componente. Renderiza dos componentes Greeting dentro de un div, y cada uno imprime su propio <h1>Hola</h1>. Esto es composición: construyes componentes pequeños y los combinas en otros más grandes, hasta llegar a una aplicación completa.

Hay un par de reglas que vienen con esto. Los nombres de componentes comienzan con una letra mayúscula. Greeting y App funcionan como etiquetas porque React puede diferenciarlos de elementos HTML normales como div o h1, que comienzan en minúscula. Un componente que devuelve JSX también debe devolver un único elemento raíz, de la manera que App envuelve sus dos etiquetas Greeting en un div envolvente. Esto confunde a casi todos la primera vez: si devuelves dos elementos hermanos sin envolverlos y React lanza un error. Si necesitas devolver elementos hermanos sin envolverlos en un div extra, usa un fragmento:

function Greeting() {
  return (
    <>
      <h1>Hola</h1>
      <p>Bienvenido de vuelta</p>
    </>
  )
}

<> y </> son un fragmento. Agrupan el h1 y el p en un único valor de retorno sin agregar un elemento a la página.

Nota de versión

El código de React antiguo a menudo define componentes como clases en lugar de funciones:

class Greeting extends React.Component {
  render() {
    return <h1>Hola</h1>
  }
}

Seguirás viendo componentes de clase así en bases de código existentes. Este manual usa componentes de función en todo, que es la forma estándar actual de escribir React. Ve Historia y versiones para saber cómo React pasó de un estilo al otro.

Los componentes se llaman durante el renderizado, así que trata el cuerpo de la función puramente como un lugar para cálculos, y mantén los efectos secundarios fuera de él. Dado el mismo conjunto de props, un componente debe devolver el mismo JSX cada vez. No hagas peticiones de datos, establezca temporizadores, o mutes variables fuera de la función directamente en el cuerpo. Esos pertenecen a un hook como useEffect (cubierto más adelante, en Efectos), que ejecuta código después de que el renderizado se completa en lugar de durante él. Leer el DOM, escribir en una variable declarada fuera del componente, o depender de un valor que cambia entre llamadas rompen esto y causan errores que son difíciles de rastrear, porque React puede llamar a tu componente más de una vez por renderizado por razones fuera de tu control.

JunoUn componente es una función La idea completa cabe en una sola oración: un componente es una función, y llamarla con una etiqueta como <Greeting /> ejecuta esa función y muestra lo que devuelve. Una vez que entiendas eso, el resto de React es aprender qué puedes poner dentro de estas funciones.

JunoUn componente es una función Los componentes son la unidad con la que construyes en React. Mantenlos pequeños, nómbralos con una letra mayúscula, y devuelve una única raíz, usando un fragmento cuando necesites agrupar elementos hermanos sin un elemento envolvente extra.

La composición, componentes pequeños combinados en otros más grandes, es cómo se construye cada pantalla real.

JunoUn componente es una función Un componente es una función pura de sus props: misma entrada, mismo JSX de salida, sin efectos secundarios en el cuerpo. Esa restricción es lo que le permite a React llamar a tus componentes libremente, procesar renderizados en lote, y reordenar trabajo sin romper nada.

Los efectos secundarios tienen su propio hook por una razón.

Siguiente: JSX, la sintaxis que viste dentro de estas sentencias return.