Como Criar Componentes Personalizados no React

O autor selecionou a Creative Commons para receber uma doação como parte do programa Write for DOnations.

Introdução

Neste tutorial, você aprenderá a criar componentes personalizados no React. Os componentes são peças independentes de funcionalidade que você pode reutilizar em sua aplicação, sendo os blocos de construção de todas as aplicações do React. Geralmente, eles podem ser funções simples e classes do JavaScript, mas você os utiliza como se fossem elementos HTML personalizados. Botões, menus, e qualquer outro conteúdo de página de front-end podem todos ser criados como componentes. Os componentes também contêm informações de estado e exibem markdown.

Após aprender como criar componentes no React, você será capaz de dividir aplicações complexas em pequenas partes que são mais fáceis de criar e manter.

Neste tutorial, você criará uma lista de emojis que exibirá os nomes deles ao serem clicados. Os emojis serão criados utilizando um componente personalizado e serão chamados de dentro de outro componente personalizado. Ao final deste tutorial, você terá criado componentes personalizados usando tanto classes quanto funções do JavaScript, e compreenderá como separar o código existente em partes reutilizáveis e como armazenar os componentes em uma estrutura de arquivos legível.

Pré-requisitos

• Você precisará de um ambiente de desenvolvimento executando o Node.js; este tutorial foi testado na versão 10.20.1 do Node.js e na versão 6.14.4 do npm. Para instalar essa versão em macOS ou Ubuntu 18.04, siga os passos descritos no artigo sobre Como instalar o Node.js e criar um ambiente de desenvolvimento local em macOS ou a seção intitulada Instalando usando um PPA, do artigo sobre Como instalar o Node.js no Ubuntu 18.04.

• Você precisará ser capaz de criar aplicativos com o Create React App. Você pode encontrar instruções para instalar um aplicativo com o Create React App em Como configurar um projeto React com o Create React App.

• Você usará a sintaxe JSX. Aprenda mais sobre ela em nosso tutorial Como Criar Elementos com o JSX.

• Você também precisará de um conhecimento básico do JavaScript, que você pode encontrar em Como programar em JavaScript, além de com um conhecimento básico de HTML e CSS. Um boa fonte de recursos para HTML e CSS é a Rede de desenvolvedor Mozilla.

Passo 1 — Configurando o Projeto React

Neste passo, você criará uma base para seu projeto utilizando Create React App. Você também modificará o projeto padrão para criar seu projeto base mapeando uma lista de emojis e adicionará uma pequena quantidade de estilo.

Primeiro, crie um novo projeto. Abra um terminal e, em seguida, execute o seguinte comando:

npx create-react-app tutorial-03-component

Quando terminar, vá para o diretório do projeto:

cd tutorial-03-component

Abra o código App.js em seu editor de texto:

nano src/App.js

Em seguida, pegue o template de código criado pelo Create React App e substitua o conteúdo com um novo código React que exibe uma lista de emojis:

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);
const emojis = [
  {
    emoji: '😀',
    name: "test grinning face"
  },
  {
    emoji: '🎉',
    name: "party popper"
  },
  {
    emoji: '💃',
    name: "woman dancing"
  }
];

