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.
\nApesar 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ê.
\nVá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.
\nAgora que Create React App 2.0 não está mais em beta, vamos ver o que há de novo e como podemos testá-lo!
\n\n\nNota
\nNã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.
\n
Aqui está um pequeno resumo das novidades nesse lançamento:
\nnode_modules.Todas essas funcionalidades estão disponíveis por padrão — para ativá-las, siga as instruções abaixo.
\nVocê 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.
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 ...\n \"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!
\nworking here... thanks for all the new functionality 👍
— Stephen Haney (@sdothaney) October 1, 2018
Mais algumas dicas para ajudar você.
\nQuando 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.
\n\n\nNota
\nDevido 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.
\n
Aqui está uma lista de mudanças neste lançamento que podem quebrar suas aplicações.
\nimport() se comporta mais semelhante à especificação, enquanto que require.ensure() foi desativado.proxy foi substituído pelo suporte para módulo proxy customizado..mjs foi removido até que seu ecossistema se estabilize.Se algum desses pontos afeta você, as notas de lançamento 2.0.3 tem mais instruções detalhadas.
\nVocê 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.
\n\n\nNota
\nSe você está usando versões alpha 2.x, temos instruções de migração diferentes para elas.
\n
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.
","excerpt":"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…","frontmatter":{"title":"Create React App 2.0: Babel 7, Sass e Mais","next":null,"prev":null,"author":[{"frontmatter":{"name":"Joe Haddad","url":"https://twitter.com/timer150"}},{"frontmatter":{"name":"Dan Abramov","url":"https://twitter.com/dan_abramov"}}]},"fields":{"date":"01 de outubro de 2018","path":"content/blog/2018-10-01-create-react-app-v2.md","slug":"/blog/2018/10/01/create-react-app-v2.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"React v17.0"},"fields":{"slug":"/blog/2020/10/20/react-v17.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Candidato à lançamento: Sem novas funcionalidades"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Construindo Ótimas Experiências de Usuário com Modo Concorrente e Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparando para o Futuro com as Prereleases React"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 e a atualização do Roadmap"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"O React já esta traduzido? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: O React com Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}}]}},"pageContext":{"slug":"/blog/2018/10/01/create-react-app-v2.html"}},"staticQueryHashes":[]}