Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history 
Co-Authored-By: felipemfp <felipemfpontes@gmail.com>
  • Loading branch information
@halian-vilela @felipemfp
halian-vilela and felipemfp committed Mar 21, 2019
1 parent 2f88011 commit 211979b
Showing 1 changed file with 15 additions and 15 deletions.
30 changes: 15 additions & 15 deletions content/blog/2018-10-01-create-react-app-v2.md
View file
Expand Up @@ -3,13 +3,13 @@ title: "Create React App 2.0: Babel 7, Sass e Mais"
author: [timer, gaearon]
---

Create React App 2.0 foi lançado hoje e traz o equivalente a um ano de melhoria numa única atualização de dependência.
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 de compilação](/docs/create-a-new-react-app.html), 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](https://github.com/facebook/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 de compilação e testes para você.
Apesar do React por si só [não precisar de nenhuma dependência para o build](/docs/create-a-new-react-app.html), 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](https://github.com/facebook/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 nas quais ele depende já lançaram novas versões contendo novos recursos e melhorias de desempenho: [Babel 7](https://babeljs.io/blog/2018/08/27/7.0.0), [webpack 4](https://medium.com/webpack/webpack-4-released-today-6cdb994702d4) e [Jest 23](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing.html). 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](https://github.com/facebook/create-react-app/graphs/contributors) tem se mantido ocupados nos últimos meses: **migrando a configuração e dependências para que você não precise fazer sozinho**.
Várias ferramentas das quais ele depende já lançaram novas versões contendo novos recursos e melhorias de desempenho: [Babel 7](https://babeljs.io/blog/2018/08/27/7.0.0), [webpack 4](https://medium.com/webpack/webpack-4-released-today-6cdb994702d4) e [Jest 23](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing.html). 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](https://github.com/facebook/create-react-app/graphs/contributors) 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 está fora do período _beta_, vamos ver o que é novo e como podemos testá-lo!
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
>
Expand All @@ -21,18 +21,18 @@ Aqui está um pequeno resumo das novidades nesse lançamento:

* 🎉 Mais opções de estilização: você pode usar [Sass](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-sass-stylesheet) e [CSS Modules](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-modules-stylesheet) por padrão.
* 🐠 Atualizamos para [Babel 7](https://babeljs.io/blog/2018/08/27/7.0.0), incluindo suporte para [a sintaxe de Fragmento React](/docs/fragments.html#short-syntax) e várias correções de erros.
* 📦 Atualizamos para [webpack 4](https://medium.com/webpack/webpack-4-released-today-6cdb994702d4), que automaticamente divide seus bundles de JS mais inteligentemente.
* 📦 Atualizamos para [webpack 4](https://medium.com/webpack/webpack-4-released-today-6cdb994702d4), que automaticamente divide seus bundles de JS de maneira mais inteligente.
* 🃏 Atualizamos para [Jest 23](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing.html), que inclui um [mode interativo](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing#interactive-snapshot-mode) para revisar _snapshots_.
* 💄 Adicionamos [PostCSS](https://preset-env.cssdb.org/features#stage-3) para você utilizar novas funcionalidades do CSS em navegadores antigos.
* 💎 Você usar [Apollo](https://github.com/leoasis/graphql-tag.macro#usage), [Relay Modern](https://github.com/facebook/relay/pull/2171#issuecomment-411459604), [MDX](https://github.com/facebook/create-react-app/issues/5149#issuecomment-425396995) e outros transformadores [Babel Macros](https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros) de terceiros.
* 🌠 Agora você pode [import um SVG como componente React](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-svgs) e utilizá-lo no JSX.
* 💎 Você pode usar [Apollo](https://github.com/leoasis/graphql-tag.macro#usage), [Relay Modern](https://github.com/facebook/relay/pull/2171#issuecomment-411459604), [MDX](https://github.com/facebook/create-react-app/issues/5149#issuecomment-425396995) e outros transformadores [Babel Macros](https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros) de terceiros.
* 🌠 Agora você pode [importar um SVG como componente React](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-svgs) e utilizá-lo no JSX.
* 🐈 Você pode testar o novo modo experimental [Yarn Plug'n'Play](https://github.com/yarnpkg/rfcs/pull/101) que remove a necessidade de `node_modules`.
* 🕸 Agora você pode [usar sua própria implementação de proxy](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#configuring-the-proxy-manually) em desenvolvimento para coincidir com a API do seu servidor.
* 🚀 Agora você pode usar [pacotes escritos para as mais novas versões de Node](https://github.com/sindresorhus/ama/issues/446#issuecomment-281014491) sem quebrar a compilação.
* ✂️ Agora você pode opcionalmente conseguir um CSS bundle menor se você apenas planeja suportar apenas navegadores modernos.
* 🚀 Agora você pode usar [pacotes escritos para as mais novas versões de Node](https://github.com/sindresorhus/ama/issues/446#issuecomment-281014491) 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](https://developers.google.com/web/tools/workbox/) do Google.

**Todas essas funcionalidades estão disponíveis por padrão** -- para ativá-las, siga as instruções acima.
**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 {#starting-a-project-with-create-react-app-20}

Expand All @@ -42,7 +42,7 @@ Se você quer **usar o modelo antigo 1.x** por alguma razão, você pode fazer i

## Atualizando um Projeto para o Create React App 2.0 {#updating-a-project-to-create-react-app-20}

Atualizando um projeto não ejetado para Create React App 2.0 deve ser sem complicações. Abra o `package.json` na raiz do seu projeto e encontre o `react-scripts` nele.
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`:

Expand All @@ -51,24 +51,24 @@ Agora altere a versão dele para `2.0.3`:
"react-scripts": "2.0.3"
```

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

<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">working here... thanks for all the new functionality 👍</p>&mdash; Stephen Haney (@sdothaney) <a href="https://twitter.com/sdothaney/status/1046822703116607490?ref_src=twsrc%5Etfw">October 1, 2018</a></blockquote>

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](https://developer.mozilla.org/pt-BR/docs/Glossario/Polyfill) dependendo se você planeja suportar navegadores modernos ou antigos.
**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](https://developer.mozilla.org/pt-BR/docs/Glossario/Polyfill) 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](https://github.com/facebook/create-react-app/releases/tag/v2.0.3). Há algumas mudanças radicais nesse lançamento, 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](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md) agora é opcional** para reduzir o tamanho de [polyfills](https://developer.mozilla.org/pt-BR/docs/Glossario/Polyfill).
**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](https://github.com/facebook/create-react-app/releases/tag/v2.0.3). 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](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md) agora é opcional** para reduzir o tamanho de [polyfills](https://developer.mozilla.org/pt-BR/docs/Glossario/Polyfill).

**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}
## Mudanças Radicais (Breaking Changes) {#breaking-changes}

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

Expand Down

0 comments on commit 211979b

Please sign in to comment.