function App() {
  const greeting = "greeting";
  const displayAction = false;
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      {displayAction && <p>I am writing JSX</p>}
      <ul>
        {
          emojis.map(emoji => (
            <li key={emoji.name}>
              <button
                onClick={displayEmojiName}
              >
                <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
              </button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default App;

Este código utiliza a sintaxe JSX para fazer um map() por meio da array de emojis e os lista como itens de lista <li>. Ele também anexa eventos onClick para exibir dados de emoji no navegador. Para explorar o código em mais detalhes, verifique Como Criar Elementos do React com o JSX, que contém uma explicação detalhada do JSX.

Salve e feche o arquivo. Agora, você pode excluir o arquivo logo.svg, uma vez que ele fazia parte do template e você não está mais fazendo referência a ele.

rm src/logo.svg

Agora, atualize o estilo. Abra o src/App.css:

nano src/App.css

Substitua o conteúdo com o seguinte CSS para centralizar os elementos e ajustar a fonte:

[label tutorial-03-component/src/App.css] .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  font-size: 2em;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

ul {
  display: flex;
  padding: 0;
}

li {
  margin: 0 20px;
  list-style: none;
  padding: 0;
}

Isso utiliza flex para centralizar os elementos principais <h1> e de lista. Ele também remove estilos de botão predefinidos e estilos <li> para que a linha dos emojis fique alinhada. Mais detalhes podem ser encontrados em Como Criar Elementos React com o JSX.

Salve e saia do arquivo.

Abra outra janela do terminal no root do seu projeto. Inicie o projeto com o seguinte comando:

npm start

Após o comando ser executado, você verá o projeto em execução em seu navegador web em http://localhost:3000.

Deixe isso em execução o tempo todo que você trabalhar em seu projeto. Toda vez que você salvar o projeto, o navegador irá atualizar automaticamente e exibir o código mais recente.

Você verá sua página de projeto com Hello, World e os três emojis que você listou em seu arquivo App.js:

Agora que você configurou seu código, junte os componentes no React.

Passo 2 — Criando um Componente Independente com Classes do React

Agora que você tem seu projeto em execução, comece seu componente personalizado. Neste passo, você criará um componente independente do React estendendo a classe base Component do React. Você criará uma nova classe, adicionará métodos e usará a função render para exibir dados.

Os componentes do React são elementos autocontidos que você reutiliza por toda uma página. Ao criar pequenos trechos de código focados, você move e reutiliza esses trechos à medida que seu aplicativo cresce. O principal aqui é que eles são autocontidos e focados, permitindo que você separe o código em partes lógicas. Na verdade, você já está trabalhando com componentes logicamente separados: o arquivo App.js é um componente funcional, um dos quais você verá mais no Passo 3.

Existem dois tipos de componente personalizados: baseado em classe e funcional. O primeiro componente que você irá criar é um componente baseado em classe. Você criará um novo componente chamado Instructions que explica as instruções para o visualizador de emoji.

Para começar, crie um novo arquivo. Por convenção, os arquivos de componente são maiúsculos:

touch src/Instructions.js

Em seguida abra o arquivo no seu editor de texto:

nano src/Instructions.js

Primeiro, importe o React e a classe Component e exporte Instructions com as seguintes linhas:

import React, { Component } from 'react';

export default class Instructions extends Component {}

A importação do React converterá o JSX. O Component é uma classe base que você estenderá para criar seu componente. Para estender isso, você criou uma classe que tem o nome do seu componente Instructions e estendeu o Component base com a linha export Você também está exportando esta classe como padrão com as palavras-chave export default no início da declaração de classe.

O nome da classe deve ser em maiúsculas e deve corresponder ao nome do arquivo. Isso é importante ao utilizar ferramentas de debugging, que exibirão o nome do componente. Se o nome corresponder à estrutura do arquivo, será mais fácil localizar o componente relevante.

A classe base Component tem vários métodos que você utiliza em sua classe personalizada. O método mais importante e o único que você utilizará neste tutorial, é o método render(). O método render() retorna o código JSX que você deseja exibir no navegador.

Para começar, adicione uma pequena explicação do app em uma tag <p>:

import React, { Component } from 'react';

export class Instructions extends Component {

  render() {
    return(
      <p>Click on an emoji to view the emoji short name.</p>
    )
  }

}

Salve e feche o arquivo. Neste ponto, ainda não há alterações em seu navegador. Isso acontece porque você ainda não usou o novo componente. Para utilizar o componente, você terá que adicioná-lo em outro componente que se conecta ao componente root. Neste projeto, o <App> é o componente root no index.js. Para fazer com que ela apareça no aplicativo, você precisará adicioná-la ao componente <App>.

Abra o src/App.js em um editor de texto:

nano src/App.js

Primeiro, você precisará importar o componente:

import React from 'react';

import Instructions from './Instructions';

import './App.css';

...

export default App;

Como ela é a importação padrão, você poderia importar para qualquer nome que quisesse. É melhor manter os nomes consistentes para legibilidade — a importação deve corresponder ao nome do componente, que deve corresponder ao nome do arquivo — mas a única regra fixa é que o componente deve começar com uma letra maiúscula. É assim que o React sabe que ele é um componente do React.

Agora que você importou o componente, adicione-o ao resto do seu código como se ele fosse um elemento HTML personalizado:

import React from 'react';

import Instructions from './Instructions.js'

...
function App() {
  const greeting = "greeting";
  const displayAction = false;
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      {displayAction && <p>I am writing JSX</p>}
      <Instructions />
      <ul>
        {
          emojis.map(emoji => (
            <li key={emoji.name}>
              <button
                onClick={displayEmojiName}
              >
                <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
              </button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default App;

Neste código, você envolveu o componente com os sinais de maior que e menor que. Como este componente não tem filhos, ele pode ser autoencerrado terminando com />.

Salve o arquivo. Quando você fizer isso, a página irá atualizar e você verá o novo componente.

Agora que você tem algum texto, você pode adicionar uma imagem. Faça o download de uma imagem emoji do wikimedia e salve-a no diretório src como emoji.svg com o seguinte comando:

curl -o src/emoji.svg https://upload.wikimedia.org/wikipedia/commons/3/33/Twemoji_1f602.svg

O curl faz a solicitação para a URL, e a sinalização -o permite que você salve o arquivo como src/emoji.svg.

Em seguida abra seu arquivo de componente:

nano src/Instructions.js

Importe o emoji e adicione-o ao seu componente personalizado com um link dinâmico:

import React, { Component } from 'react';
import emoji from './emoji.svg'

export default class Instructions extends Component {

  render() {
    return(
      <>
        <img alt="laughing crying emoji" src={emoji} />
        <p>Click on an emoji to view the emoji short name.</p>
      </>
    )
  }
}

Observe que você precisa incluir a extensão de arquivos .svg quando importar. Quando fizer isso, você importará um caminho dinâmico que é criado pelo webpack quando o código for compilado. Para obter mais informações, consulte Como Configurar um Projeto React com Create React App.

Você também precisa envolver as tags <img> e <p> com tags vazias para garantir que você está retornando um único elemento.

Salve o arquivo. Quando você recarregar, a imagem será muito grande em comparação com o resto do conteúdo:

Para tornar a imagem menor, você precisará adicionar algum CSS e um className ao seu componente.

Primeiro, em Instructions.js, mude as tags vazias para um div e dê a ele um className de instructions:

import React, { Component } from 'react';
import emoji from './emoji.svg'

export default class Instructions extends Component {

  render() {
    return(
      <div className="instructions">
        <img alt="laughing crying emoji" src={emoji} />
        <p>Click on an emoji to view the emoji short name.</p>
      </div>
    )
  }
}

Salve e feche o arquivo. Em seguida abra App.css:

nano src/App.css

Crie regras para o seletor de classe .instructions:

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

...

.instructions {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Quando você adiciona um display de estilo flex, você faz com que o img e o p sejam centralizados com o flexbox. Você alterou a direção para que tudo fique alinhado verticalmente com o flex-direction: column;. A linha align-items: center; irá centralizar os elementos na tela.

Agora que seus elementos estão alinhados, você precisa alterar o tamanho da imagem. Dê à img dentro do div uma largura e altura de 100 px.

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

...

.instructions {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.instructions img {
    width: 100px;
    height: 100px;
}

Salve e feche o arquivo. O navegador recarregará e você verá que a imagem está muito menor:

Neste ponto, você criou um componente personalizado independente e reutilizável. Para ver como ele é reutilizável, adicione uma segunda instância ao App.js.

Abra App.js:

nano src/App.js

Em App.js, adicione uma segunda instância do componente:

import React from 'react';

import Instructions from './Instructions.js'

...

function App() {
  const greeting = "greeting";
  const displayAction = false;
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      {displayAction && <p>I am writing JSX</p>}
      <Instructions />
      <Instructions />
      <ul>
        {
          emojis.map(emoji => (
            <li key={emoji.name}>
              <button
                onClick={displayEmojiName}
              >
                <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
              </button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default App;

Salve o arquivo. Quando o navegador recarregar, você verá o componente duas vezes.

Neste caso, você não precisa de duas instâncias de Instructions, mas você pode ver que o componente é reutilizado de maneira eficiente. Quando você criar botões personalizados ou tabelas, você provavelmente irá usá-los várias vezes em uma página, tornando-os perfeitos para componentes personalizados.

Por ora, exclua a tag extra de imagem. Em seu editor de texto, exclua o segundo <Instructions /> e salve o arquivo:

import React from 'react';

import Instructions from './Instructions.js'

...

function App() {
  const greeting = "greeting";
  const displayAction = false;
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      {displayAction && <p>I am writing JSX</p>}
      <Instructions />
      <ul>
        {
          emojis.map(emoji => (
            <li key={emoji.name}>
              <button
                onClick={displayEmojiName}
              >
                <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
              </button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default App;

Agora, você tem um componente reutilizável e independente que você pode adicionar a um componente pai várias vezes. A estrutura que você tem agora funciona para um pequeno número de componentes, mas há um pequeno problema. Todos os arquivos estão misturados. A imagem para <Instructions> está no mesmo diretório que os ativos para <App>. Você também está misturando o código CSS para <App> com o CSS para <Instructions>.

No próximo passo, você criará uma estrutura de arquivos que dará independência a cada componente, agrupando suas funcionalidades, estilos e dependências. Desse modo, você pode movê-los à medida que precisar.

Passo 3 — Criando uma Estrutura de Arquivos para Leitura

Neste passo, você criará uma estrutura de arquivos para organizar os componentes e recursos, como imagens, CSS e outros arquivos JavaScript. Você agrupará o código por componente, não por tipo de recurso. Em outras palavras, você não terá um diretório separado para CSS, imagens e JavaScript. Em vez disso, você terá um diretório separado para cada componente que conterá o CSS, JavaScript e imagens relevantes. Em ambos os casos, você está separando preocupações.

Como você tem um componente independente, você precisa de uma estrutura de arquivos que agrupe o código relevante. No momento, tudo está no mesmo diretório. Liste os itens em seu diretório src:

ls src/

A saída mostrará que as coisas estão ficando muito confusas:

Output
App.css                 Instructions.js         index.js
App.js                  emoji.svg               serviceWorker.js
App.test.js             index.css               setupTests.js

Você tem um código para o componente <App> (App.css, App.js e App.test.js) ao lado do seu componente root (index.css e index.js) e seu componente personalizado Instructions.js.

O React é intencionalmente agnóstico sobre a estrutura de arquivos. Ele não recomenda uma estrutura em particular, e o projeto pode funcionar com uma variedade de hierarquias diferentes.de arquivos. Mas recomendamos adicionar alguma ordem para evitar sobrecarga de seu diretório root com componentes, arquivos CSS e imagens que será difícil de navegar. Além disso, a nomenclatura explícita pode facilitar a visualização de quais partes do seu projeto estão relacionadas. Por exemplo, um arquivo de imagem chamado Logo.svg pode não fazer parte claramente de um componente chamado Header.js.

Uma das estruturas mais simples é criar um diretório components com um diretório separado para cada componente. Isso permitirá que você agrupe seus componentes separadamente do seu código de configuração, como serviceWorker, ao mesmo tempo em que agrupa os recursos com os componentes.

Criando um Diretório Components

Para começar, crie um diretório chamado components:

mkdir src/components

Em seguida, mova os seguintes componentes e código para o diretório: App.css, App.js, App.test.js, Instructions.js, e emoji.svg:

mv src/App.* src/components/
mv src/Instructions.js src/components/
mv src/emoji.svg src/components/

Aqui, você está usando um curinga (*) para selecionar todos os arquivos que começam com App..

Após mover o código, você verá um erro em seu terminal executando o npm start.

Output
Failed to compile.

./src/App.js
Error: ENOENT: no such file or directory, open 'your_file_path/tutorial-03-component/src/App.js'

Lembre-se de que todo o código é importado utilizando caminhos relativos. Se você alterar o caminho para alguns arquivos, você precisará atualizar o código.

Para fazer isso, abra index.js.

nano src/index.js

Em seguida, mude o caminho da importação do App para importar do diretório component/.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';

...

serviceWorker.unregister();

Salve e feche o arquivo. Seu script detectará as alterações e o erro desaparecerá.

Agora, você tem componentes em um diretório separado. À medida que seus aplicativos se tornam mais complexos, você pode ter diretórios para serviços de API, data stores e funções de utilitários. Separar o código do componente é o primeiro passo, mas você ainda tem o código CSS para Instructions misturado no arquivo App.css. Para criar esta separação lógica, você irá primeiramente mover os componentes para diretórios separados.

Movendo os Componentes para Diretórios Individuais

Primeiro, crie um diretório especificamente para o componente <App>:

mkdir src/components/App

Em seguida, mova os arquivos relacionados para o novo diretório:

mv src/components/App.* src/components/App

Quando você fizer isso, você receberá um erro parecido com o da última seção:

Output
Failed to compile.

./src/components/App.js
Error: ENOENT: no such file or directory, open 'your_file_path/tutorial-03-component/src/components/App.js'

Neste caso, você precisará atualizar duas coisas. Primeiro, será necessário atualizar o caminho no index.js.

Abra o arquivo index.js:

nano src/index.js

Em seguida, atualize o caminho de importação do App para apontar para o componente App no diretório App.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App/App';
import * as serviceWorker from './serviceWorker';

...

serviceWorker.unregister();

Salve e feche o arquivo. O aplicativo ainda não será executado. Você verá um erro como este:

Output
Failed to compile.

./src/components/App/App.js

Module not found: Can't resolve './Instructions.js' in 'your_file_path/tutorial-03-component/src/components/App'

Como <Instructions> não está no mesmo nível de diretório que o componente <App>, você vai precisar alterar o caminho de importação. Antes disso, crie um diretório para Instructions. Crie um diretório chamado Instructions no diretório src/componentes:

mkdir src/components/Instructions

Em seguida, mova Instructions.js e emoji.svg para este diretório:

mv src/components/Instructions.js src/components/Instructions
mv src/components/emoji.svg src/components/Instructions

Agora que o diretório de componente Instructions foi criado, conclua a atualização dos caminhos de arquivos para conectar o componente ao aplicativo.

Atualizando Caminhos de Importação

Agora que os componentes estão em diretórios individuais, ajuste o caminho de importação no App.js.

Abra App.js:

nano src/components/App/App.js

Como o caminho é relativo, você precisará mover um diretório, o src/componentes. Mova então o diretório Instructions para Instructions.js, mas, como este é um arquivo JavaScript, você não precisa da importação final.

import React from 'react';

import Instructions from '../Instructions/Instructions.js';

import './App.css';

...

export default App;

Salve e feche o arquivo. Agora que suas importações estão todas usando o caminho correto, o navegador irá atualizar e exibir a aplicação.

menor

Separando o Código em Arquivos Compartilhados

Agora, cada componente tem seu próprio diretório, mas nem tudo é totalmente independente. O último passo é extrair o CSS para Instructions para um arquivo separado.

Primeiro, crie um arquivo CSS em src/componentes/Instructions:

touch src/components/Instructions/Instructions.css

Em seguida, abra o arquivo CSS em seu editor de texto:

nano src/components/Instructions/Instructions.css

Adicione no instructions o CSS que você criou em uma seção anterior:

  .instructions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.instructions img {
  width: 100px;
  height: 100px;
}

Salve e feche o arquivo. Em seguida, remova o CSS instructions do src/componentes/App/App.css.

nano src/components/App/App.css

Remova as linhas sobre .instructions. O arquivo final ficará parecido com este:

[label tutorial-03-component/src/components/App/App.css] .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  font-size: 2em;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

ul {
  display: flex;
  padding: 0;
}

li {
  margin: 0 20px;
  list-style: none;
  padding: 0;
}

Salve e feche o arquivo. Por fim, importe o CSS em Instructions.js:

nano src/components/Instructions/Instructions.js

Importe o CSS usando o caminho relativo:

import React, { Component } from 'react';
import './Instructions.css';
import emoji from './emoji.svg'

export default class Instructions extends Component {

  render() {
    return(
      <div className="instructions">
        <img alt="laughing crying emoji" src={emoji} />
        <p>Click on an emoji to view the emoji short name.</p>
      </div>
    )
  }
}

Salve e feche o arquivo. A janela do seu navegador terá a aparência de antes,exceto que agora todos os recursos de arquivos estão agrupados no mesmo diretório.

menor

Agora, dê uma última olhada na estrutura. Primeiro, o diretório src/:

ls src

Você tem o componente root index.js e o CSS correspondente index.css ao lado do diretório components/ e de arquivos utilitários como o serviceWorker.js e o setupTests.js:

Output
components              serviceWorker.js
index.css               setupTests.js
index.js

Em seguida, dê uma olhada dentro de components:

ls src/components

Você verá um diretório para cada componente:

Output
App             Instructions

Se você olhar dentro de cada componente, você verá o código do componente, o CSS, o teste e arquivos de imagem, se eles existirem.

ls src/components/App

Output
App.css         App.js          App.test.js

ls src/components/Instructions

Output
Instructions.css        Instructions.js         emoji.svg

Neste ponto, você criou uma estrutura sólida para seu projeto. Você moveu muito código, mas agora que possui uma estrutura, ela será escalada com mais facilidade.

Esta não é a única maneira de compor a sua estrutura. Algumas estruturas de arquivos podem aproveitar o code splitting especificando um diretório que será dividido em pacotes diferentes. Outras estruturas de arquivos dividem por rota e usam um diretório comum para componentes que são usados através de rotas.

Por agora, mantenha-se com uma abordagem menos complexa. Se houver a necessidade de outra estrutura, sempre será mais fácil mover do simples para o complexo. Começar com uma estrutura complexa antes de precisar dela tornará a refatoração mais difícil.

Agora que você criou e organizou um componente baseado em classe, no próximo passo você criará um componente funcional.

Passo 4 — Construindo um Componente Funcional

Neste passo, você criará um componente funcional. Os componentes funcionais são os componentes mais comuns no código do React contemporâneo. Estes componentes tendem a ser mais curtos e, ao contrário dos componentes baseados em classe, eles podem utilizar os React hooks, uma nova forma de gerenciamento de estado e de eventos.

Um componente funcional é uma função JavaScript que retorna algum JSX. Ele não precisa estender nada e não há métodos especiais para memorizar.

Para refatorar <Instructions> como um componente funcional, você precisa alterar a classe para uma função e remover o método render para que você fique apenas com a instrução return

Para fazer isso, primeiro abra Instructions.js em um editor de texto.

nano src/components/Instructions/Instructions.js

Altere a declaração class para uma declaração function:

import React, { Component } from 'react';
import './Instructions.css';
import emoji from './emoji.svg'

export default function Instructions() {
  render() {
    return(
      <div className="instructions">
        <img alt="laughing crying emoji" src={emoji} />
        <p>Click on an emoji to view the emoji short name.</p>
      </div>
    )
  }
}

Em seguida, remova a importação de { Component }:

import React from 'react';
import './Instructions.css';
import emoji from './emoji.svg'

export default function Instructions() {

  render() {
    return(
      <div className="instructions">
        <img alt="laughing crying emoji" src={emoji} />
        <p>Click on an emoji to view the emoji short name.</p>
      </div>
    )
  }
}

Por fim, remova o método render(). Neste ponto, você está retornando apenas JSX.

import React from 'react';
import './Instructions.css';
import emoji from './emoji.svg'

export default function Instructions() {
  return(
    <div className="instructions">
        <img alt="laughing crying emoji" src={emoji} />
        <p>Click on an emoji to view the emoji short name.</p>
    </div>
  )
}

Salve o arquivo. O navegador irá atualizar e você verá sua página como ela era antes.

mojis

Você também poderia reescrever a função como uma arrow function usando o return implícito. A principal diferença é que você perde o corpo da função. Você precisará primeiramente atribuir a função a uma variável e, em seguida, exportá-la:

import React from 'react';
import './Instructions.css';
import emoji from './emoji.svg'

const Instructions = () => (
  <div className="instructions">
    <img alt="laughing crying emoji" src={emoji} />
    <p>Click on an emoji to view the emoji short name.</p>
  </div>
)

export default Instructions;

Os componentes funcionais simples e os componentes baseados em classe são muito semelhantes. Quando você tem um componente simples que não armazena estado, é melhor utilizar um componente funcional. A real diferença entre os dois é como você armazena um estado de um componente e utiliza as propriedades. Os componentes baseados em classe usam métodos e propriedades para definir o estado e tendem a ser um pouco mais longos. Os componentes funcionais utilizam hooks para armazenar estado ou gerenciar alterações e tendem a ser um pouco mais curtos.

Conclusão

Agora, você tem um pequeno aplicativo com partes independentes. Você criou dois tipos principais de componentes: funcional e de classe. Você separou partes dos componentes em diretórios para que você possa manter partes semelhantes do código agrupadas. Você também importou e reutilizou os componentes.

Com um entendimento de componentes, você pode começar a analisar suas aplicações como peças que você pode desmontar e remontar novamente. Projetos se tornam modulares e intercambiáveis. A capacidade de ver aplicações inteiras como uma série de componentes é um passo importante ao pensar no React. Se você quiser analisar mais tutoriais do React, dê uma olhada em nossa página sobre o React ou retorne à página da série Como Programar em React.js.