Skip to content

Commit e1e28ce

Browse files
committed
Fixes from review
1 parent b7dc76e commit e1e28ce

File tree

1 file changed

+18
-16
lines changed

1 file changed

+18
-16
lines changed

content/blog/2017-05-18-whats-new-in-create-react-app.md

+18-16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: "O que há de novo no Create React App"
2+
title: "Novidades no Create React App"
33
author: [gaearon]
44
---
55

@@ -19,15 +19,15 @@ Atualizamos para o webpack 2, que foi [oficialmente lançado](https://medium.com
1919

2020
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.
2121

22-
Se você ejetou sua aplicção por algum motivo, Webpack provê um [guia de migração de configuração](https://webpack.js.org/guides/migrating/) 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.
22+
Se você ejetou sua aplicação por algum motivo, Webpack provê um [guia de migração de configuração](https://webpack.js.org/guides/migrating/) 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.
2323

2424
A funcionalidade mais notável do webpack 2 é a habilidade de escrever e importar [módulos ES6](http://2ality.com/2014/09/es6-modules-final.html) 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:
2525

2626
![Validação de export](../images/blog/cra-update-exports.gif)
2727

2828
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](https://webpack.js.org/guides/tree-shaking/).
2929

30-
### Sobreposição de erro em tempo de execução {#error-overlay}
30+
### Sobreposição de Erro em Tempo de Execução {#error-overlay}
3131

3232
>*Esta mudança foi uma contribuição de [@Timer](https://github.com/Timer) e [@nicinabox](https://github.com/nicinabox) em [#1101](https://github.com/facebookincubator/create-react-app/pull/1101), [@bvaughn](https://github.com/bvaughn) em [#2201](https://github.com/facebookincubator/create-react-app/pull/2201).*
3333
@@ -37,43 +37,45 @@ Para resolver esses problemas, estamos introduzindo uma sobreposição sempre qu
3737

3838
Um GIF vale mais que mil palavras:
3939

40-
![Sobreposição de erro em tempo de execução](../images/blog/cra-runtime-error.gif)
40+
![Sobreposição de Erro em Tempo de Execução](../images/blog/cra-runtime-error.gif)
4141

4242
(Sim, ele se integra ao seu editor!)
4343

44-
No futuro, planejamos ensinar a sobreposição de erros de tempo de execução para 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.
44+
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.
45+
4546

4647
### Aplicações Web Progressivas por Padrão {#progressive-web-apps-by-default}
4748

4849
>*Esta mudança foi uma contribuição de [@jeffposnick](https://github.com/jeffposnick) em [#1728](https://github.com/facebookincubator/create-react-app/pull/1728).*
4950
50-
Projetos criados recentemente são construídos como [Aplicações Web Progressivas](https://developers.google.com/web/progressive-web-apps/) por padrão. Isso significa que eles empregam [trabalhadores de serviço](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) com uma [estratégia de cache offline-first](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network) 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.
51+
Projetos criados recentemente são construídos como [Aplicações Web Progressivas](https://developers.google.com/web/progressive-web-apps/) por padrão. Isso significa que eles empregam [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) com uma [estratégia de cache offline-first](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network) 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.
52+
53+
![Carregando recursos do service worker](../images/blog/cra-pwa.png)
5154

52-
![Carregando ativos do trabalhador de serviço](../images/blog/cra-pwa.png)
55+
As novas aplicações têm esses recursos automaticamente, mas você pode converter facilmente um projeto existente em uma Aplicação Web Progressiva seguindo [nosso guia de migração](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0).
5356

54-
As novas aplicações têm esses recursos automaticamente, mas você pode converter facilmente um projeto existente em uma Aplicações Web Progressiva seguindo [nosso guia de migração](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0).
57+
Adicionaremos [mais documentação](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app ) sobre esse tópico nas próximas semanas. Por favor, fique à vontade para [fazer qualquer pergunta](https://github.com/facebookincubator/create-react-app/issues/new) através das issues no repositório do projeto!
5558

56-
Adicionaremos [mais documentação](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app ) sobre esse tópico nas próximas semanas. Por favor, fique à vontade para [fazer qualquer pergunta](https://github.com/facebookincubator/create-react-app/issues/new) no rastreador de problemas!
5759

5860
### Jest 20 {#jest-20}
5961

6062
>*Esta mudança foi uma contribuição de [@rogeliog](https://github.com/rogeliog) em [#1614](https://github.com/facebookincubator/create-react-app/pull/1614) e [@gaearon](https://github.com/gaearon) in [#2171](https://github.com/facebookincubator/create-react-app/pull/2171).*
6163
6264
Agora estamos usando a versão mais recente do Jest, que inclui inúmeras correções e melhorias. Você pode ler mais sobre as mudanças nas postagens [Jest 19](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html) e [Jest 20](http://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html).
6365

64-
Os destaques incluem um novo [modo de onservação imersivo](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#immersive-watch-mode), [um melhor formato de snapshot](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#snapshot-updates), [melhorias na impressão de testes ignorados](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#improved-printing-of-skipped-tests), e [novas APIs de teste](https://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html#new-improved-testing-apis).
66+
Os destaques incluem um novo [modo de observação imersivo](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#immersive-watch-mode), [um melhor formato de snapshot](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#snapshot-updates), [melhorias na impressão de testes ignorados](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#improved-printing-of-skipped-tests), e [novas APIs de teste](https://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html#new-improved-testing-apis).
6567

6668
![Observador de teste imersivo](../images/blog/cra-jest-search.gif)
6769

6870
Além disso, o Create React App agora suporta a configuração de algumas opções do Jest relacionadas aos relatórios de cobertura.
6971

70-
### Divisão de código com import() dinâmico {#code-splitting-with-dynamic-import}
72+
### Divisão de Código com import() Dinâmico {#code-splitting-with-dynamic-import}
7173

7274
>*Esta mudança foi uma contribuição de [@Timer](https://github.com/Timer) em [#1538](https://github.com/facebookincubator/create-react-app/pull/1538) e [@tharakawj](https://github.com/tharakawj) em [#1801](https://github.com/facebookincubator/create-react-app/pull/1801).*
7375
74-
É importante manter a carga JavaScript inicial de aplicações web no mínimo e [carregar o restante do código sob demanda](https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2). Embora o Create React App seja compatível com [divisão de código](https://webpack.js.org/guides/code-splitting-async/) usando `require.ensure()` desde o primeiro lançamento, ele usou uma sintaxe específica do webpack que não funcionou no Jest ou em outros ambientes.
76+
É importante manter a carga JavaScript inicial de aplicações web no mínimo e [carregar o restante do código sob demanda](https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2). Embora o Create React App seja compatível com [divisão de código](https://webpack.js.org/guides/code-splitting-async/) usando `require.ensure()` desde a primeira versão, ele usou uma sintaxe específica do webpack que não funcionou no Jest ou em outros ambientes.
7577

76-
Nesta versão, estamos adicionando suporte à proposta [dynamic `import()`](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand), que se alinha com o futuros padrões da web. Ao contrário do `require.ensure()`, ele não quebra os testes do Jest e deve se tornar parte do JavaScript. Recomendamos que você use `import()` para atrasar o carregamento do código para subárvores de componentes não críticos até que você precise renderizá-los.
78+
Nesta versão, estamos adicionando suporte à proposta [proposta de `import()` dinâmico](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand), que está alinhada com o futuros padrões da web. Ao contrário do `require.ensure()`, ele não quebra os testes do Jest e deve se tornar parte do JavaScript. Recomendamos que você use `import()` para atrasar o carregamento do código para subárvores de componentes não críticos até que você precise renderizá-los.
7779

7880
![Criando chunks com importação dinâmica](../images/blog/cra-dynamic-import.gif)
7981

@@ -83,7 +85,7 @@ Nesta versão, estamos adicionando suporte à proposta [dynamic `import()`](http
8385
8486
Melhoramos a saída do console de maneira geral.
8587

86-
Por exemplo, quando você inicia o servidor de desenvolvimento, agora exibimos o endereço da LAN em adicional ao endereço do host local, assim você pode facilmente acessar a aplicação a partir de um dispositivo móvel na mesma network:
88+
Por exemplo, quando você inicia o servidor de desenvolvimento, agora exibimos o endereço da LAN adicionalmente ao endereço do servidor local, assim você pode facilmente acessar a aplicação a partir de um dispositivo móvel na mesma rede:
8789

8890
![Melhor saída do console](../images/blog/cra-better-output.png)
8991

@@ -97,9 +99,9 @@ Você pode ler o registro de alterações completo e o guia de migração nas [n
9799

98100
### Agradecimentos {#acknowledgements}
99101

100-
Está versão é o resultado de meses de trabalho de muitas pessoas na comunidade React. Ela tem como objetivo melhorar a experiência do desenvolvedor e do usuário, pois acreditamos que elas são coplementares e amdam de mãos dadas.
102+
Está versão é o resultado de meses de trabalho de muitas pessoas da comunidade React. Ela tem como objetivo melhorar a experiência do desenvolvedor e do usuário, pois acreditamos que elas são complementares e andam de mãos dadas.
101103

102-
Somos gratos a [todos que contribuiram](https://github.com/facebookincubator/create-react-app/graphs/contributors), seja com código, documentação, ou ajudando outras pessoas. Gostaríamos de agradecer especialmente [Joe Haddad](https://github.com/timer) pela sua ajuda inestimável na menutenção do projeto.
104+
Somos gratos a [todos que contribuíram](https://github.com/facebookincubator/create-react-app/graphs/contributors), seja com código, documentação, ou ajudando outras pessoas. Gostaríamos de agradecer especialmente [Joe Haddad](https://github.com/timer) pela sua ajuda inestimável na manutenção do projeto.
103105

104106
Estamos empolgados em trazer essas melhorias para todos que usam o Create React App, e estamos ansiosos por mais dos seus comentários e contribuições.
105107

0 commit comments

Comments
 (0)