Inicio rpido

Crear y anidar componentes

Las aplicaciones de React estn hechas a partir de componentes. Un componente es una pieza de UI (siglas en ingls de interfaz de usuario) que tiene su propia lgica y apariencia. Un componente puede ser tan pequeo como un botn, o tan grande como toda una pgina.

Los componentes de React son funciones de JavaScript que devuelven markup (marcado):

function MyButton() {
  return (
    <button>Soy un botn</button>
  );
}

Ahora que has declarado MyButton, puedes anidarlo en otro componente:

export default function MyApp() {
  return (
    <div>
      <h1>Bienvenido a mi aplicacin</h1>
      <MyButton />
    </div>
  );
}

Nota que <MyButton /> empieza con mayscula. As es como sabes que es un componente de React. Los nombres de los componentes de React siempre deben comenzar con mayscula, mientras las etiquetas HTML deben estar minsculas.

Mira el resultado:

Las palabras clave export default especifican el componente principal en el archivo. Si no ests familiarizado con alguna parte de la sintaxis de JavaScript, MDN y javascript.info tienen magnficas referencias.

Escribir marcado con JSX

La sintaxis de marcado que viste arriba se llama JSX. Es totalmente opcional, pero la mayora de los proyectos de React usan JSX por la comodidad que ofrece. Todas las herramientas que recomendamos para el desarrollo local son compatibles con JSX sin ningn tipo de configuracin.

JSX es ms estricto que HTML. Tienes que cerrar etiquetas como <br />. Tu componente tampoco puede devolver mltiples etiquetas de JSX. Debes envolverlas en un padre compartido, como <div>...</div> o en un envoltorio vaco <>...</>:

function AboutPage() {
  return (
    <>
      <h1>Acerca de</h1>
      <p>Hola.<br />Cmo vas?</p>
    </>
  );
}

Si tienes mucho HTML que convertir a JSX, puedes utilizar un convertidor en lnea.

Aadir estilos

En React, especificas una clase de CSS con className. Funciona de la misma forma que el atributo class de HTML:

<img className="avatar" />

Luego escribes las reglas CSS para esa clase en un archivo CSS aparte:

/* In your CSS */
.avatar {
  border-radius: 50%;
}

React no prescribe como debes aadir tus archivos CSS. En el caso ms simple, aades una etiqueta <link> a tu HTML. Si utilizas una herramienta de construccin o un framework, consulta su documentacin para saber como aadir un archivo CSS a tu proyecto.

Mostrar datos

JSX te permite poner marcado dentro de JavaScript. Las llaves te permiten escapar de nuevo hacia JavaScript de forma tal que puedas incrustar una variable de tu cdigo y mostrrsela al usuario. Por ejemplo, esto mostrar user.name:

return (
  <h1>
    {user.name}
  </h1>
);

Tambin puedes escaparte hacia JavaScript en los atributos JSX, pero tienes que utilizar llaves en lugar de comillas. Por ejemplo, className="avatar" pasa la cadena "avatar" como la clase CSS, pero src={user.imageUrl} lee el valor de la variable de JavaScript user.imageUrl y luego pasa el valor como el atributo src:

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

Puedes tambin poner expresiones ms complejas dentro de llaves, por ejemplo, concatenacin de cadenas:

En el ejemplo de arriba, style={{}} no es una sintaxis especial, sino un objeto regular {} dentro de las llaves de JSX de style={ }. Puedes utilizar el atributo style cuando tus estilos dependen de variables de JavaScript.

Renderizado condicional

En React, no hay una sintaxis especial para escribir condicionales. En cambio, usars las mismas tcnicas que usas al escribir cdigo regular de JavaScript. Por ejemplo, puedes usar una sentencia if para incluir JSX condicionalmente:

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

Si prefieres un cdigo ms compacto, puedes utilizar el operador ? condicional. A diferencia de if, funciona dentro de JSX:

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

