Como criar um projeto React usando o Create React App (e por quê!)

O Create React App é uma forma oficialmente suportada de criar aplicativos React. Ele oferece uma configuração de build moderna, sem qualquer configuração prévia necessária. Mas quais são as motivações por trás do CRA, o que ele faz e quando não utilizá-lo? É isso que vamos explorar hoje 🤩

Por que usar o Create React App?

Existem várias formas de criar e desenvolver um app React. O ecossistema desta tecnologia é bem amplo e há bastante flexibilidade nesse sentido. Mas, de modo geral, alguns aspectos estarão sempre presentes independentemente da aplicação:

Module bundler

As Single-Page Applications (SPAs) construídas com React podem vir a possuir inúmeros arquivos Javascript (ou Typescript ^^) se compondo e comunicando entre si pra modificar a DOM. Pra que esses arquivos, conhecidos como módulos, possam interagir com o navegador de maneira eficiente, surge a necessidade de um module bundler.

É a ferramenta que empacotará toda a nossa aplicação de uma forma que o navegador compreenda. No caso do Create React App, a ferramenta escolhida para este fim foi o Webpack.

GIF Webpack O Webpack felizão entregando o seu app num bundle só

Transpilador

Você provavelmente vai querer utilizar a sintaxe mais recente do Javascript pra aproveitar as novas funcionalidades da linguagem (ES2015 pra frente). Porém os navegadores podem ainda não entender essas atualizações, ou alguns sim e outros ainda não.

Então pra garantir a mesma experiência pra todos os(as) usuários(as), independente de qual dos principais navegadores eles(as) estejam utilizando, é preciso um transpilador. Os criadores do Create React App optaram pelo Babel, pra transformar o seu código pra uma versão do JS que seja suportada pelos navegadores.

GIF Babel O Babel tentando explicar a sintaxe nova do JS pro navegador

Linter

Espaços ou tabulações, com ou sem ponto-e-vírgula, aspas simples ou duplas… Seja qual for a preferência que você ou a sua equipe tem, é importante manter a consistência e clareza na nossa base de código. É sempre bom seguir alguma diretriz e um linter ajuda bastante com isso.

A escolha do Create React App é o ESLint.

GIF ESLint O ESLint brigando com você pra seguir as regras definidas

Biblioteca para testes

Testes são uma parte vital do processo completo de desenvolvimento. Para automatizá-los, há frameworks como o Jest, a escolha da equipe do Create React App.

GIF Jest O Jest depois de testar uma parte do seu programa que tá quebrada

Como usar o Create React App

Pra criar um projeto usando o Create React App é muito fácil. Se você já tem o npm instalado, basta usar o comando:

npx create-react-app NOME_DO_PROJETO

ou, se quiser utilizar Typescript ao invés de Javascript:

npx create-react-app NOME_DO_PROJETO --template=typescript

P.S.: Se você já está utilizando o Create React App em um projeto e quer atualizá-lo, é só dar um:

npm install react-scripts@latest

Quando você cria um novo projeto com o CRA, ele gera toda a estrutura de diretórios (como abaixo) e instalará as dependências necessárias pra você já sair codando! 🎉

NOME_DO_PROJETO
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

São disponibilizados alguns scripts já “de fábrica”:

yarn start pra iniciar um servidor de desenvolvimento local. Assim você pode visualizar o resultado do app em tempo real em http://localhost:3000/ à medida que vai fazendo alterações no código e salvando-as.
yarn test pra iniciar o executor de teste no modo watch; conforme você faz alterações em seu código, os testes serão executados novamente para garantir que continuam passando.
yarn build pra gerar um bundle da aplicação. Diferente do bundle que é gerado para desenvolvimento, este é otimizado, minimizado e comprimido, sendo então pronto pra produção. Você pode fazer deploy dele usando o Netlify, por exemplo, como explico neste post.
yarn eject pra remover todas as abstrações do CRA. Os arquivos de configuração, dependências de aplicativos e scripts NPM serão expostos e disponíveis para modificação conforme necessário. Atenção! Essa ação é irreversível, não tem como “desejetar”. Veremos a seguir os casos em que esse comando pode ser necessário.

Quando não usar o Create React App

Como vimos, o Create React App é uma excelente ferramenta para iniciar qualquer projeto sem tem que se preocupar em configurar vários detalhes.

É ótimo para aprender a desenvolver, fazer um protótipo, e a maioria das aplicações reais que vão pra produção também poderão desfrutar dessas facilidades. Entretanto, há casos em que alguma customização se faz necessária.

Talvez você queira alterar qualquer uma daquelas ferramentas que o CRA já escolheu e configurou inicialmente por você. Ou só está curioso(a) pra saber como tudo funciona por debaixo dos panos 😂.

Seja qual for o objetivo, tenha em mente de que “ejetar” o CRA é uma viagem só de ida, não tem um comando pra abstrair as coisas de volta.

A estrutura do projeto após ejetar vai ficar parecida com a seguinte:

 # Arquivos de configuração do Jest e Webpack; polyfills para Promises e Object.assign()
 ├── config/
 │   ├── env.js
 │   ├── jest/
 │   │   ├── cssTransform.js
 │   │   └── fileTransform.js
 │   ├── paths.js
 │   ├── polyfills.js
 │   ├── webpack.config.dev.js
 │   └── webpack.config.prod.js
 ├── node_modules/     # Pacotes instalados que são necessários pro Create-React-App
 ├── package.json
 ├── public/
 │   ├── favicon.ico
 │   └── index.html
 ├── scripts/          # React Scripts, agora expostos
 │   ├── build.js
 │   ├── start.js
 │   └── test.js
 ├── src/
 │   ├── components/
 │   │   ├── board.js
 │   │   ├── game.js
 │   │   └── square.js
 │   ├── index.css
 │   ├── index.js
 │   ├── logo.svg
 │   └── utils/
 │       └── index.js
 └── yarn.lock