Como configurar um projeto do React com o Create React App

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

Introdução

O React é um framework popular do JavaScript para a criação de aplicativos front-end. Originalmente criado pelo Facebook, ganhou popularidade por permitir que os desenvolvedores criem aplicativos rápidos usando um paradigma de programação intuitivo que vincula o JavaScript com uma sintaxe parecida com o HTML chamada JSX.

Começar um novo projeto do React costumava ser um processo complicado com vários passos. Envolvia a configuração de um sistema de compilação, um transpilador de códigos para converter sintaxe moderna em código legível para todos os navegadores e uma estrutura de diretório base. Agora, porém, o Create React App inclui todos os pacotes do JavaScript que você precisa para executar um projeto do React, incluindo o de transpiling (transpilação) de código, linting básica (Análise para sinalizar erros na programação do código fonte, bugs etc.), teste e compilação. Ele também inclui um servidor com hot reloading (recarregamento dinâmico), que atualizará sua página enquanto faz as alterações no código. Por fim, ele criará uma estrutura para os seus diretórios e componentes, para que você possa entrar e começar a programar em apenas alguns minutos.

Em outras palavras, você não precisa preocupar-se quanto a configurar um sistema de compilação como o Webpack. Você não precisa configurar o Babel para transpilar seu código para que possa ser utilizado em diversos navegadores. Você não precisa se preocupar com a maioria dos sistemas complicados de desenvolvimento de front-end moderno. Você pode começar a escrever o código do React com uma preparação mínima.

Ao final deste tutorial, terá um aplicativo do React em funcionamento que você pode usar como base para quaisquer aplicativos futuros. Você fará suas primeiras alterações no código do React, atualizará estilos e executará uma compilação para criar uma versão completamente reduzida do seu aplicativo. Você também usará um servidor com o recarregamento dinâmico para gerar um feedback instantâneo e explorará em profundidade as partes de um projeto do React. Por fim, começará a escrever componentes personalizados e a criar uma estrutura que pode crescer e se adaptar ao seu projeto.

Pré-requisitos

Para seguir este tutorial, você precisará do seguinte:

• A versão 10.16.0 do Node.js instalada em seu computador. 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 e usando um PPA, do artigo sobre Como instalar o Node.js no Ubuntu 18.04.

• Também será útil ter uma compreensão básica do JavaScript. Para tanto, consulte a série sobre Como programar em JavaScript, bem como os fundamentos básicos sobre HTML e CSS.

Passo 1 — Criando um projeto com o Create React App

Neste passo, você criará um aplicativo usando o gerenciador de pacotes npm para executar um script remoto. O script copiará os arquivos necessários para um novo diretório e instalará todas as dependências.

Quando você instalou o Node, também instalou um aplicativo gerenciador de pacotes chamado npm. O npm instalará os pacotes do JavaScript em seu projeto e acompanhará os detalhes do projeto. Se quiser aprender mais sobre o npm, consulte nosso tutorial Como usar os módulos do Node.js com o npm e o package.json.

O npm também inclui uma ferramenta chamada npx, que executará pacotes executáveis. Isso significa que você executará o código do Create React App sem baixar primeiro o projeto.

O pacote executável executará a instalação do create-react-app no diretório que você especificar. Ele começará criando um projeto em um diretório, que, neste tutorial, será chamado de digital-ocean-tutorial. Novamente, esse diretório não precisa ser criado com antecedência; o pacote executável o criará para você. O script também executará o npm install dentro do diretório do projeto, que baixará quaisquer dependências adicionais.

Para instalar o projeto base, execute o comando a seguir:

npx create-react-app digital-ocean-tutorial

Esse comando iniciará um processo de compilação que baixará o código base com uma série de dependências.

Quando o script terminar, você verá uma mensagem de sucesso que diz:

Output
...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-tutorial
  npm start

Happy hacking!

your_file_path será seu caminho atual. Se você for um usuário do macOS, o caminho ficará parecido com /Users/your_username; se estiver em um servidor Ubuntu, ele ficará parecido com /home/your_username.

Você verá também uma lista de comandos do npm que permitirá que você execute, compile, inicie e teste seu aplicativo. Você explorará mais esses comandos na próxima seção.

Agora, seu projeto está configurado em um novo diretório. Vá para o novo diretório:

cd digital-ocean-tutorial

Você agora está dentro da raiz do seu projeto. Até aqui, você criou um projeto e adicionou todas as dependências. Mas você não realizou nenhuma ação para executar o projeto. Na próxima seção, você executará scripts personalizados para compilar e testar o projeto.

