Artigo original: https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/
O pacote Create React App torna muito fácil a criação e o desenvolvimento de aplicações em React.
Ele é uma das maneiras mais fáceis de se preparar um projeto novo em React e é a escolha certa para utilizar em projetos pessoais, assim como em aplicações sérias e de grande escala.
Trataremos, passo a passo, de como usar todos os recursos mais importantes do Create React App para criar, rápida e facilmente, seus projetos próprios em React.
Neste guia, incluirei diversas dicas úteis que aprendi durante a criação de aplicações com Create React App para tornar seu fluxo de trabalho ainda mais fácil.
Vamos começar.
Quer aprender a criar aplicações incríveis e prontas para a produção em React usando o Create React App? Confira o React Bootcamp.
Ferramentas necessárias:
- Node instalado em seu computador. É possível baixar o Node em nodejs.org. O Create React App precisa, no mínimo, da versão 10 do Node.
- Um gerenciador de pacotes chamado npm. Ele vem incluído automaticamente na sua instalação do Node. A versão do npm precisa ser, no mínimo, a versão 5.2.
- Um bom editor de código para trabalhar com seus arquivos de projetos. Recomendo fortemente usar como editor o Visual Studio Code. Você pode baixá-lo em code.visualstudio.com.
Passo 1. Como instalar o Create React App
Para usar o Create React App, precisamos primeiro abrir nosso terminal ou a linha de comando no seu computador.
Para criar um novo projeto em React, podemos usar a ferramenta npx, contanto que você tenha, no mínimo, a versão 5.2 do npm.
Observação: você pode conferir qual versão do npm você tem digitando em seu terminal npm -vO npx nos dá a capacidade de usar o pacote create-react-app sem ter de instalá-lo primeiro no seu computador, o que é muito conveniente.
Usar o npx também garante que estejamos usando a versão mais recente do Create React App para criar nosso projeto:
npx create-react-app meu-app-do-reactQuando executarmos esse comando, uma pasta chamada "meu-app-do-react" será criada no nosso computador no local onde especificamos e todos os pacotes necessários serão instalados automaticamente.
Observação: a criação de uma nova aplicação do React com create-react-app geralmente leva de 2 a 3 minutos, às vezes mais.
O Create React App também nos dá alguns modelos de uso para tipos específicos de projetos do React.
Por exemplo, se quisermos criar um projeto em React que use o TypeScript como ferramenta, podemos usar um modelo para isso em vez de ter de instalar o TypeScript manualmente.
Para criar uma aplicação em React que utilize o TypeScript, podemos usar o modelo de aplicação em TypeScript do Create React App:
npx create-react-app meu-app-do-react --template typescriptPasso 2. Revisão da estrutura do projeto
Quando os arquivos do projeto tiverem sido criados e nossas dependências instaladas, a estrutura do projeto terá essa aparência:
meu-app-do-react
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
└── srcPara que servem esses arquivos e pastas?
README.mdé um arquivo em markdown que inclui muitas dicas úteis e links que podem ajudar você em seu aprendizado no uso do Create React App.node_modulesé uma pasta que inclui todo o código relacionado às dependências que o Create React App instalou. Você jamais precisará entrar nessa pasta.package.jsoné o arquivo que gerencia as dependências da aplicação e o que está incluído na pasta node_modules do projeto, além dos scripts de que precisamos para executar a nossa aplicação..gitignoreé um arquivo usado para excluir os arquivos e pastas do rastreamento do Git. Não precisamos incluir pastas grandes, como a pasta node_modules, por exemplopublicé uma pasta que usaremos para armazenar nossos itens estáticos, como as imagens, svgs e fontes da aplicação em React.srcé a pasta que contém o código-fonte. É lá que todo nosso código relacionado ao React estará e é nela que trabalharemos fundamentalmente na criação de nossa aplicação.
Observação: um novo repositório do Git é criado sempre que fazemos um novo projeto no Create React App. É possível começar a salvar as alterações da aplicação de imediato usandogit add .egit commit -m "sua mensagem de commit".
Passo 3. Como executar seu projeto em React
Depois de haver arrastado seu projeto para o editor de código, você pode abrir seu terminal (no VSCode, vá em View > Terminal).
Para iniciar seu projeto em React, simplesmente execute no terminal a linha abaixo:
npm startAo executarmos nosso projeto, uma nova aba do navegador será aberta automaticamente no navegador padrão do computador e poderemos ver a aplicação.
O servidor de desenvolvimento será iniciado no endereço localhost:3000 e, imediatamente, poderemos ver a página inicial de nossa aplicação.
De onde vem o conteúdo de nossa aplicação?
Do arquivo App.js, que se encontra na pasta src. Se formos até esse arquivo, poderemos começar a fazer as alterações no código da aplicação.
// src/App.js
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;Especificamente, vamos remover as tags p e a, e adicionar um elemento h1 com o nome da nossa aplicação, "React Posts Sharer" ("Compartilhador de postagens em React", em inglês):
// src/App.js
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" />
<h1>React Posts Sharer</h1>
</header>
</div>
);
}
export default App;Ao salvar usando Command/Ctrl + S, você verá a página ser atualizada imediatamente e passando a ter a seguinte aparência:
Algo fantástico sobre o servidor de desenvolvimento é o fato de que ele atualiza automaticamente para refletir nossas alterações. Não há a necessidade de atualizar o navegador manualmente.
Observação: o único momento em que você precisará atualizar o navegador ao trabalhar com o Create React App é quando você tiver um erro.
Passo 4. Como executar os testes com a biblioteca React Testing Library
Create React App torna bem simples testar a aplicação em React.
Ela inclui todos os pacotes que você precisa para executar os testes usando a biblioteca React Testing Library (@testing-library/react).
Um teste básico já é incluído no arquivo App.test.js, na pasta src. Ele testa se o componente da aplicação exibe com sucesso um link com o texto "learn react" ("aprenda React", em inglês).
Podemos executar nossos testes com o comando:
npm run testObservação: os testes serão executados em todos os arquivos com o final .test.js quando você executar o comando npm run testAo executarmos isso, no entanto, haverá uma falha no teste.
Isso ocorre porque já não temos mais o elemento de link. Colocamos um título em seu lugar. Para fazermos com que nosso teste passe, precisamos pegar o elemento de título com o texto "React Posts Sharer".
// src/App.test.js
import { render, screen } from "@testing-library/react";
import App from "./App";
test("renders app title element", () => {
render(<App />);
const titleElement = screen.getByText(/React Posts Sharer/i);
expect(titleElement).toBeInTheDocument();
});Ao executarmos o teste novamente, veremos que ele passou:
PASS src/App.test.js
✓ renders app title element (54 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.776 s, estimated 3 s
Ran all test suites related to changed files.Observação: ao executarmos o comando de teste, não é necessário iniciá-lo nem interrompê-lo manualmente. Se o teste falhar, você pode conferir o código de sua aplicação, resolver o erro e, ao salvar, todos os seus testes serão executados novamente de modo automático.
Passo 5. Como alterar os metadados da aplicação
Como funciona o nosso projeto? Podemos ver isso visitando o arquivo index.js.
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);O pacote ReactDOM faz a renderização de nossa aplicação (especificamente, do componente App e de todos os componentes dentro dele), anexando-o ao elemento HTML com o id 'root'.
Esse elemento pode ser encontrado em public/index.html.
<!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" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Toda aplicação em React é anexada a essa página em HTML usando a div com o id 'root' que vimos acima.
Não é preciso mudar nada dentro das tags body. No entanto, é uma boa ideia alterar os metadados dentro das tags head para informar aos usuários e mecanismos de busca sobre nossa aplicação em específico.
Podemos ver que ela inclui tags meta para um título, descrição e imagem favicon (o ícone pequeno na aba do navegador).
Você também verá várias outras tags, como theme-color, apple-touch-icon e manifest. Elas são úteis se os usuários quiserem adicionar sua aplicação ao dispositivo ou a tela inicial do computador deles.
Em nosso caso, podemos alterar o título para o nome da nossa aplicação e a descrição para que se ajustem à aplicação que estamos fazendo:
<!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="App for sharing peoples' posts from around the web"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React Posts Sharer</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Passo 6. Como trabalhar com imagens e outros itens
Se olharmos para o nosso componente App, veremos que estamos utilizando um elemento img.
É interessante o fato de que estamos importando um arquivo da nossa pasta src, como se fosse uma variável que está sendo exportada daquele arquivo.
// src/App.js
import "./App.css";
import logo from "./logo.svg";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1>React Posts Sharer</h1>
</header>
</div>
);
}
export default App;Podemos importar arquivos de imagem e outros itens estáticos diretamente em nossos componentes em React. Esse recurso vem da configuração do webpack do Create React App.
Em vez de incluir itens estáticos diretamente de dentro de nossa pasta src, também temos a opção de inclui-los em nossa pasta public.
Se movermos nosso arquivo logo.svg de src para public, em vez de importar o arquivo usando a sintaxe de importação, podemos escrever o seguinte:
// src/App.js
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
<img src="/logo.svg" className="App-logo" alt="logo" />
<h1>React Posts Sharer</h1>
</header>
</div>
);
}
export default App;Qualquer arquivo colocado na pasta public pode ser usado nos arquivos .js ou .css com a sintaxe: /nome_do_arquivo.extensão.
O que torna o Create React App bastante conveniente é o fato de não precisarmos usar um elemento img para exibir esse svg.
Para importar esse svg como componente podemos usar a seguinte sintaxe:
// src/App.js
import { ReactComponent as Logo } from "./logo.svg";
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
<Logo style={{ height: 200 }} />
<h1>React Posts Sharer</h1>
</header>
</div>
);
}
export default App;O que ocorre aqui? Podemos importar o arquivo svg como um ReactComponent e, em seguida, renomeá-lo para o nome que quisermos usando a palavra-chave as.
Em outras palavras, podemos usar nosso svg importado como usaríamos qualquer outro componente normal.
Os arquivos svg têm sido, tradicionalmente, difíceis de utilizar no React. Essa sintaxe de componente torna muito fácil e permite que façamos coisas como estilos em linha (como vemos acima, onde definimos a altura de Logo como 200px).
Passo 7. Como instalar dependências
Para a aplicação de compartilhamento de postagens que estamos fazendo, vamos obter alguns dados de postagens para exibirmos na aplicação a partir da API JSON Placeholder.
Podemos usar uma dependência chamada axios para fazer com que a solicitação obtenha nossas postagens.
Para instalar o axios, execute:
npm install axiosObservação: você pode instalar os pacotes mais facilmente usando a versão abreviada do comandonpm i axiosem vez denpm install
Ao instalar o axios, ele será adicionado à nossa pasta node_modules.
Podemos rever todas as dependências que instalamos diretamente em nosso arquivo package.json e ver que o axios foi adicionado à seção "dependencies":
{
"name": "my-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",
"web-vitals": "^1.0.1"
}
}Não incluiremos isso no projeto, mas se estiver interessado em usar o TypeScript com seu projeto do Create React App existente, o processo é bem simples.
Basta instalar a dependência typescript e as definições de tipo apropriadas para serem usadas com o desenvolvimento e a testagem em React:
npm install typescript @types/node @types/react @types/react-dom @types/jest
Depois disso, você pode simplesmente reiniciar seu servidor de desenvolvimento e renomear aqueles arquivos do React que tiverem a extensão .js colocando a extensão .tsx no lugar. Você terá, então, um projeto com React e TypeScript funcional.
Passo 8. Como importar os componentes
Em vez de escrever todo o nosso código dentro do componente App, vamos criar um componente em separado para obter nossos dados e exibi-los.
Chamaremos esse componente de Posts, e, assim, criaremos uma pasta dentro de src que terá todos os nossos componentes e colocaremos um arquivo dentro dela, chamado Posts.js.
O caminho completo para o nosso arquivo do componente será src/components/Posts.js.
Para obter nossos posts por fetch, solicitaremos as postagens a partir da API JSON Placeholder, vamos colocá-los em uma variável de state chamada posts, e usaremos o método map para exibir o título e o conteúdo do corpo de cada uma das postagens:
// src/components/Posts.js
import React from "react";
import axios from "axios";
function Posts() {
const [posts, setPosts] = React.useState([]);
React.useEffect(() => {
axios
.get("http://jsonplaceholder.typicode.com/posts")
.then((response) => setPosts(response.data));
}, []);
return (
<ul className="posts">
{posts.map((post) => (
<li className="post" key={post.id}>
<h4>{post.title}</h4>
<p>{post.body}</p>
</li>
))}
</ul>
);
}
export default Posts;
Estamos obtendo por fetch e retornando nossos dados das postagens a partir do componente Posts, mas, para vê-los em nossa aplicação, precisaremos importá-los no componente App.
Voltemos ao App.js e importaremos as postagens indo à pasta components e obtendo o componente Posts de Posts.js.
Depois disso, podemos colocar nosso componente Posts depois do nosso header:
// src/App.js
import Posts from "./components/Posts";
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
<img src="/logo.svg" className="App-logo" alt="logo" />
<h1>React Posts Sharer</h1>
</header>
<Posts />
</div>
);
}
export default App;E podemos ver todas as nossas postagens obtidas por fetch em nossa página inicial, abaixo de nosso cabeçalho:
Passo 9: Como estilizar a aplicação com CSS
Nossa aplicação poderia se beneficiar de uma estilização um pouco melhor.
Create React App vem com suporte ao CSS "de fábrica". Se formos ao App.js, veremos na parte superior do arquivo que estamos importando um arquivo App.css de src.
Observação: você pode importar arquivos .css no componente que você quiser, mas esses estilos serão aplicados globalmente à sua aplicação. Eles não terão o escopo do componente no qual o arquivo .css é importado.
Dentro de App.css, podemos adicionar alguns estilos para melhorar a aparência da aplicação:
/* src/App.css */
.App {
text-align: center;
margin: 0 auto;
max-width: 1000px;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
.App-header {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
}
li {
list-style-type: none;
}
.post {
margin-bottom: 4em;
}
.post h4 {
font-size: 2rem;
}Também existe outra folha de estilos global, chamada index.css, que tem mais regras de estilo globais.
Nela, podemos adicionar algumas propriedades a mais para o elemento body para tornar nosso segundo plano escuro e com o texto de cor branca:
/* src/index.css */
body {
background-color: #282c34;
color: white;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}Depois de adicionarmos esses estilos, temos uma aplicação com uma aparência muito melhor:
Saiba que também é muito fácil adicionar configurações mais avançadas de CSS, caso queira, por exemplo, adicionar módulos do CSS ou SASS à sua aplicação em React.
Outros recursos úteis para a estilização com CSS estão incluídos no seu arquivo README.md.
Passo 10. Como fazer o build da aplicação e publicá-la
Quando estivermos satisfeitos com nossa aplicação e prontos para publicá-la, podemos fazer a build da aplicação com o seguinte comando:
npm run buildEle criará uma build de produção otimizada para nosso projeto e dará como resultado quais arquivos foram gerados e o tamanho de cada um deles:
Compiled successfully.
File sizes after gzip:
46.62 KB build/static/js/2.1500c654.chunk.js
1.59 KB build/static/js/3.8022f77f.chunk.js
1.17 KB build/static/js/runtime-main.86c7b7c2.js
649 B build/static/js/main.ef6580eb.chunk.js
430 B build/static/css/main.5ae9c609.chunk.cssO resultado vem da ferramenta de build chamada Webpack.
Ele nos ajuda a ter uma ideia do tamanho dos arquivos da nossa aplicação em função do tamanho de nossos arquivos .js especificamente, que podem ter um impacto significativo no desempenho da aplicação.
Cada chunk (parte, em inglês) inclui uma string ou hash exclusiva, que mudará a cada build para garantir que novas implantações não sejam salvas (em cache) pelo navegador.
Se não tivéssemos esse hash para prevenir o cache de cada um dos nossos arquivos, provavelmente não poderíamos ver as alterações que fizemos à nossa aplicação.
Por fim, podemos executar nosso projeto em React, cujo build acabamos de fazer, localmente com a ajuda do pacote do npm chamado serve.
Ele é útil para detectar erros que podemos ter com a versão final do nosso projeto antes de colocarmos o projeto ao vivo na web.
Assim como fizemos com o create-react-app, podemos usar o npx para executar o serve sem instalá-lo globalmente em nosso computador.
npx serveUsando o serve, nossa aplicação iniciará em uma porta de desenvolvimento diferente de 3000. Neste caso, ela será localhost:5000.
Com isso, concluímos a aplicação em React para publicá-la na web ou em qualquer serviço de implantação, como o Netlify, as Github Pages ou o Heroku!
Gostou desse artigo? Faça parte do React Bootcamp
O React Bootcamp tem tudo o que você precisa saber sobre o aprendizado de React e une tudo isso em um pacote amplo, que inclui vídeos, fichas informativas (cheatsheets) e alguns bônus especiais.
Junte-se a milhares de desenvolvedores que estão aprendendo a se tornar profissionais em React em tempo recorde:
Clique aqui para ser notificado quando abrirem vagas para o bootcamp