Create React App 2.0: Babel 7, Sass e Mais

Create React App 2.0 foi lançado hoje e traz o equivalente a um ano de melhorias numa única atualização de dependência.

Apesar do React por si só não precisar de nenhuma dependência para o build, pode ser desafiador escrever um aplicativo complexo sem um test runner rápido, um minificador para produção e um código fonte modular. Desde do primeiro lançamento, o objetivo do Create React App tem sido ajudar você a focar no que é mais importante — o código da sua aplicação — e cuidar da configuração do build e dos testes para você.

Várias ferramentas das quais ele depende já lançaram novas versões contendo novos recursos e melhorias de desempenho: Babel 7, webpack 4 e Jest 23. Entretanto, atualizá-las manualmente e fazer com que elas trabalhem bem juntas requer muitos esforços. E é justamente nisso que os contribuidores do Create React App tem se mantido ocupados nos últimos meses: migrando a configuração e dependências para que você não precise fazer sozinho.

Agora que Create React App 2.0 não está mais em beta, vamos ver o que há de novo e como podemos testá-lo!

Nota

Não se sinta pressionado a atualizar nada. Se você está satisfeito com as funcionalidades atuais, o desempenho e a confiabilidade, você pode continuar usando a versão em que você está atualmente! Pode ser uma boa ideia deixar o lançamento 2.0 se estabilizar um pouco antes de alterá-lo em produção.

Novidades

Aqui está um pequeno resumo das novidades nesse lançamento:

• 🎉 Mais opções de estilização: você pode usar Sass e CSS Modules por padrão.
• 🐠 Atualizamos para Babel 7, incluindo suporte para a sintaxe de Fragmento React e várias correções de erros.
• 📦 Atualizamos para webpack 4, que automaticamente divide seus bundles de JS de maneira mais inteligente.
• 🃏 Atualizamos para Jest 23, que inclui um mode interativo para revisar snapshots.
• 💄 Adicionamos PostCSS para você utilizar novas funcionalidades do CSS em navegadores antigos.
• 💎 Você pode usar Apollo, Relay Modern, MDX e outros transformadores Babel Macros de terceiros.
• 🌠 Agora você pode importar um SVG como componente React e utilizá-lo no JSX.
• 🐈 Você pode testar o novo modo experimental Yarn Plug’n’Play que remove a necessidade de node_modules.
• 🕸 Agora você pode usar sua própria implementação de proxy em desenvolvimento para coincidir com a API do seu servidor.
• 🚀 Agora você pode usar pacotes escritos para as mais novas versões de Node sem quebrar o build.
• ✂️ Agora você pode opcionalmente obter um CSS bundle menor se você planeja suportar apenas navegadores mais modernos.
• 👷‍♀️ Service workers agora são opcionais e implementados utilizando o Workbox do Google.

Todas essas funcionalidades estão disponíveis por padrão — para ativá-las, siga as instruções abaixo.

Começando um Projeto com Create React App 2.0

Você não precisar atualizar nada. A partir de hoje, quando você executar create-react-app, ele usará a versão 2.0 do modelo por padrão. Divirta-se!

Se você quer usar o modelo antigo 1.x por alguma razão, você pode fazer isso adicionando o argumento --scripts-version=react-scripts@1.x ao comando create-react-app.

Atualizando um Projeto para o Create React App 2.0

Atualizar um projeto não ejetado para Create React App 2.0 deve ocorrer sem complicações. Abra o package.json na raiz do seu projeto e encontre o react-scripts nele.

Agora altere a versão dele para 2.0.3:

  // ... other dependencies ...
  "react-scripts": "2.0.3"

Execute npm install (ou yarn, se for seu caso). Para a maioria dos projetos, essa mudança de uma única linha é suficiente para atualizar!

working here... thanks for all the new functionality 👍

— Stephen Haney (@sdothaney) October 1, 2018

Mais algumas dicas para ajudar você.

Quando você executar npm start pela primeira vez depois da atualização, será perguntado quais navegadores você gostaria de suportar. Pressione y para aceitar os padrões. Ele serão escritos no seu package.json e você pode editá-los a qualquer momento. Create React App usará essa informação para produzir bundles CSS menores ou adicionar polyfills de acordo com sua opção de suportar navegadores modernos ou antigos.

Se npm start ainda assim não funcionar depois da atualização, veja as instruções de migração detalhadas nas notas de lançamento. De fato, há algumas mudanças radicais nesse lançamento que podem quebrar seu código (breaking changes), mas o escopo delas são limitadas, então elas não devem tomar mais do que algumas horas para resolver. Veja que o suporte para navegadores antigos agora é opcional para reduzir o tamanho de polyfills.

Se você ejetou anteriormente, mas agora quer atualizar, uma solução comum é encontrar os commits onde você ejetou (e qualquer commit subsequence que altere a configuração), revertê-los, atualizar e depois talvez ejetar novamente. Também é possível que a funcionalidade pela qual você precisou ejetar (talvez Sass ou CSS Modules?), agora seja suportada por padrão.

Nota

Devido a um possível erro no npm, você pode acabar vendo avisos sobre dependências peer não satisfeitas. Você deve poder ignorá-las. Pelo que sabemos, esse problema não está presente com Yarn.

Mudanças Radicais (Breaking Changes)

Aqui está uma lista de mudanças neste lançamento que podem quebrar suas aplicações.

• Node 6 não é mais suportado.
• Suporte para navegadores antigos (como do IE 9 até IE 11) agora é opcional em um pacote separado.
• Agora a divisão de código (code-splitting) utilizando import() se comporta mais semelhante à especificação, enquanto que require.ensure() foi desativado.
• O ambiente padrão do Jest agora inclui jsdom.
• Suporte para especificar um objeto como configuração de proxy foi substituído pelo suporte para módulo proxy customizado.
• Suporte para extensão .mjs foi removido até que seu ecossistema se estabilize.
• Definições de PropTypes são automaticamente removidas na compilação em ambiente de produção.

Se algum desses pontos afeta você, as notas de lançamento 2.0.3 tem mais instruções detalhadas.

Saiba Mais

Você pode encontrar todo histórico de mudanças nas notas de lançamento. Esse foi um lançamento grande e podemos ter esquecido de algo. Por favor, reporte qualquer problema para nosso rastreador de issues e vamos tentar ajudar.

Nota

Se você está usando versões alpha 2.x, temos instruções de migração diferentes para elas.

Agradecimento

Esse lançamento não seria possível sem a maravilhosa comunidade de contribuidores. Gostaríamos de agradecer a Andreas Cederström, Clement Hoang, Brian Ng, Kent C. Dodds, Ade Viankakrisna Fadlil, Andrey Sitnik, Ro Savage, Fabiano Brito, Ian Sutherland, Pete Nykänen, Jeffrey Posnick, Jack Zhao, Tobias Koppers, Henry Zhu, Maël Nison, XiaoYan Li, Marko Trebizan, Marek Suscak, Mikhail Osher e vários outros que testaram e ofereceram feedback para esse lançamento.