Passo 2 — Usando o react-scripts

Neste passo, você aprenderá sobre os diferentes react-scripts que vem instalados com o repositório. Primeiro, execute o script test para executar o código de teste. Em seguida, execute o script build para criar uma versão reduzida. Por fim, você verá como o script eject pode dar a você o controle total sobre a personalização.

Agora que você está dentro do diretório do projeto, explore-o. Você pode abrir o diretório inteiro em seu editor de texto ou, se estiver no terminal, pode remover arquivos com o seguinte comando:

ls -a

O sinalizador -a garante que o resultado também inclua arquivos ocultos.

De qualquer maneira, você verá uma estrutura como esta:

Output
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

Vamos explicá-los um a um:

• O node_modules/ contém todas as bibliotecas externas do JavaScript usadas pelo aplicativo. Você raramente precisará abri-lo.

• O diretório public/ contém alguns arquivos base de HTML, JSON e imagem. Eles representam as raízes do seu projeto. Você terá a oportunidade de explorá-las mais no Passo 4.

• O diretório src/ contém o código JavaScript React para o seu projeto. A maior parte do trabalho que você fizer será naquele diretório. Você explorará esse diretório detalhadamente no Passo 5.

• O arquivo .gitignore possui alguns diretórios e arquivos padrão que o git — seu controle de código-fonte — irá ignorar, tal como o diretório node_modules. Os itens ignorados tendem a ser diretórios maiores ou arquivos de registro que você não precisaria no controle de código fonte. Ele também incluirá alguns diretórios que você criará com alguns dos scripts do React.

• O README.md é um arquivo markdown que contém muitas informações úteis sobre o Create React App, tal como um resumo de comandos e links para configurações avançadas. Por enquanto, é melhor deixar o arquivo README.md intacto. À medida que seu projeto avança, você substituirá as informações padrão por informações mais detalhadas sobre o seu projeto.

Os dois últimos arquivos são usados pelo seu gerenciador de pacotes. Quando executou o comando npx inicial, você criou o projeto base, mas também instalou as dependências adicionais. Quando instalou as dependências, você criou um arquivo package-lock.json. Esse arquivo é usado pelo npm para garantir que os pacotes correspondam às versões exatas. Dessa maneira, se outra pessoa instalar o seu projeto, você pode garantir que elas terão as mesmas dependências. Como este arquivo é criado automaticamente, você raramente irá editá-lo diretamente.

O último arquivo é um package.json. Ele contém metadados sobre o seu projeto, como o título, o número de versão e as dependências. Ele também contém scripts que você pode utilizar para executar seu projeto.

Abra o arquivo package.json no seu editor de texto favorito:

nano package.json

Ao abrir o arquivo, você verá um objeto JSON que contém todos os metadados. Se analisar o objeto scripts, encontrará quatro scripts diferentes: start, build, test e eject.

Esses scripts estão listados por ordem de importância. O primeiro script inicia o ambiente de desenvolvimento local; você verá isso no próximo passo. O segundo script compilará seu projeto. Você explorará isso detalhadamente no Passo 4, mas vale a pena executá-lo agora para ver o que acontece.

O script build

Para executar qualquer script do npm, você precisa apenas digitar npm run script_name em seu terminal. Existem alguns scripts especiais onde você pode omitir a parte run do comando, mas é sempre possível executar o comando completo. Para executar o script build, digite em seu terminal o seguinte:

npm run build

Você verá imediatamente a seguinte mensagem:

Output
> digital-ocean-tutorial@0.1.0 build your_file_path/digital-ocean-tutorial
> react-scripts build

Creating an optimized production build...
...

Isso informa que o Create React App está compilando seu código em um pacote utilizável.

Quando terminar, você verá o seguinte resultado:

Output
...
Compiled successfully.

File sizes after gzip:

  39.85 KB  build/static/js/9999.chunk.js
  780 B      build/static/js/runtime-main.99999.js
  616 B     build/static/js/main.9999.chunk.js
  556 B     build/static/css/main.9999.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

Liste o conteúdo do projeto e você verá alguns novos diretórios:

ls -a

Output
build/
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

Você tem agora um diretório build. Caso tenha aberto o arquivo .gitignore, você pode ter notado que o diretório build é ignorado pelo git. Isso acontece porque o diretório build é apenas uma versão reduzida e otimizada dos outros arquivos. Não é necessário usar o controle de versão, pois você sempre pode executar o comando build. Você explorará o resultado mais tarde; por enquanto, é hora de passar para o script test.

