diff --git a/content/blog/2015-09-02-new-react-developer-tools.md b/content/blog/2015-09-02-new-react-developer-tools.md index 1651cf215..b6bc9be3d 100644 --- 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 new file mode 100644 index 000000000..8e52dfae3 --- /dev/null +++ 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 `
`, React Native ``) 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 index 3f25b0ef9..c2c8c6c50 100644 --- 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 index 401bad817..060dfefdb 100644 --- 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 index cfe69fa5a..f710076d0 100644 --- 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 index 31c8f19d9..514fd52a0 100644 --- 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 index c0a5a0237..223511d44 100644 --- 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 index 6d9f6e276..cfc4e982b 100644 --- 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 index fd56942e4..bf46a523d 100644 --- 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 index fa3fcff0a..30a888eae 100644 --- 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 index 8b452cf4e..3d77aae31 100644 --- 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,
{true}
``` -Isso pode ser útil para renderizar condicionalmente elementos React. Esse JSX só renderiza um `
` se `showHeader` for `true`: +Isso pode ser útil para renderizar condicionalmente elementos React. Esse JSX renderiza o componente `
` apenas se `showHeader` for `true`: ```js{2}
diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index c2911673a..111962734 100644 --- 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**: - -
Como habilitar os destaques de alteração (highlight updates)
- -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: - -
Exemplo dos destaques de alterações do React DevTools
- -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 index f65dbd23a..58a9e41c9 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -44,7 +44,7 @@ render(
- + ); ``` diff --git a/content/docs/reference-test-renderer.md b/content/docs/reference-test-renderer.md index 7447847aa..de07481d3 100644 --- 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 index 238f99350..061d0332b 100644 --- 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 index 9f5d2f32b..2de584b1f 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -88,13 +88,13 @@ 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: @@ -102,7 +102,7 @@ Então adicione o preset `flow` à sua [configuração do Babel](https://babeljs ```js{3} { "presets": [ - "flow", + "@babel/preset-flow", "react" ] } diff --git a/content/docs/testing-recipes.md b/content/docs/testing-recipes.md index 609d3d74a..dd7efa5b4 100644 --- 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 index cf2de4c44..5bccd1fc4 100644 --- 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 new file mode 100644 index 000000000..287c66757 Binary files /dev/null and b/content/images/blog/devtools-component-filters.gif differ diff --git a/content/images/blog/devtools-v4-screenshot.png b/content/images/blog/devtools-v4-screenshot.png new file mode 100644 index 000000000..83a67d548 Binary files /dev/null and b/content/images/blog/devtools-v4-screenshot.png differ diff --git a/content/languages.yml b/content/languages.yml index cd9d70744..51fb6f8af 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -59,6 +59,10 @@ translated_name: हिन्दी code: hi status: 0 +- name: Hungarian + translated_name: magyar + code: hu + status: 0 - name: Armenian translated_name: Հայերեն code: hy @@ -174,7 +178,7 @@ - name: Vietnamese translated_name: Tiếng Việt code: vi - status: 0 + status: 1 - name: Simplified Chinese translated_name: 简体中文 code: zh-hans diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js index 1438ea94a..b911b25c9 100644 --- a/src/components/CodeEditor/CodeEditor.js +++ b/src/components/CodeEditor/CodeEditor.js @@ -271,7 +271,7 @@ class CodeEditor extends Component { _updateState(code, showJSX = true) { try { - let newState = { + const newState = { compiled: compileES5(code), error: null, };