Image for post
Image for post
A performance de Heath Ledger seria ótima, assim como esse projeto!

10 Coisas que amo no create-react-app

Agora que eu finalizei dois projetos pessoais (1 e 2), e fiz o deploy baseado no create-react-app, que particularmente, é meu favorito hoje em dia! Vou citar aqui, algumas razões da minha decisão de sempre usar esse projeto:

1. Simplesmente funciona

É um sentimento ótimo de usar algo e você pensar: “Cara, não foi nem um pouco difícil”. A experiência de uso tem sido bem sólida, que até me impressiona! Eu acredito que funcione tão bem porque é um projeto grande (174 contribuintes até o momento dessa escrita) e o escopo é pequeno. Muitos outros “frameworks-boilerplate-para-projetos-modernos” caem na situação de: “Esse é o jeito que eu gosto. Veja se você também gosta. Mas é melhor você pensar do meu jeito, se não…”.

2. Não existe decisão difícil

Configurar o Webpack ainda me intimida. Configurar o Babel ainda me intimida. Sei como configurar os três juntos, mas, sempre bate aquele sentimento de que talvez eu esteja fazendo algo errado ou que estou esquecendo algo que já é comum. create-react-app encorpora todas essas ferramentas em uma configuração padrão de alta qualidade. Sei que a configuração do Babel no projeto não suporta decorators, mas para todo o resto, funciona muito bem obrigado, não tive nenhuma grande razão para extender o padrão.

Algumas pessoas irão se sentir claustrofóbico por não conseguirem configurar nada. Mas, eu prefiro criar projetos e idéias ao invés de configurar tudo perfeitamente desde o início. De verdade, eu acredito que é uma característica ótima não permitir nenhuma configuração adicional.

E aí vem o vizinho e fala: “Mas Edu, eu posso usar yarn run eject e configurar do meu jeito”. Claro que pode mano, o problema é que você não está usando create-react-app a partir desse momento.

3. Sentimento de estar usando as tecnologias mais modernas

Eu tentei usar outros “projetos boilerplate” para React (e também AngularJS), o problem é, você começa a usar, aparecem unúmeras atualizações em diferentes pacotes e depêndencias, você atualiza e tudo para de funcionar. Com create-react-app, existem apenas duas (tecnicamente, três) coisas que você precisa atualizar no seu package.json, e elas são: react-scripts e react (e tecnicamente, react-dom).

Se você ler sobre uma maneira nova de fazer algo com Webpack/Babel/Eslint, tenho certeza de irá ser implementado no create-react-app em pouco tempo. Só controle a sua ansiedade, todos temos trabalho a fazer.

Aliás, uma dica para atualizar suas depêndencias. Se você quiser manter seu package.json sempre atualizado, e está utilizando npm outdated para checar seus pacotes, eu recomendo você trocar para yarn outdated. A diferença é que o npm outdated irá mencionar dependências desatualizadas das suas depêndencias listadas no package.json, enquanto yarn outdated, irá checar no npmjs.com apenas o que você tem listado no package.json.

4. Servidor de Proxy

Práticamente todos os meus projetos recentes são single-page apps (SPAs), que carregam aquele .js maroto para só então começar a buscar dados de um servidor REST criado em Django ou Go ou o que estiver disponível. Então, sendo realista, o app se parece com:

componentDidMount() {
fetch('/api/userdata/')
.then(r = r.json())
.then(response => {
this.setState({userData: response.user_data})
})
}

Com create-react-app você pode adicionar essa linha no seu package.json:

"proxy": "http://localhost:8000"

Agora, quando você abrir o seu http://localhost:3000 no navegador e realizar uma chamada AJAX para http://localhost:3000/api/userdata/, o servidor Node criado pelo create-react-app irá, automaticamente, repassar todos as chamadas para http://localhost:8000/api/userdata/.

Irado né?

Esse exemplo muda apenas a porta, mas perceba que eu usei uma URL completa, ou seja, pode ser um domínio completamente diferente).

Com essa configuração, você não precisa se preocupar com CORS ou ter que rodar seu NGINX localmente e usar regras de reescrita para rotas /api/.

5. Documentação completa, que cabe em uma página!

Tudo que você precisa está nessa página.

No momento que escrevo, a documentação está usando npm ao invés de yarn, não sei porque, mas é maneiro saber que está tudo esclarecido em uma página.

É só apertar cmd+f e procurar o que se precisa!

6. Não tem NADA haver com SCSS, Less ou PostCSS

