{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2017/05/18/whats-new-in-create-react-app.html","result":{"data":{"markdownRemark":{"html":"

A menos de um ano atrás, nós introduzimos Create React App como uma forma oficialmente apoiada de criar aplicações com zero configuração. Desde então, o projeto teve um enorme crescimento, com mais de 950 commits de mais de 250 contribuidores.

\n

Hoje, estamos entusiasmados em anunciar que muitos recursos que estiveram na pipeline dos últimos meses foram finalmente lançados.

\n

Como de costume com o Create React App, você pode aproveitar essas melhorias em suas aplicações não ejetadas existentes atualizando uma única dependência e seguindo nossas instruções de migração.

\n

Aplicações recém-criadas obterão essas melhorias automaticamente.

\n

webpack 2

\n
\n

Esta mudança foi uma contribuição de @Timer em #1291.

\n
\n

Atualizamos para o webpack 2, que foi oficialmente lançado há alguns meses. É uma grande atualização com muitas correções de bugs e melhorias gerais. Temos testado por um tempo, e agora consideramos estável o suficiente para recomendar a todos.

\n

Embora o formato de configuração do webpack tenha mudado, os usuários do Create React App que não ejetaram não precisam se peocupar com isso, pois atualizamos a configuração do nosso lado.

\n

Se você ejetou sua aplicação por algum motivo, Webpack provê um guia de migração de configuração que você pode seguir para atualizar suas aplicações. Note que com cada release do Create React App, nós estamos trabalhando para suportar mais casos de uso fora da caixa para que você não tenha que ejetar no futuro.

\n

A funcionalidade mais notável do webpack 2 é a habilidade de escrever e importar módulos ES6 diretamente sem compilar eles para CommonJS. Isso não deve afetar como você escreve código desde que você já use instruções import e export, mas ajudará a detectar mais erros, como a falta de exportações nomeadas em tempo de compilação:

\n

\"Validação

\n

No futuro, à medida que o ecossistema em torno dos módulos ES6 amadurecer, você poderá esperar mais melhorias no tamanho do bundle da sua aplicação, graças a tree shaking.

\n

 Sobreposição de Erro em Tempo de Execução

\n
\n

Esta mudança foi uma contribuição de @Timer e @nicinabox em #1101, @bvaughn em #2201.

\n
\n

Você já cometeu algum erro no código e só percebeu isso depois que o console foi inundado por erros enigmáticos? Ou pior, você já enviou uma aplicação com falhas para produção porque acidentalmente perdeu um erro no desenvolvimento?

\n

Para resolver esses problemas, estamos introduzindo uma sobreposição sempre que houver um erro não detectado na sua aplicação. Ele só aparece no desenvolvimento e você pode descartá-lo pressionando Escape.

\n

Um GIF vale mais que mil palavras:

\n

\"Sobreposição

\n

(Sim, ele se integra ao seu editor!)

\n

No futuro, planejamos ensinar a sobreposição de erros de tempo de execução a entender mais sobre sua aplicação React. Por exemplo, após o React 16, planejamos mostrar pilhas de componentes React além das pilhas JavaScript quando um erro é gerado.

\n

Aplicações Web Progressivas por Padrão

\n
\n

Esta mudança foi uma contribuição de @jeffposnick em #1728.

\n
\n

Projetos criados recentemente são construídos como Aplicações Web Progressivas por padrão. Isso significa que eles empregam service workers com uma estratégia de cache offline-first para minimizar o tempo necessário para veicular a aplicação aos usuários que o visitam novamente. Você pode desativar esse comportamento, mas recomendamos para aplicações novas e existentes, especialmente se você tem como alvo dispositivos móveis.

\n

\n \n \n \n