Nas lições anteriores, você aprendeu como trabalhar com imports e exports em JavaScript. Nesta lição, vamos ver como importar e exportar componentes em React. Uma exportação torna um componente disponível para outros arquivos. Um import permite que um arquivo use um componente que foi exportado em outro lugar. Em projetos React, é assim que os componentes são reutilizados e combinados para construir interfaces de usuário. Nesta lição, você aprenderá como exportar componentes React usando exportações padrão e exportações nomeadas e como importá-los onde forem necessários. Neste exemplo, temos um componente Cat que pertence a um arquivo chamado Cat.jsx. Para a extensão do arquivo, estamos usando a extensão de arquivo .jsx porque este arquivo está principalmente trabalhando com JSX. Este componente Cat retorna uma marcação JSX com um título e uma imagem de um gato chamado Mr. Bigodes:

function Cat() {
  return (
    <div className="card">
      <h2>Mr. Whiskers</h2>
      <img
        src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/running-cats.jpg"
        alt="Tuxedo cats running on dirt ground."
      />
    </div>
  );
}

Se quisermos usar nosso componente Cat em outro arquivo, precisamos primeiro exportá-lo assim:

function Cat() {
  return (
    <div className="card">
      <h2>Mr. Whiskers</h2>
      <img
        src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/running-cats.jpg"
        alt="Tuxedo cats running on dirt ground."
      />
    </div>
  );
}

export default Cat;

Estamos usando a palavra-chave default porque esta será a exportação padrão do módulo. Você também pode optar por exportar o componente na mesma linha da definição do componente assim:

export default function Cat() {
  return (
    <div className="card">
      <h2>Mr. Whiskers</h2>
      <img
        src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/running-cats.jpg"
        alt="Tuxedo cats running on dirt ground."
      />
    </div>
  );
}

Você pode escolher importar componentes filhos em outros arquivos de componentes pai ou importá-los no arquivo do componente raiz. Para este exemplo, vamos importar o componente Cat dentro do arquivo do componente raiz. Todo projeto React terá um componente de nível superior, normalmente chamado App.jsx:

export default function App() {
  return (
    // return component here
  );
}

Este arquivo geralmente está localizado no diretório src do seu projeto. Você aprenderá mais sobre layouts comuns de projetos em uma lição futura. Para usar o componente Cat dentro do componente raiz App, você precisará importá-lo assim:

import Cat from "./Cat";

export default function App() {
  return (
    // return component here
  );
}

Agora, você pode retornar o componente Cat dentro do componente App assim:

import Cat from "./Cat";

export default function App() {
  return (
    <Cat />
  );
}

Essa abordagem funciona bem quando um arquivo é responsável por exportar um único componente principal, mantendo a sintaxe de importação simples e fácil de ler. Lembre-se, um arquivo só pode ter uma exportação padrão, o que o torna ideal para um arquivo que contém principalmente um único componente. Agora que você sabe como usar exportações padrão, vamos ver as exportações nomeadas. As exportações nomeadas permitem que um arquivo compartilhe múltiplos componentes ou funções. Diferente das exportações padrão, elas devem ser importadas usando o nome exato com que foram exportadas (a menos que você as renomeie usando o termo as). Isso é útil quando um arquivo serve como uma biblioteca de componentes. Por exemplo, aqui está um arquivo contendo dois componentes, Cat e Dog:

// Animals.jsx
export function Cat() {
  return <h2>Mr. Whiskers</h2>;
}

export function Dog() {
  return <h2>Fido</h2>;
}

Usamos a palavra-chave export individualmente em cada componente. Para usar esses em outro arquivo, nós os importamos usando chaves:

import { Cat, Dog } from "./Animals";

export default function App() {
  return (
    <div>
      <Cat />
      <Dog />
    </div>
  );
}

A sintaxe { Cat, Dog } informa ao JavaScript para importar as exportações nomeadas específicas do Animals.jsx arquivo. Os nomes dentro das chaves devem corresponder exatamente aos nomes exportados. Se você precisar evitar conflitos de nomes ou se preferir um nome diferente no arquivo atual, pode renomear um componente durante a importação usando a palavra-chave as.

import { Cat as Kitty } from "./Animals";

export default function App() {
  return <Kitty />;
}

Finalmente, um file pode ter uma exportação default e múltiplas exportações nomeadas.

// Animals.jsx
export default function Cat() {
  return <h2>Mr. Whiskers</h2>;
}

export function Dog() {
  return <h2>Fido</h2>;
}

Ao importar exports mistos, o export padrão vem primeiro (sem chaves), seguido pelos exports nomeados (dentro de chaves):

// App.jsx
import Cat, { Dog } from "./Animals";

export default function App() {
  return (
    <div>
      <Cat />
      <Dog />
    </div>
  );
}

Neste exemplo, Cat é a exportação padrão, então ele não usa chaves. Dog é uma exportação nomeada, então ele as requer. Ao entender como funcionam as exportações padrão e nomeadas, você pode organizar componentes React em vários arquivos e reutilizá-los onde for necessário. À medida que você constrói aplicações maiores, escolher o estilo de exportação correto ajudará a manter seu código claro e fácil de manter e facilitará o trabalho com componentes criados por outras pessoas.