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, ahora tienes tres lugares para actualizar cada vez que cambia 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 JavaScript que devuelve JSX, una descripción de una parte de la interfaz. Lo usas escribiéndolo como una etiqueta HTML, y React ejecuta la función para saber qué mostrar en la 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 la aplicación completa.

Hay un par de reglas para esto. Los nombres de componentes empiezan con mayúscula. Greeting y App funcionan como etiquetas porque React puede distinguirlos de los elementos HTML normales como div o h1, que empiezan con minúscula. Un componente que devuelve JSX también tiene que devolver un solo elemento raíz, de la manera en que App envuelve sus dos etiquetas Greeting en un div envolvente. Esto confunde a casi todos la primera vez: si intentas devolver dos elementos hermanos sin envolverlos y React lanza un error. Si necesitas devolver 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. Agrupa el h1 y el p en un solo valor de retorno sin agregar un elemento a la página.

Nota de versión

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

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

Todavía verás componentes de clase así en bases de código existentes. Este manual usa componentes funcionales en todas partes, que es la forma estándar actual de escribir React. Ve History and versions para entender 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. Dado el mismo props, un componente debe devolver el mismo JSX cada vez. No busques datos, no configures un temporizador, ni mutes variables fuera de la función directamente en el cuerpo. Esas cosas pertenecen a un hook como useEffect (cubierto después, en Effects), que ejecuta el código después de que el renderizado está hecho, no durante él. Leer el DOM, escribir en una variable declarada fuera del componente, o depender de un valor que cambia entre llamadas, todo esto rompe la regla y genera bugs difíciles de rastrear, porque React puede llamar 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 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 eso queda claro, 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 mayúscula inicial, y devuelve un solo elemento raíz, usando un fragmento cuando necesites agrupar hermanos sin un elemento envolvente extra. La composición, componentes pequeños combinados en otros más grandes, es cómo se construye toda pantalla real.

JunoUn componente es una función Un componente es una función pura de sus props: mismo entrada, mismo JSX salida, sin efectos secundarios en el cuerpo. Esa restricción es lo que permite a React ejecutar tus componentes libremente, hacer batch de renderizados y reordenar el trabajo sin romper nada. Los efectos secundarios tienen su propio hook por una razón.

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