reactjs · jhonmike · Aug 27, 2019 · Aug 12, 2019 · Aug 14, 2019 · Aug 14, 2019
diff --git a/content/blog/2015-09-02-new-react-developer-tools.md b/content/blog/2015-09-02-new-react-developer-tools.md
@@ -20,7 +20,7 @@ It contains a handful of new features, including:
 
 ## Installation {#installation}
 
-Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and on [Mozilla Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox. If you're developing using React, we highly recommend installing these devtools.
+Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and on [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox. If you're developing using React, we highly recommend installing these devtools.
 
 If you already have the Chrome extension installed, it should autoupdate within the next week. You can also head to `chrome://extensions` and click "Update extensions now" if you'd like to get the new version today. If you installed the devtools beta, please remove it and switch back to the version from the store to make sure you always get the latest updates and bug fixes.
 

diff --git a/content/blog/2019-08-15-new-react-devtools.md b/content/blog/2019-08-15-new-react-devtools.md
@@ -0,0 +1,79 @@
+---
+title: "Introducing the New React DevTools"
+author: [bvaughn]
+---
+We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!
+
+## What's changed?
+
+A lot has changed in version 4!
+At a high level, this new version should offer significant performance gains and an improved navigation experience.
+It also offers full support for React Hooks, including inspecting nested objects.
+
+![DevTools version 4 screenshot](../images/blog/devtools-v4-screenshot.png)
+
+[Visit the interactive tutorial](https://react-devtools-tutorial.now.sh/) to try out the new version or [see the changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) for demo videos and more details.
+
+## Which versions of React are supported?
+
+**`react-dom`**
+
+* `0`-`14.x`: Not supported
+* `15.x`: Supported (except for the new component filters feature)
+* `16.x`: Supported
+
+**`react-native`**
+* `0`-`0.61`: Not supported
+* `0.62`: Will be supported (when 0.62 is released)
+
+## How do I get the new DevTools?
+
+React DevTools is available as an extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).
+If you have already installed the extension, it should update automatically within the next couple of hours.
+
+If you use the standalone shell (e.g. in React Native or Safari), you can install the new version [from NPM](https://www.npmjs.com/package/react-devtools):
+
+```shell
+npm install -g react-devtools@^4
+```
+
+## Where did all of the DOM elements go?
+
+The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies.
+Host nodes (e.g. HTML `<div>`, React Native `<View>`) are *hidden by default*, but this filter can be disabled:
+
+![DevTools component filters](../images/blog/devtools-component-filters.gif)
+
+## How do I get the old version back?
+
+If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM:
+
+```shell
+npm install --dev react-devtools@^3
+```
+
+For older versions of React DOM (v0.14 or earlier) you will need to build the extension from source:
+
+```shell
+# Checkout the extension source
+git clone https://github.com/facebook/react-devtools
+
+cd react-devtools
+
+# Checkout the previous release branch
+git checkout v3
+
+# Install dependencies and build the unpacked extension
+yarn install
+yarn build:extension
+
+# Follow the on-screen instructions to complete installation
+```
+
+## Thank you!
+
+We'd like to thank everyone who tested the early release of DevTools version 4.
+Your feedback helped improve this initial release significantly.
+
+We still have many exciting features planned and feedback is always welcome!
+Please feel free to open a [GitHub issue](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools) or tag [@reactjs on Twitter](https://twitter.com/reactjs).
diff --git a/content/community/articles.md b/content/community/articles.md
@@ -13,4 +13,4 @@ permalink: community/articles.html
 - [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) - O Cronograma recomendado por Dave Ceddia para aprender React e seu ecossistema.
 - [Simple React Development in 2017](https://hackernoon.com/simple-react-development-in-2017-113bd563691f) - O Guia de Joshua Comeau para mostrar como é fácil começar o desenvolvimento moderno com React.
 - [Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/) - O Guia visual de Dave Ceddia para o estado ("state") do React.
-- [The Hands-On Guide to Learning React Hooks](https://www.telerik.com/kendo-react-ui/react-hooks-guide/)
+- [The Hands-On Guide to Learning React Hooks](https://www.telerik.com/kendo-react-ui/react-hooks-guide/) - Guia passo a passo de Eric Bishard para aprender React Hooks.
diff --git a/content/community/conferences.md b/content/community/conferences.md
@@ -80,7 +80,18 @@ Você sabe de alguma conferência local sobre ReactJS? Adicione-a aqui! (Por fav
 ### Render-Atlanta 2020 {#render-atlanta-2020}
 4 a 6 de maio de 2020. Atlanta, GA, EUA.
 
-[Website](https://renderatl.com)
+[Website](https://renderatl.com) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) 
+
+### React Finland 2020 {#react-finland-2020}
+26 a 29 de maio de 2020. Helsinque, Finlândia
+
+[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland)
+
+### React Next 2020 {#react-next-2020}
+15 de junho de 2020. Telavive, Israel.
+
+[Website](https://react-next.com/) - [Twitter](https://twitter.com/reactnext) - [Facebook](https://www.facebook.com/ReactNext2016/) 
+
 
 ## Conferências passadas {#past-conferences}
 

diff --git a/content/community/courses.md b/content/community/courses.md
@@ -8,6 +8,8 @@ permalink: community/courses.html
 
 ## Cursos Gratuitos {#free-courses}
 
+- [Glitch: React Starter Kit](https://glitch.com/culture/react-starter-kit/) - Um curso em vídeo gratuito de 5 partes com exemplos de código interativos que ajudarão você a aprender React.
+
 - [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Curso introdutório do Codecademy para React.
 
 - [Egghead.io: Start Learning React](https://egghead.io/courses/start-learning-react) - Esta série de vídeos explora os fundamentos básicos do React para você começar.

diff --git a/content/community/meetups.md b/content/community/meetups.md
@@ -69,6 +69,7 @@ Você está organizando um Meetup de ReactJS? Adicione-o aqui! (Por favor, mante
 
 ## Índia {#india}
 * [Bangalore](https://www.meetup.com/ReactJS-Bangalore/)
+* [Chandigarh](https://www.meetup.com/Chandigarh-React-Developers/)
 * [Chennai](https://www.meetup.com/React-Chennai/)
 * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
 * [Jaipur](https://www.meetup.com/JaipurJS-Developer-Meetup/)
@@ -79,6 +80,9 @@ Você está organizando um Meetup de ReactJS? Adicione-o aqui! (Por favor, mante
 ## Israel {#israel}
 * [Tel Aviv](https://www.meetup.com/ReactJS-Israel/)
 
+## Malásia {#malaysia}
+* [Penang](https://www.facebook.com/groups/reactpenang/)
+
 ## Países Baixos (Holanda) {#netherlands}
 * [Amsterdam](https://www.meetup.com/React-Amsterdam/)
 

diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md
@@ -123,7 +123,7 @@ it('can render and update a counter', () => {
 
 - Não esqueça que disparando eventos DOM apenas funciona quando o conteúdo do DOM  é adicionado no `document`. Você pode usar um auxiliador como  [`react-testing-library`](https://testing-library.com/react) para reduzir o código de boilerplate.
 
-- O documento [`recipes`](/docs/recipes.html) contém mais detalhes sobre como `act()` se comporta, como exemplos e uso.
+- O documento [`recipes`](/docs/testing-recipes.html) contém mais detalhes sobre como `act()` se comporta, como exemplos e uso.
 
 * * *
 

diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md
@@ -218,7 +218,7 @@ Seu código-fonte está localizado em [`packages/react-reconciler`](https://gith
 
 ### Sistema de Eventos  {#event-system}
 
-O React implementa um sistema de eventos sintéticos que é agnóstico dos renderizadores e funciona com React DOM e React Native.Seu código-fonte está localizado em [`packages/events`](https://github.com/facebook/react/tree/master/packages/events).
+O React implementa um sistema de eventos sintéticos que é agnóstico dos renderizadores e funciona com React DOM e React Native.Seu código-fonte está localizado em [`packages/events`](https://github.com/facebook/react/tree/master/packages/react-events).
 
 Esse é um [vídeo com mais profundidade no código](https://www.youtube.com/watch?v=dRo_egw7tBc) (66 minutos).
 

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
@@ -64,13 +64,18 @@ Esta página responde algumas das perguntas mais frequentes sobre [Hooks](/docs/
 Começando com 16.8.0, React inclui uma implementação estável dos Hooks para:
 
 * React DOM
+* React Native
 * React DOM Server
 * React Test Renderer
 * React Shallow Renderer
 
 Note que **para habilitar Hooks, todos os pacotes precisam estar na versão 16.8.0 ou maior**. Hooks não vão funcionar se você esquecer de atualizar, por exemplo, o React DOM.
 
+<<<<<<< HEAD
 React Native 0.59 e superiores suportam Hooks.
+=======
+[React Native 0.59](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059) and above support Hooks.
+>>>>>>> 519a3aec91a426b0c8c9ae59e292d064df48c66a
 
 
 ### Preciso reescrever todos os meus componentes usando classe? {#do-i-need-to-rewrite-all-my-class-components}

diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md
@@ -31,7 +31,8 @@ Essa nova função `useState` é o primeiro "Hook" que nós iremos aprender, mas
 
 >Nota
 >
->React 16.8.0 é o primeiro release com suporte a Hooks. Ao atualizar, não se esqueça de atualizar todos os pacotes, incluindo React DOM. React Native terá suporte a Hooks no próximo stable release.
+>React 16.8.0 é o primeiro release com suporte a Hooks. Ao atualizar, não se esqueça de atualizar todos os pacotes, incluindo React DOM. 
+>React Native suporta Hooks desde [a versão 0.59 de React Native](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059).
 
 ## Introdução em Vídeo {#video-introduction}
 

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
@@ -423,7 +423,7 @@ Elementos filhos passados a um componente customizado podem ser qualquer coisa,
 <div>{true}</div>
 ```
 
-Isso pode ser útil para renderizar condicionalmente elementos React. Esse JSX só renderiza um `<Header />` se `showHeader` for `true`:
+Isso pode ser útil para renderizar condicionalmente elementos React. Esse JSX renderiza o componente `<Header />` apenas se `showHeader` for `true`:
 
 ```js{2}
 <div>

diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md
@@ -212,24 +212,6 @@ O React cria e mantém sua representação interna da UI renderizada. Ele inclui
 
 Quando uma propriedade ou estado de um componente é alterado, o React decide se uma atualização do DOM atual é necessária comparando o novo elemento retornado com o antigo. Quando eles não forem iguais, o React irá alterar o DOM.
 
-Você pode agora visualizar essas re-renderizações do virtual DOM como o React DevTools:
-
-- [Extensão para Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
-- [Extensão para Firefox](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/)
-- [Pacote separado](https://www.npmjs.com/package/react-devtools)
-
-No console de desenvolvedor selecione a opção **Highlight Updates** na aba de **React**:
-
-<center><img src="../images/blog/devtools-highlight-updates.png" style="max-width:100%; margin-top:10px;" alt="Como habilitar os destaques de alteração (highlight updates)" /></center>
-
-Interaja com sua página e você deve ver as bordas coloridas aparecendo ao redor de qualquer componente que foi re-renderizado. Isto faz com que você perceba re-renders que não são necessários. Você pode aprender mais sobre essa funcionalidade do React DevTools nesse [post](https://blog.logrocket.com/make-react-fast-again-part-3-highlighting-component-updates-6119e45e6833) do [Ben Edelstein](https://blog.logrocket.com/@edelstein).
-
-Considere esse exemplo:
-
-<center><img src="../images/blog/highlight-updates-example.gif" style="max-width:100%; margin-top:20px;" alt="Exemplo dos destaques de alterações do React DevTools" /></center>
-
-Perceba que quando nós estamos acessando o segundo _todo_, o primeiro todo também pisca na tela a cada tecla digitada. Isto significa que ele está sendo re-renderizando pelo React junto com o input. Isso algumas vez é chamado render desperdiçado (wasted render). Nós sabemos que ele é desnecessário porque o conteúdo do primeiro todo não tem nenhuma mudança, mas o React não sabe sobre isso.
-
 Embora o React somente altere os nós de DOM alterados, o re-rendering ainda leva algum tempo. Em muitos casos isso não é um problema, mas se a lentidão é perceptível, você pode aumentar velocidade dele sobrescrevendo a função de lifecycle `shouldComponentUpdate`, na qual é chamada antes do processo de re-rendering começar. A implementação padrão dessa função retorna `true`, deixando o React performar a alteração:
 
 ```javascript
@@ -401,37 +383,4 @@ function updateColorMap(colormap) {
 
 Se você está usando Create React App, ambos `Object.assign` e a sintaxe de espalhador de objeto estão disponíveis por padrão.
 
-## Usando Estruturas De Dados Mutáveis {#using-immutable-data-structures}
-
-[Immutable.js](https://github.com/facebook/immutable-js) é uma outra maneira de resolver esse problema. Ele fornece coleções persistentes e imutáveis que trabalham via compartilhamento estrutural:
-
-* *Imutabilidade*: uma vez criada, uma coleção não pode ser mais alterada.
-* *Persistência*: novas coleções podem ser criadas a partir de coleções antigas e uma mutação como um conjunto. A coleção original ainda é válida depois que a nova coleção é criada.
-* *Compartilhamento estrutural*: novas coleções são criadas usando o máximo possível de mesma estrutura original, reduzindo a cópia ao mínimo para melhorar a performance.
-
-Imutabilidade faz rastrear mudanças de forma barata. Uma mudança irá sempre resultar em um novo objeto onde nós somente precisaremos checar se a referência para o objeto mudou. Por exemplo, nesse exemplo de código JavaScript:
-
-
-```javascript
-const x = { foo: 'bar' };
-const y = x;
-y.foo = 'baz';
-x === y; // true
-```
-
-Embora `y` foi editado, desde que sua referência para o objeto `x`, essa comparação retorna `true`. Você pode escrever um código similar com immutable.js:
-
-```javascript
-const SomeRecord = Immutable.Record({ foo: null });
-const x = new SomeRecord({ foo: 'bar' });
-const y = x.set('foo', 'baz');
-const z = x.set('foo', 'bar');
-x === y; // false
-x === z; // true
-```
-
-Nesse caso, já que uma nova referência é retornada quando mutamos `x`, nós podemos usar a referência para checar a equalidade `(x === y)` para verificar que o novo valor armazenado em `y` é diferente que o valor original em `x`.
-
-Outras bibliotecas que podem ajudar a usar dados imutáveis são [Immer](https://github.com/mweststrate/immer), [immutability-helper](https://github.com/kolodny/immutability-helper), e [seamless-immutable](https://github.com/rtfeldman/seamless-immutable).
-
-Estruturas de dados imutáveis fornecem para você uma maneira barata para rastrear mudanças em objetos, no qual é tudo que nós precisamos para implementar `shouldComponentUpdate`. Isso pode oferecer a você um bom impulsionamento de performance.
+Quando você lida com objetos profundamente aninhados, atualizá-los de maneira imutável pode parecer complicado. Se você enfrentar esse problema, consulte [Immer](https://github.com/mweststrate/immer) or [immutability-helper](https://github.com/kolodny/immutability-helper). Essas bibliotecas permitem escrever código altamente legível sem perder os benefícios da imutabilidade.
diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md
@@ -44,7 +44,7 @@ render(
     <Profiler id="Main" onRender={callback}>
       <Main {...props} />
     </Profiler>
-    </App>
+  </App>
 );
 ```
 

diff --git a/content/docs/reference-test-renderer.md b/content/docs/reference-test-renderer.md
@@ -103,7 +103,7 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
 TestRenderer.create(element, options);
 ```
 
-Cria uma instância do `TestRenderer` com o elemento React fornecido. Este método não usa o DOM real, mas ainda renderiza completamente a árvore de componentes na memória para que você possa fazer verificações sobre ela. A instância retornada possui os seguintes métodos e propriedades.
+Cria uma instância do `TestRenderer` com o elemento React fornecido. Este método não usa o DOM real, mas ainda renderiza completamente a árvore de componentes na memória para que você possa fazer verificações sobre ela. Retorna uma [instância TestRender](#testrenderer-instance).
 
 ### `TestRenderer.act()` {#testrendereract}
 

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
@@ -14,7 +14,7 @@ Um componente com uma _render prop_ recebe uma função que retorna um elemento
 )}/>
 ```
 
-Bibliotecas que usam render props incluem [React Router](https://reacttraining.com/react-router/web/api/Route/render-func) e [Downshift](https://github.com/paypal/downshift).
+Bibliotecas que usam render props incluem [React Router](https://reacttraining.com/react-router/web/api/Route/render-func), [Downshift](https://github.com/paypal/downshift) e [Formik](https://github.com/jaredpalmer/formik).
 
 Nesse documento vamos discutir por que _render props_ são úteis e como escrevê-las.
 

diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md
@@ -88,21 +88,21 @@ Se você configurou o Babel manualmente no seu projeto, precisará instalar um p
 Se você usa [Yarn](https://yarnpkg.com/), execute:
 
 ```bash
-yarn add --dev babel-preset-flow
+yarn add --dev @babel/preset-flow
 ```
 
 Se você usa [npm](https://www.npmjs.com/), execute:
 
 ```bash
-npm install --save-dev babel-preset-flow
+npm install --save-dev @babel/preset-flow
 ```
 
 Então adicione o preset `flow` à sua [configuração do Babel](https://babeljs.io/docs/usage/babelrc/). Por exemplo, se você configura o Babel através do arquivo `.babelrc`, pode ficar parecido com isto:
 
 ```js{3}
 {
   "presets": [
-    "flow",
+    "@babel/preset-flow",
     "react"
   ]
 }

diff --git a/content/docs/testing-recipes.md b/content/docs/testing-recipes.md
@@ -14,8 +14,9 @@ Common testing patterns for React components.
 
 On this page, we will primarily use function components. However, these testing strategies don't depend on implementation details, and work just as well for class components too.
 
-- [Setup/Teardown ](#setup--teardown)
+- [Setup/Teardown](#setup--teardown)
 - [`act()`](#act)
+- [Rendering](#rendering)
 - [Data Fetching](#data-fetching)
 - [Mocking Modules](#mocking-modules)
 - [Events](#events)

diff --git a/content/docs/testing.md b/content/docs/testing.md
@@ -28,7 +28,7 @@ Different answers may work for different teams and products.
 
 ### Recommended Tools {#tools}
 
-**[Jest](https://facebook.github.io/jest/)** is a JavaScript test runner that lets you access the DOM via [`jsdom`](#mocking-a-rendering-surface). While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking [modules](#mocking-modules) and [timers](#mocking-timers) so you can have more control over how the code executes.
+**[Jest](https://facebook.github.io/jest/)** is a JavaScript test runner that lets you access the DOM via [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking [modules](/docs/testing-environments.html#mocking-modules) and [timers](/docs/testing-environments.html#mocking-timers) so you can have more control over how the code executes.
 
 **[React Testing Library](https://testing-library.com/react)** is a set of helpers that let you test React components without relying on their implementation details. This approach makes refactoring a breeze and also nudges you towards best practices for accessibility. Although it doesn't provide a way to "shallowly" render a component without its children, a test runner like Jest lets you do this by [mocking](/docs/testing-recipes.html#mocking-modules).
 

diff --git a/content/images/blog/devtools-component-filters.gif b/content/images/blog/devtools-component-filters.gif
diff --git a/content/images/blog/devtools-v4-screenshot.png b/content/images/blog/devtools-v4-screenshot.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -123,7 +123,7 @@ it('can render and update a counter', () => { @@
     - Não esqueça que disparando eventos DOM apenas funciona quando o conteúdo do DOM  é adicionado no `document`. Você pode usar um auxiliador como  [`react-testing-library`](https://testing-library.com/react) para reduzir o código de boilerplate.
-    - O documento [`recipes`](/docs/recipes.html) contém mais detalhes sobre como `act()` se comporta, como exemplos e uso.
+    - O documento [`recipes`](/docs/testing-recipes.html) contém mais detalhes sobre como `act()` se comporta, como exemplos e uso.
     * * *
@@ Expand Down @@