O script test

O script test é um daqueles scripts especiais que não exige a palavra-chave run, mas funciona mesmo se for incluída. Esse script iniciará um executor de teste chamado Jest. O executor de teste examina o seu projeto para obter arquivos com uma extensão .spec.js ou .test.js. Em seguida, executa esses arquivos.

Para executar o script test, digite o comando a seguir:

npm test

Após executar esse script, seu terminal terá o resultado do conjunto de testes e o prompt do terminal desaparecerá. O resultado ficará parecido com isto:

Output
 PASS  src/App.test.js
  ✓ renders learn react link (67ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.204s
Ran all test suites.

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.

Há algumas coisas a se notar aqui. Primeiramente, como observado anteriormente, ele detecta automaticamente todos os arquivos com extensões de teste, incluindo .test.js e .spec.js. Neste caso, existe apenas um conjunto de testes — ou seja, apenas um arquivo com uma extensão .test.js — e esse conjunto de testes possui apenas um teste. O Jest consegue detectar os testes em sua hierarquia de código. Assim, você pode agrupar os testes em um diretório e o Jest os encontrará.

Em segundo lugar, o Jest não executa seu conjunto de testes uma vez e finaliza em seguida. Em vez disso, ele continua em funcionamento no terminal. Caso faça alterações no código-fonte, ele executará novamente os testes.

Você também pode limitar quais testes executar, usando uma das opções do teclado. Caso digite o, por exemplo, você executará apenas os testes em arquivos que sofreram alterações. Isso pode economizar muito do seu tempo, à medida que seus conjuntos de testes crescem.

Por fim, você pode sair do executor de teste digitando q. Faça isso agora para recuperar o acesso ao seu prompt de comando.

O script eject

O script final é o npm eject. Esse script copia suas dependências e arquivos de configuração para o seu projeto. Isso fornece a você controle total sobre o seu código, porém ejetando o projeto da cadeia de ferramentas integrada do Create React App. Você não executará isso agora, pois, assim que executar esse script, não poderá anular essa ação. Desta forma, perderá todas as atualizações futuras do Create React App.

A vantagem do Create React App é que você não precisa preocupar-se com uma parte significativa da configuração. O desenvolvimento de aplicativos modernos do JavaScript exige muitas ferramentas de sistemas de compilação, como o Webpack a ferramentas de compilação, como o Babel. O Create React App lida com toda a configuração para você. Assim, ejetar significa lidar com essa complexidade por conta própria.

A desvantagem do Create React App é que você não conseguirá personalizar o projeto por completo. Para a maioria dos projetos, isso não é um problema. No entanto, se quiser controlar todos os aspectos do processo de compilação, será necessário ejetar o código. Porém, como mencionado anteriormente, assim que ejetar o código, você não conseguirá atualizar para as novas versões do Create React App. Além disso, você terá que adicionar manualmente eventuais melhorias, sem ajuda.

Até agora, você executou scripts para compilar e testar seu código. No próximo passo, você iniciará o projeto em um servidor ativo.

Passo 3 — Inicializando o servidor

Neste passo, você inicializará um servidor local e executará o projeto em seu navegador.

Você inicia seu projeto com outro script do npm. Assim como o npm test, esse script não precisa do comando run. Ao executar o script, você iniciará um servidor local, executará o código do projeto, iniciará um observador que detecta alterações no código e abrirá o projeto em um navegador Web.

Inicie o projeto, digitando o seguinte comando na raiz do seu projeto. Para este tutorial, a raiz do seu projeto é o diretório digital-ocean-tutorial. Certifique-se de abrir o diretório em uma guia ou terminal separado, pois esse script continuará em execução pelo tempo que você permitir:

npm start

Antes do servidor inicializar, por alguns momentos você verá o texto do espaço reservado, gerando este resultado:

Output
Compiled successfully!

You can now view digital-ocean-tutorial in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Caso esteja executando o script localmente, ele abrirá o projeto na janela do seu navegador e mudará o foco do terminal para o navegador.

Caso isso não aconteça, você pode visitar http://localhost:3000/ para ver o site em ação. Caso tenha outro servidor em executando na porta 3000, tudo bem. O Create React App detectará a próxima porta disponível e executará o servidor com ela. Em outras palavras, se você já tiver um projeto em execução na porta 3000, esse novo projeto será iniciado na porta 3001.

Se estiver executando isso a partir de um servidor remoto, você ainda conseguirá ver seu site sem nenhuma configuração adicional. O endereço será http://your_server_ip:3000. Se tiver um firewall configurado, será necessário abrir a porta em seu servidor remoto.

No navegador, você verá o seguinte projeto modelo do React:

Enquanto o script estiver em execução, você terá um servidor local ativo. Para parar o script, feche a janela ou guia do terminal, ou digite CTRL+C ou ⌘-+c na janela ou guia do terminal onde seu script estiver em execução.

Até este ponto, você iniciou o servidor e está executando seu primeiro código do React. Mas antes de fazer alterações no código JavaScript do React, você verá primeiro como o React é renderizado na página.

Passo 4 — Modificando a página inicial

Neste passo, você modificará o código no diretório public/. O diretório public contém sua página HTML base. Essa é a página que servirá como raiz para o seu projeto. Você raramente editará esse diretório no futuro, mas ele é a base a partir da qual o projeto inicializa e é uma parte crucial de um projeto React.

Se cancelou seu servidor, prossiga e reinicie-o com o npm start. Depois disso, abra o public/ em seu editor de texto favorito em uma nova janela do terminal:

nano public/

De maneira alternativa, você pode listar os arquivos com o comando ls:

ls public/

Você verá uma lista de arquivos como esta:

Output
favicon.ico
logo192.png
manifest.json
index.html
logo512.png
robots.txt

O favicon.ico, o log192.png e o logo512.png são ícones que um usuário veria em sua guia do navegador, ou em seu telefone. O navegador selecionará os ícones do tamanho adequado. Eventualmente, você vai querer substituí-los por ícones que sejam mais adequados ao seu projeto. Por enquanto, você pode deixá-los como estão.

O manifest.json é um conjunto estruturado de metadados que descreve seu projeto. Entre outras coisas, ele lista qual ícone será usado para as diferentes opções de tamanho.

O arquivo robots.txt contém informações para os rastreadores Web. Ele informa aos rastreadores quais páginas eles têm ou não permissão para indexar. Você não precisará alterar nenhum dos arquivos, a menos que haja uma razão convincente para fazê-lo. Por exemplo, se quisesse dar a alguns usuários um URL para o conteúdo especial que você não quer que seja facilmente acessado, você poderá adicioná-la ao robots.txt. Dessa forma, ele ainda estará publicamente disponível, mas não indexado por mecanismos de pesquisa.

O arquivo index.html é a raiz do seu aplicativo. Esse é o arquivo que o servidor lê e é o arquivo que seu navegador exibirá. Abra-o em seu editor de texto e dê uma olhada.

Se estiver trabalhando na linha de comando, você pode abri-lo com o seguinte comando:

nano public/index.html

Aqui está o que você verá:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

O arquivo é bem curto. Não há imagens ou palavras em <body>. Isso acontece porque o React compila a estrutura HTML inteira por conta própria e a injeta com o JavaScript. Mas o React precisa saber onde injetar o código e essa é a função do index.html.

Em seu editor de texto, mude a tag <title> (título) de React App para Sandbox:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    ...
    <title>Sandbox</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Salve e saia do seu editor de texto. Verifique seu navegador. O título é o nome localizado na guia do navegador. Ele será atualizado automaticamente. Se não for, atualize a página e observe a mudança.

Agora, volte para seu editor de texto. Todo projeto do React se inicia a partir de um elemento raiz. Pode haver vários elementos raiz em uma página, mas deve haver pelo menos um. É assim que o React sabe onde colocar o código HTML gerado. Encontre o elemento <div id="root">. Esse é o div que o React usará para todas as atualizações futuras. Altere o id de root para base:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    ...
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="base"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Salve as alterações.

Você verá um erro em seu navegador:

O React estava procurando por um elemento com um id de root. Agora que ele se foi, o React não consegue iniciar o projeto.

Altere o nome de volta de base para root:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    ...
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Salve e saia do index.html.

Neste ponto, você iniciou o servidor e fez uma pequena mudança na página HTML raiz. Você ainda não alterou nenhum código JavaScript. Na próxima seção, você atualizará o código JavaScript do React.

Passo 5 — Modificando a tag do título e o estilo

Neste passo, você fará sua primeira alteração em um componente do React no diretório src/. Você fará uma pequena alteração no CSS e no código JavaScript que serão atualizados automaticamente em seu navegador, através da ferramenta integrada de recarregamento dinâmico.

Caso tenha parado o servidor, certifique-se de reiniciá-lo com o npm start. Agora, dedique algum tempo para verificar as partes do diretório src/. Você pode abrir o diretório completo em seu editor de texto favorito, ou pode listar o projeto em um terminal com o comando a seguir:

ls src/

Você verá os arquivos a seguir em seu terminal ou editor de texto.

Output
App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setupTests.js

Vamos analisar esses arquivos um por vez.

A princípio, você não gastará muito tempo com o arquivo serviceWorker.js. Tão logo comece a criar aplicativos Web progressivos, porém, esse arquivo poderá ser importante. O trabalho de serviço consegue fazer muitas coisas, incluindo notificações por push e armazenamento em cache off-line. Por ora, porém, é melhor deixá-lo inalterado.

Os próximos arquivos a examinar são o setupTests.js e o App.test.js. Eles são usados como arquivos de teste. Na verdade, quando você executou o npm test no Passo 2, o script executou esses arquivos. O arquivo setupTests.js é curto; tudo o que ele possui são alguns métodos expect personalizados. Você aprenderá mais sobre eles em futuros tutoriais nesta série.

Abra o App.test.js:

nano src/App.test.js

Ao abri-lo, você verá um teste básico:

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

O teste está verificando se a frase learn react está no documento. Se voltar para o navegador que executa o seu projeto, você verá a frase na página. O teste do React é diferente da maioria dos testes de unidade. Uma vez que os componentes podem incluir informações visuais como o markup - com a respectiva lógica para a manipulação de dados, os testes de unidade tradicionais não funcionam com a mesma facilidade. O teste do React é mais parecido com uma forma de teste de integração ou funcional.

Em seguida, você verá alguns arquivos de estilos: App.css, index.css e logo.svg. Há várias maneiras de se trabalhar com a aplicação de estilos no React. A mais fácil delas é escrever um CSS simples, pois isso não exige nenhuma configuração adicional.

Existem vários arquivos CSS, pois você pode importar estilos em um componente como se eles fossem outro arquivo JavaScript. Considerando que você pode importar CSS diretamente para um componente, você também pode dividir o CSS para aplicar somente a um componente específico. Ou seja, você vai separar os problemas. Você não vai manter todo o CSS separado do JavaScript. Em vez disso, você vai manter agrupados juntos todos os arquivos CSS, JavaScript, markup e de imagens relacionados.

Abra o App.css no seu editor de texto. Se estiver trabalhando na linha de comando, você pode abri-lo com o seguinte comando:

nano src/App.css

Este é o código que você verá:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Esse é um arquivo CSS padrão, sem pré-processadores especiais do CSS. Você pode adicioná-los mais tarde se quiser, mas num primeiro momento, tem apenas um CSS simples. O Create React App tenta ser flexível e, ao mesmo tempo, ainda proporciona um ambiente pronto para uso.

De volta ao App.css, um dos benefícios do Create React App é que ele monitora todos os arquivos. Assim, se fizer alguma mudança, você a verá em seu navegador sem recarregá-lo.

Para ver como isso funciona, faça uma pequena alteração na background-color (cor do plano de fundo) no App.css. Altere-a de #282c34 para blue (azul) e, depois, salve o arquivo. O estilo final ficará parecido com este:

.App {
  text-align: center;
}
...
.App-header {
  background-color: blue
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
...

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Verifique seu navegador. Aqui está como ele era antes:

Aqui está como ele será após a mudança:

Prossiga e mude a background-color de volta para #282c34.

.App {
  text-align: center;

...

.App-header {
  background-color: #282c34
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

...

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Salve e saia do arquivo.

Você fez uma pequena alteração no CSS. Agora, é hora de fazer alterações no código JavaScript do React. Comece abrindo o index.js.

nano src/index.js

Aqui está o que você verá:

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

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

No topo, você está importando o React, ReactDOM, index.css, App e serviceWorker. Ao importar o React, você está, na verdade, extraindo código para converter o JSX em JavaScript. JSX são os elementos similares ao HTML. Por exemplo, observe como, ao usar o App, você o trata como um elemento HTML <App />. Você vai explorar esse ponto mais detalhadamente em futuros tutoriais desta série.

ReactDOM é o código que conecta seu código React aos elementos base, como a página index.html que você viu em public/. Examine a linha destacada a seguir:

...
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
...
serviceWorker.unregister();

Esse código instrui o React a encontrar um elemento com um id de root e injeta o código React lá. <App/> é seu elemento raiz e ramificará a partir dali. Trata-se do ponto inicial para todo o código React futuro.

No topo do arquivo, você verá algumas importações. Você importa o index.css, mas não faz nada com ele. Ao importá-lo, está dizendo ao Webpack através dos scripts do React para incluir esse código CSS no pacote compilado final. Se você não o importar, ele não será exibido.

Saia do src/index.js.

Neste ponto, você ainda não viu nada que está visualizando em seu navegador. Para ver isso, abra o App.js:

nano src/App.js

O código neste arquivo se parecerá com uma série de elementos HTML regulares. Aqui está o que você verá:

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Altere o conteúdo do sinalizador <p> de Edit <code>src/App.js</code> and save to reload. para Hello, world e salve suas alterações.

...

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
            Hello, world
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
...

Vá para seu navegador e você verá a mudança:

Agora, você realizou sua primeira atualização em um componente React.

Antes de continuar, note algumas outras coisas. Nesse componente, você importa o arquivo logo.svg e o atribui a uma variável. Em seguida, no elemento <img>, você adiciona esse código como o src.

Há algumas coisas acontecendo por aqui. Observe o elemento img:

...
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
            Hello, world
        </p>
...

Note como você passa o logo entre chaves. Sempre que estiver passando atributos que não sejam strings ou números, será necessário usar chaves. O React tratará esses elementos como JavaScript em vez de strings. Neste caso, você na verdade não está importando a imagem; em vez disso, você está fazendo referência à imagem. Quando o Webpack compila o projeto, ele gerencia a imagem e define a origem para o lugar apropriado.

Saia do editor de texto.

Se olhar os elementos de DOM em seu navegador, você verá que ele adiciona um caminho. Caso esteja usando o Chrome, você pode inspecionar o elemento clicando com o botão direito no elemento e selecionando Inspect.

Aqui está como ele ficaria no navegador:

O DOM tem esta linha:

<img src="/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">

Seu código será ligeiramente diferente, pois o logo terá um nome diferente. O Webpack quer garantir que o caminho da imagem seja único. Assim, mesmo se você importar imagens com o mesmo nome, elas serão salvas com caminhos diferentes.

Neste ponto, você fez uma pequena alteração no código JavaScript do React. No próximo passo, você usará o comando build para reduzir o tamanho do código em um arquivo pequeno que possa ser implantado em um servidor.

Passo 6 — Compilando o projeto

Neste passo, você compilará o código em um pacote que pode ser implantado em servidores externos.

Volte para o seu terminal e compile o projeto. Você já executou esse comando antes, mas para relembrá-lo, esse comando executará o script build. Ele criará um diretório com os arquivos combinados e reduzidos. Para executar a compilação, execute o comando a seguir a partir da raiz do seu projeto:

npm run build

Haverá um atraso enquanto o código é compilado e, quando estiver concluído, você terá um novo diretório chamado build/.

Abra o build/index.html em um editor de texto.

nano build/index.html

Você verá algo parecido com isto:

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/static/css/main.d1b05096.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],c=r[2],i=0,s=[];i<p.length;i++)a=p[i],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this["webpackJsonpdo-create-react-app"]=this["webpackJsonpdo-create-react-app"]||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var c=0;c<p.length;c++)r(p[c]);var f=l;t()}([])</script><script src="/static/js/2.c0be6967.chunk.js"></script><script src="/static/js/main.bac2dbd2.chunk.js"></script></body></html>

O diretório build recebe todo o seu código e, em seguida, compila e reduz o código ao menor estado utilizável. Não importa se uma pessoa consegue lê-lo, pois este não é um código voltado para o público. Uma redução como essa fará com que o código ocupe menos espaço, apesar de ainda permitir que ele funcione. Ao contrário de algumas linguagens como a Python, o espaço em branco não muda a maneira como o computador interpreta o código.

Conclusão

Neste tutorial, você criou seu primeiro aplicativo React, configurando seu projeto com ferramentas de compilação do JavaScript, sem precisar se aprofundar em detalhes técnicos. Esta é a grande vantagem do Create React App: você não precisa saber tudo para começar. Ele permite que você ignore os passos complicados da compilação, para que você possa se concentrar exclusivamente no código React.

Você aprendeu os comandos para iniciar, testar e compilar um projeto. Você usará esses comandos regularmente e, assim, fique atento aos tutoriais futuros. Acima de tudo, você atualizou seu primeiro componente React.

Se quiser ver o React em ação, experimente nosso tutorial Como exibir os dados da API da DigitalOcean com o React.