SCSS, Less, e PostCSS são incríveis, mas não funcionam com create-react-app. Você tem que usar o bom e velho CSS. Se lembra dele? Aquele cachorro velho sem muitos truques.

É, para ser sincero, eu não vejo problema algum. Quanto mais simples melhor! Aliás, eu venho mudando meu paradigma de como escrever CSS. E projetos como o styled components (que ainda não usei) me fazem repensar se realmente vale a pena orquestrar todas essas ferramentas.

7. Não tem NADA haver com Redux, react-router ou MobX

Tenho certeza que você já passou por uma situação parecida, você está navegando na web, encontra aquele “projeto-boilerplate-que-soluciona-todos-os-problemas”, porém, ele só vai solucionar o seu problema se você, obrigatoriamente, usar Redux ou react-router ou MobX ou “insira-aqui-sua-biblioteca-favorita”. Individualmente, essas bibliotecas são ótimas, mas se o boilerplate te força a usar certas bibliotecas, tenho certeza de que ele já corta um bom pedaço de participação de desenvolvedores, algunas até, que poderiam fixar bugs no projeto. Tudo isso devido a uma decisão de design tomada no início do projeto.

Realmente é difícil não escolher como padrão uma biblioteca para gerenciar estado ou controlar suas rotas, afinal, create-react-app realmente inicia seu projeto do zero.

Todas essas soluções são ótimas, mas como eu quero começar meu projeto do zero, e decidir futuramente, quais ferramentas vou precisar, tenho certeza de que essa é uma decisão sábia do projeto.

8. Contamos com um HMR decente

Para ser sincero, nunca fui fã do react-hot-loader. Mesmo depois de tentar a versão 3, tem certas situações que eu paro e penso se eu realmente preciso atualiar a página o não, criando uma confusão momentânea.

Por padrão, quando você cria um projeto com create-react-app, existe uma conexão com websockets com o servidor que “escuta” as mudanças nos seus arquivos e realiza uma atualização automática para você. Isso pode parecer rude, se comparado com a mágica criada pelo HMR. Mas, para alguém que prefere console.log ao invés de debugger breakpoints, isso é suficientemente bom para mim.

O fato é, se você quiser usar HMR, você precisar adicionar só a linha seguinte no final do src/index.js:

if (module.hot) {
module.hot.accept()
}

E booom! Sua página não precisará ser atualizada (aquele F5), agora, apenas os componentes do seu app serão atualizados em tempo de execução. O estado deles também será resetado, e o console do DevTools não irá ser limpo, ah!, uma atualização forçada, o tal do F5, fica (visívelmente) um pouco lento.

9. Estrutura de testes, tudo incluso!

Vou confessar uma coisa, normalmente eu não escrevo testes para projetos pessoais (a bola é minha, só joga do meu jeito). Não porque seja difícil, mas é que, normalmente, requer toda uma estrutura específica para isso.

E escrever testes para JavaScript requer uma configuração a parte. Qual biblioteca usar? Com task runner ou não? Assertação? Pato Donalds ou Patolino?

Vira e mexe você sempre vê uma solução no Hacker News que te faz chorar de complicado. Porque é tão difícil?

create-react-app é energizado com Jest e a documentação tem o cuidado de começar com simples exemplos de como testar componentes, indo para cobertura de código e até integração contínua (CI).

Se você quiser saber mais sobre Jest, você pode conferir meus outros dois posts sobre ele:

10. Dan Abramov

Dan é o cara na comunidade React. Não é porque ele escreveu Hot Reloading, redux e boa parte do create-react-app, mas sim, porque ele é muito, mas muito gente boa!

Eu sigo ele no twitter, e por ele ser uma pessoa muito humilde (está sempre compartilhando o que sabe e querendo aprender o que não sabe, é tipo a hashtag #juniordevforlife, sem medo ou receio) e com atitudes sempre positivas, isso tudo me fez sentir que sou como um amigo dele.

Ele é bem pé no chão quando o assunto é a loucura de bibliotecas, configuração e ferramentas em torno do JavaScript. Sempre olhando para o lado mais simples e de fácil entendimento para todos, iniciantes ou avançados.

Só o fato do create-react-app ser praticamente outro projeto dele, estar sempre encorajando pessoas a utilizar, colher e dar feedback sobre documentação e casos de uso, me faz sentir que estou no ombro de um gigante.

Fica aqui, meu muito obrigado Dan Abramov e equipe.

Obrigado por ter lido até aqui, se você gostou do post, manda um 💚 e compartilha no Twitter! Valeu! 🙏🏼

Créditos

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store