Cuando no necesites la rama else, puedes tambin usar la sintaxis lgica &&, ms breve:

<div>
  {isLoggedIn && <AdminPanel />}
</div>

Todos estos enfoques tambin funcionan para especificar atributos condicionalmente. Si no ests familiarizado con toda esta sintaxis de JavaScript, puedes comenzar por usar siempre if...else.

Renderizado de listas

Dependers de funcionalidades de JavaScript como los bucles for y la funcin map() de los arreglos para renderizar listas de componentes.

Por ejemplo, digamos que tienes un arreglo de productos:

const products = [
  { title: 'Col', id: 1 },
  { title: 'Ajo', id: 2 },
  { title: 'Manzana', id: 3 },
];

Dentro de tu componente, utiliza la funcin map() para transformar el arreglo de productos en un arreglo de elementos <li>:

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

Nota que <li> tiene un atributo key (llave). Para cada elemento en una lista, debes pasar una cadena o un nmero que identifique ese elemento de forma nica entre sus hermanos. Usualmente, una llave debe provenir de tus datos, como un ID de una base de datos. React depender de tus llaves para entender qu ha ocurrido si luego insertas, eliminas o reordenas los elementos.

Responder a eventos

Puedes responder a eventos declarando funciones controladoras de eventos dentro de tus componentes:

function MyButton() {
  function handleClick() {
    alert('Me hiciste clic!');
  }

  return (
    <button onClick={handleClick}>
      Hazme clic
    </button>
  );
}

Nota que onClick={handleClick} no tiene parntesis al final! No llames a la funcin controladora de evento: solamente necesitas pasarla hacia abajo. React llamar a tu controlador de evento cuando el usuario haga clic en el botn.

Actualizar la pantalla

A menudo, querrs que tu componente recuerde alguna informacin y la muestre. Por ejemplo, quiz quieras contar el nmero de veces que hiciste clic en un botn. Para lograrlo, aade estado a tu componente.

Primero, importa useState de React:

import { useState } from 'react';

Ahora puedes declarar una variable de estado dentro de tu componente:

function MyButton() {
  const [count, setCount] = useState(0);
  // ...

Obtendrs dos cosas de useState: el estado actual (count), y la funcin que te permite actualizarlo (setCount). Puedes nombrarlos de cualquier forma, pero la convencin es llamarlos algo como [something, setSomething].

La primera vez que se muestra el botn, count ser 0 porque pasaste 0 a useState(). Cuando quieras cambiar el estado llama a setCount() y psale el nuevo valor. Al hacer clic en este botn se incrementar el contador:

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Hiciste clic {count} veces
    </button>
  );
}

React llamar de nuevo a la funcin del componente. Esta vez, count ser 1. Luego ser 2. Y as sucesivamente.

Si renderizas el mismo componente varias veces, cada uno obtendr su propio estado. Intenta hacer clic independientemente en cada botn:

Nota que cada botn recuerda su propio estado count y que no afecta a otros botones.

El uso de los Hooks

Las funciones que comienzan con use se llaman Hooks. useState es un Hook nativo dentro de React. Puedes encontrar otros Hooks nativos en la referencia de la API de React. Tambin puedes escribir tus propios Hooks mediante la combinacin de otros existentes.

Los Hooks son ms restrictivos que las funciones regulares. Solo puedes llamar a los Hooks en el primer nivel de tus componentes (u otros Hooks). Si quisieras utilizar useState en una condicional o en un bucle, extrae un nuevo componente y ponlo ah.

Compartir datos entre componentes

En el ejemplo anterior, cada MyButton tena su propio count independiente, y cuando hiciste clic en cada botn, solo el count del botn en hiciste clic cambiaba:

[Diagrama que muestra un rbol de tres componentes, un padre etiquetado como MyApp y dos hijos etiquetados como MyButton. Ambos componentes MyButton contienen una variable count con valor cero.]

[Diagrama que muestra un rbol de tres componentes, un padre etiquetado como MyApp y dos hijos etiquetados como MyButton. Ambos componentes MyButton contienen una variable count con valor cero.]

Inicialmente, cada estado count de MyButton es 0.

[El mismo diagrama anterior, con la variable count del primero hijo MyButton sealada indicando un clic con el valor de count incrementado a uno. El segundo componente MyButton an contiene el valor cero.]

[El mismo diagrama anterior, con la variable count del primero hijo MyButton sealada indicando un clic con el valor de count incrementado a uno. El segundo componente MyButton an contiene el valor cero.]

El primer MyButton actualiza su count a 1.

Sin embargo, a menudo necesitas que los componentes compartan datos y se actualicen siempre en conjunto.

Para hacer que ambos componentes MyButton muestren el mismo count y se actualicen juntos, necesitas mover el estado de los botones individuales hacia arriba al componente ms cercano que los contiene a todos.

En este ejemplo, es MyApp:

[Diagrama que muestra un rbol de tres componentes, un padre etiquetado como MyApp y dos hijos etiquetados como MyButton. MyApp contiene count con valor cero que se pasa hacia abajo a los dos componentes MyButton, que tambin tienen valor cero.]

[Diagrama que muestra un rbol de tres componentes, un padre etiquetado como MyApp y dos hijos etiquetados como MyButton. MyApp contiene count con valor cero que se pasa hacia abajo a los dos componentes MyButton, que tambin tienen valor cero.]

Inicialmente, el estado count en MyApp es 0 y se pasa hacia abajo a los dos hijos.

[El mismo diagrama anterior con la variable count del componente padre MyApp sealada indicando un clic con el valor incrementado a uno. El flujo de ambos componentes hijo MyButton tambin est sealado y el valor de count en cada hijo est en uno indicando que el valor se pas hacia abajo.]

[El mismo diagrama anterior con la variable count del componente padre MyApp sealada indicando un clic con el valor incrementado a uno. El flujo de ambos componentes hijo MyButton tambin est sealado y el valor de count en cada hijo est en uno indicando que el valor se pas hacia abajo.]

Al hacer clic, MyApp actualiza su estado count a 1 y se lo pasa hacia abajo a ambos hijos.

Ahora cuando haces clic en cualquiera de los botones, count en MyApp cambiar, lo que causar que cambien ambos counts en MyButton. Aqu est como puedes expresarlo con cdigo.

Primero, mueve el estado hacia arriba desde MyButton hacia MyApp:

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Contadores que se actualizan separadamente</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  // ... estamos moviendo el cdigo de aqu ...
}

Luego, pasa el estado hacia abajo desde MyApp hacia cada MyButton, junto con la funcin compartida para controlar el evento de clic. Puedes pasar la informacin a MyButton usando las llaves de JSX, de la misma forma como lo hiciste anteriormente con las etiquetas nativas <img>:

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Contadores que se actualizan juntos</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

La informacin que pasas hacia abajo se llaman props. Ahora el componente MyApp contiene el estado count y el controlador de evento handleClick, y pasa ambos hacia abajo como props a cada uno de los botones.

Finalmente, cambia MyButton para que lea las props que le pasaste desde el componente padre:

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Hiciste clic {count} veces
    </button>
  );
}

Cuando haces clic en el botn, el controlador onClick se dispara. A la prop onClick de cada botn se le asign la funcin handleClick dentro de MyApp, de forma que el cdigo dentro de ella se ejecuta. Ese cdigo llama a setCount(count + 1), que incremente la variable de estado count. El nuevo valor de count se pasa como prop a cada botn, y as todos muestran el nuevo valor.

Esto se llama levantar el estado. Al mover el estado hacia arriba, lo compartimos entre componentes.

Prximos pasos

En este punto ya conoces los elementos bsicos de como escribir cdigo en React!

Prueba el Tutorial para ponerlos en prctica y construir tu primera miniaplicacin de React.