diff --git a/content/blog/2017-04-07-react-v15.5.0.md b/content/blog/2017-04-07-react-v15.5.0.md index b5741f9ab..a8c1f09ea 100644 --- a/content/blog/2017-04-07-react-v15.5.0.md +++ b/content/blog/2017-04-07-react-v15.5.0.md @@ -3,30 +3,30 @@ title: "React v15.5.0" author: [acdlite] --- -It's been exactly one year since the last breaking change to React. Our next major release, React 16, will include some exciting improvements, including a [complete rewrite](https://www.youtube.com/watch?v=ZCuYPiUIONs) of React's internals. [We take stability seriously](/docs/design-principles.html#stability), and are committed to bringing those improvements to all of our users with minimal effort. +Faz exatamente um ano desde a última _breaking change_ no React. Nossa próxima _major_ release, React 16, irá incluir algumas melhorias excitantes, incluindo uma [reescrita completa](https://www.youtube.com/watch?v=ZCuYPiUIONs) das partes internas do React. [Nós levamos estabilidade a sério](/docs/design-principles.html#stability) e somos comprometidos a trazer essas melhorias para todos os nossos usuários com o menor esforço. -To that end, today we're releasing React 15.5.0. +Por isso, hoje, estamos lançando React 15.5.0. -### New Deprecation Warnings {#new-deprecation-warnings} +### Avisos de Novas Descontinuações {#new-deprecation-warnings} -The biggest change is that we've extracted `React.PropTypes` and `React.createClass` into their own packages. Both are still accessible via the main `React` object, but using either will log a one-time deprecation warning to the console when in development mode. This will enable future code size optimizations. +A maior mudança é que extraímos `React.PropTypes` e `React.createClass` para seus próprios pacotes. Ambos estão acessíveis através do objeto principal `React`, mas usar qualquer um irá causar em um aviso de descontinuação no console, quando estiver em ambiente de desenvolvimento. Isso irá habilitar futuras otimizações de tamanho de código. -These warnings will not affect the behavior of your application. However, we realize they may cause some frustration, particularly if you use a testing framework that treats `console.error` as a failure. +Esses avisos não irão afetar o comportamento da sua aplicação. Entretanto, nós sabemos que isso pode causar algumas frustrações, principalmente se você usa um _framework_ de testes que trata `console.error` como uma falha. -**Adding new warnings is not something we do lightly.** Warnings in React are not mere suggestions — they are integral to our strategy of keeping as many people as possible on the latest version of React. We never add warnings without providing an incremental path forward. +**Adicionar avisos não é algo que fazemos levianamente.** Avisos no React não são meras sugestões - eles são parte integral da nossa estratégia de deixar o maior número de pessoas com a última versão do React. Nós nunca adicionamos avisos sem prover um meio de seguir em frente. -So while the warnings may cause frustration in the short-term, we believe **prodding developers to migrate their codebases now prevents greater frustration in the future**. Proactively fixing warnings ensures you are prepared for the next major release. If your app produces zero warnings in 15.5, it should continue to work in 16 without any changes. +Então, enquanto esses avisos podem causar frustrações a curto prazo, nós acreditamos que **incitando os os desenvolvedores a migrar suas bases de código agora, previni frustrações futuras**. Arrumar avisos proativamente, garante que você está preparado para a próxima _major release_. Se a sua aplicação produz zero avisos na versão 15.5, deverá continuar funcionando na versão 16 sem precisar de mudanças. -For each of these new deprecations, we've provided a codemod to automatically migrate your code. They are available as part of the [react-codemod](https://github.com/reactjs/react-codemod) project. +Para cada uma dessas novas descontinuações, nós oferecemos um _codemod_ para migrar automaticamente o seu código. Eles estão disponíveis como parte do projeto [react-codemod](https://github.com/reactjs/react-codemod). -### Migrating from React.PropTypes {#migrating-from-reactproptypes} +### Migrando de React.PropTypes {#migrating-from-reactproptypes} -Prop types are a feature for runtime validation of props during development. We've extracted the built-in prop types to a separate package to reflect the fact that not everybody uses them. +_Prop types_ são funcionalidades para uma validação das _props_ em tempo de execução, durante o desenvolvimento. Nós extraímos as _prop types_ embutidas para um pacote separado, para refletir o fato de que nem todo mundo as utiliza. -In 15.5, instead of accessing `PropTypes` from the main `React` object, install the `prop-types` package and import them from there: +Na versão 15.5, em vez de acessar `PropTypes` do objeto principal `React`, instale o pacote `prop-types` separadamente e as importe de lá: ```js{11,16,25} -// Before (15.4 and below) +// Antes (15.4 ou anterior) import React from 'react'; class Component extends React.Component { @@ -39,7 +39,7 @@ Component.propTypes = { text: React.PropTypes.string.isRequired, } -// After (15.5) +// Depois (15.5) import React from 'react'; import PropTypes from 'prop-types'; @@ -54,27 +54,27 @@ Component.propTypes = { }; ``` -The [codemod](https://github.com/reactjs/react-codemod#react-proptypes-to-prop-types) for this change performs this conversion automatically. Basic usage: +O [_codemod_](https://github.com/reactjs/react-codemod#react-proptypes-to-prop-types) para essas mudanças realiza essa conversão automaticamente. Basicamente use: ```bash -jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js +jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js ``` +As API's de `propTypes`, `contextTypes`, e `childContextTypes` irão funcionar exatamente como antes. A única mudança é que os validadores embutidos agora estão em um pacote separado. -The `propTypes`, `contextTypes`, and `childContextTypes` APIs will work exactly as before. The only change is that the built-in validators now live in a separate package. +Você também pode considerar usar o [Flow](https://flow.org/) para checar a tipagem estática do seu código JavaScript, incluindo [_React components_](https://flow.org/en/docs/react/components/). -You may also consider using [Flow](https://flow.org/) to statically type check your JavaScript code, including [React components](https://flow.org/en/docs/react/components/). +### Migrando de React.createClass {#migrating-from-reactcreateclass} -### Migrating from React.createClass {#migrating-from-reactcreateclass} +Quando React foi lançado, não havia um jeito apropriado de criar classes em JavaScript, então nós fornecemos nosso próprio: `React.createClass`. -When React was initially released, there was no idiomatic way to create classes in JavaScript, so we provided our own: `React.createClass`. +Mais tarde, classes foram adicionadas à linguagem como parte da ES2015, então nós adicionamos a capacidade de criar componentes React usando as classes do JavaScript. **Junto de componentes funcionais, classes em JavaScript são o [jeito desejável de criar componentes em React](/docs/components-and-props.html#functional-and-class-components).** -Later, classes were added to the language as part of ES2015, so we added the ability to create React components using JavaScript classes. **Along with function components, JavaScript classes are now the [preferred way to create components in React](/docs/components-and-props.html#functional-and-class-components).** +Para os seus componentes que usam `createClass`, nós recomendamos que você migre para as classes em JavaScript. Entretanto, se você tem componentes que dependem de _mixins_, convertê-los para classes pode não ser imediatamente factível. Então, `create-react-class` está disponível no _npm_ como um substituto. -For your existing `createClass` components, we recommend that you migrate them to JavaScript classes. However, if you have components that rely on mixins, converting to classes may not be immediately feasible. If so, `create-react-class` is available on npm as a drop-in replacement: ```js{4,13,15} -// Before (15.4 and below) +// Antes (15.4 ou anterior) var React = require('react'); var Component = React.createClass({ @@ -84,7 +84,7 @@ var Component = React.createClass({ } }); -// After (15.5) +// Depois (15.5) var React = require('react'); var createReactClass = require('create-react-class'); @@ -96,60 +96,60 @@ var Component = createReactClass({ }); ``` -Your components will continue to work the same as they did before. +Seus componentes vão continuar funcionando como estavam anteriormente. -The [codemod](https://github.com/reactjs/react-codemod#explanation-of-the-new-es2015-class-transform-with-property-initializers) for this change attempts to convert a `createClass` component to a JavaScript class, with a fallback to `create-react-class` if necessary. It has converted thousands of components internally at Facebook. +O [codemod](https://github.com/reactjs/react-codemod#explanation-of-the-new-es2015-class-transform-with-property-initializers) para essas mudanças tenta converter um componente que usa `createClass` para uma classe em JavaScript, com um _fallback_ para `create-react-class` se necessário. Isso já foi usado para converter milahres de componentes internamente no Facebook. -Basic usage: +Modo de Usar: ```bash -jscodeshift -t react-codemod/transforms/class.js path/to/components +jscodeshift -t react-codemod/transforms/class.js caminho/para/componentes ``` -### Discontinuing support for React Addons {#discontinuing-support-for-react-addons} +### Suspensão do Suporte Para React _Addons_ {#discontinuing-support-for-react-addons} -We're discontinuing active maintenance of React Addons packages. In truth, most of these packages haven't been actively maintained in a long time. They will continue to work indefinitely, but we recommend migrating away as soon as you can to prevent future breakages. +Nós estamos suspendendo a manutenção ativa dos pacotes React _Addons_. De fato, muitos desses pacotes não estão sendo mantidos ativamente há muito tempo. Eles continuarão funcionando por tempo indeterminado, mas nós recomendamos removê-los o mais rápido possível para prevenir problemas futuros. -- **react-addons-create-fragment** – React 16 will have first-class support for fragments, at which point this package won't be necessary. We recommend using arrays of keyed elements instead. -- **react-addons-css-transition-group** - Use [react-transition-group/CSSTransitionGroup](https://github.com/reactjs/react-transition-group) instead. Version 1.1.1 provides a drop-in replacement. -- **react-addons-linked-state-mixin** - Explicitly set the `value` and `onChange` handler instead. -- **react-addons-pure-render-mixin** - Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead. -- **react-addons-shallow-compare** - Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead. -- **react-addons-transition-group** - Use [react-transition-group/TransitionGroup](https://github.com/reactjs/react-transition-group) instead. Version 1.1.1 provides a drop-in replacement. -- **react-addons-update** - Use [immutability-helper](https://github.com/kolodny/immutability-helper) instead, a drop-in replacement. -- **react-linked-input** - Explicitly set the `value` and `onChange` handler instead. +- **react-addons-create-fragment** – React 16 terá suporte de primeira classe para fragmentos, a um ponto em que esse pacote não será mais necessário. Por outro lado, nós recomendamos usar _arrays_ com elementos com chaves. +- **react-addons-css-transition-group** - Usar [react-transition-group/CSSTransitionGroup](https://github.com/reactjs/react-transition-group) como alternativa. A versão 1.1.1 fornece um substituto. +- **react-addons-linked-state-mixin** - Explicitamente coloque os _handlers_ `value` e `onChange` como alternativa. +- **react-addons-pure-render-mixin** - Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) como alternativa. +- **react-addons-shallow-compare** - Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) como alternativa. +- **react-addons-transition-group** - Use [react-transition-group/TransitionGroup](https://github.com/reactjs/react-transition-group) como alternativa. A versão 1.1.1 fornece um substituto. +- **react-addons-update** - Use [immutability-helper](https://github.com/kolodny/immutability-helper) como alternativa. +- **react-linked-input** - Explicitamente coloque os _handlers_ `value` e `onChange` como alternativa. -We're also discontinuing support for the `react-with-addons` UMD build. It will be removed in React 16. +Nós também estamos descontinuando o suporte para a _build UMD_ `react-with-addons`. Ela será removida na versão 16 do React. ### React Test Utils {#react-test-utils} -Currently, the React Test Utils live inside `react-addons-test-utils`. As of 15.5, we're deprecating that package and moving them to `react-dom/test-utils` instead: +Atualmente, _React Test Utils_ está dentro de `react-addons-test-utils`. Como outras coisas da versão 15.5, nós estamos descontinuando o pacote e movendo-o para `react-dom/test-utils` como alternativa: ```js -// Before (15.4 and below) +// Antes (15.4 ou anterior) import TestUtils from 'react-addons-test-utils'; -// After (15.5) +// Depois (15.5) import TestUtils from 'react-dom/test-utils'; ``` -This reflects the fact that what we call the Test Utils are really a set of APIs that wrap the DOM renderer. +Isso reflete o fato de que importar todas as _Test Utils_ são um conjunto de _API's_ que englobam o renderizador da DOM. -The exception is shallow rendering, which is not DOM-specific. The shallow renderer has been moved to `react-test-renderer/shallow`. +A exceção é a renderização superficial, que não utiliza a DOM. A Renderização superficial foi movida para `react-test-renderer/shallow`. ```js{2,5} -// Before (15.4 and below) +// Antes (15.4 ou anterior) import { createRenderer } from 'react-addons-test-utils'; -// After (15.5) +// Depois (15.5) import { createRenderer } from 'react-test-renderer/shallow'; ``` --- -## Acknowledgements {#acknowledgements} +## Agradecimentos {#acknowledgements} -A special thank you to these folks for transferring ownership of npm package names: +Um grande agradecimento para essas pessoas que transferiram o domínio dos pacotes no _npm_: - [Jason Miller](https://github.com/developit) - [Aaron Ackerman](https://github.com/aackerman) @@ -157,71 +157,70 @@ A special thank you to these folks for transferring ownership of npm package nam --- -## Installation {#installation} +## Instalação {#installation} -We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started. +Nós recomendamos usar o [Yarn](https://yarnpkg.com/) ou [npm](https://www.npmjs.com/) para o gerenciamento de dependências do front-end. Se você não conhece muito sobre gerenciadores de pacotes, a [documentação do Yarn](https://yarnpkg.com/en/docs/getting-started) é um bom lugar para começar. -To install React with Yarn, run: +Para instalar React usando Yarn, execute: ```bash yarn add react@^15.5.0 react-dom@^15.5.0 ``` -To install React with npm, run: +Para instalar React usando npm, execute: ```bash npm install --save react@^15.5.0 react-dom@^15.5.0 ``` +Nós recomendamos usar um compilador como [webpack](https://webpack.js.org/) ou [Browserify](http://browserify.org/) para que você consiga escrever um código modular e compilar tudo em pacotes pequenos e com tempo de carregamento otimizados. -We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time. +Lembre que por padrão, React roda checagens extras e provê avisos úteis no modo de desenvolvimento. Quando fazer _deploy_ da sua aplicação, lembre de [compilar em modo de produção](/docs/installation.html#development-and-production-versions). -Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to [compile it in production mode](/docs/installation.html#development-and-production-versions). - -In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can [include as script tags](/docs/installation.html#using-a-cdn) on your page: +No caso de voê não usar um compilador, nós oferecemos compilações pré-instaladas nos pacotes do npm que podem ser [incluídas como tags script](/docs/installation.html#using-a-cdn) na sua página: * **React** - Dev build with warnings: [react/dist/react.js](https://unpkg.com/react@15.5.0/dist/react.js) - Minified build for production: [react/dist/react.min.js](https://unpkg.com/react@15.5.0/dist/react.min.js) -* **React with Add-Ons** - Dev build with warnings: [react/dist/react-with-addons.js](https://unpkg.com/react@15.5.0/dist/react-with-addons.js) - Minified build for production: [react/dist/react-with-addons.min.js](https://unpkg.com/react@15.5.0/dist/react-with-addons.min.js) -* **React DOM** (include React in the page before React DOM) - Dev build with warnings: [react-dom/dist/react-dom.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom.js) - Minified build for production: [react-dom/dist/react-dom.min.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom.min.js) -* **React DOM Server** (include React in the page before React DOM Server) - Dev build with warnings: [react-dom/dist/react-dom-server.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom-server.js) - Minified build for production: [react-dom/dist/react-dom-server.min.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom-server.min.js) - -We've also published version `15.5.0` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower. + Compilação para o modo de desenvolvimento com avisos: [react/dist/react.js](https://unpkg.com/react@15.5.0/dist/react.js) + Compilação minificada para produção: [react/dist/react.min.js](https://unpkg.com/react@15.5.0/dist/react.min.js) +* **React com Add-Ons** + Compilação para o modo de desenvolvimento com avisos: [react/dist/react-with-addons.js](https://unpkg.com/react@15.5.0/dist/react-with-addons.js) + Compilação minificada para produção: [react/dist/react-with-addons.min.js](https://unpkg.com/react@15.5.0/dist/react-with-addons.min.js) +* **React DOM** (inclui React na página antes do React DOM) + Compilação para o modo de desenvolvimento com avisos: [react-dom/dist/react-dom.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom.js) + Compilação minificada para produção: [react-dom/dist/react-dom.min.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom.min.js) +* **React DOM Server** (inclui React na página antes do React DOM Server) + Compilação para o modo de desenvolvimento com avisos: [react-dom/dist/react-dom-server.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom-server.js) + Compilação minificada para produção: [react-dom/dist/react-dom-server.min.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom-server.min.js) + +Nós também publicamos as versões `15.5.0` dos pacotes `react`, `react-dom` e _addons_ no _npm_ e o pacote `react` no bower. --- ## Changelog {#changelog} -## 15.5.0 (April 7, 2017) {#1550-april-7-2017} +## 15.5.0 (7 de Abril de 2017) {#1550-april-7-2017} ### React {#react} -* Added a deprecation warning for `React.createClass`. Points users to create-react-class instead. ([@acdlite](https://github.com/acdlite) in [d9a4fa4](https://github.com/facebook/react/commit/d9a4fa4f51c6da895e1655f32255cf72c0fe620e)) -* Added a deprecation warning for `React.PropTypes`. Points users to prop-types instead. ([@acdlite](https://github.com/acdlite) in [043845c](https://github.com/facebook/react/commit/043845ce75ea0812286bbbd9d34994bb7e01eb28)) -* Fixed an issue when using `ReactDOM` together with `ReactDOMServer`. ([@wacii](https://github.com/wacii) in [#9005](https://github.com/facebook/react/pull/9005)) -* Fixed issue with Closure Compiler. ([@anmonteiro](https://github.com/anmonteiro) in [#8895](https://github.com/facebook/react/pull/8895)) -* Another fix for Closure Compiler. ([@Shastel](https://github.com/Shastel) in [#8882](https://github.com/facebook/react/pull/8882)) -* Added component stack info to invalid element type warning. ([@n3tr](https://github.com/n3tr) in [#8495](https://github.com/facebook/react/pull/8495)) +* Adicionado aviso de descontinuação para `React.createClass`. Sugere o uso de _create-react-class_ como alternativa. ([@acdlite](https://github.com/acdlite) em [d9a4fa4](https://github.com/facebook/react/commit/d9a4fa4f51c6da895e1655f32255cf72c0fe620e)) +* Adicionado aviso de descontinuação para `React.PropTypes`. Sugere o uso de _prop-types_ como alternativa. ([@acdlite](https://github.com/acdlite) em [043845c](https://github.com/facebook/react/commit/043845ce75ea0812286bbbd9d34994bb7e01eb28)) +* Consertado um problema quando usando `ReactDOM` junto com `ReactDOMServer`. ([@wacii](https://github.com/wacii) em [#9005](https://github.com/facebook/react/pull/9005)) +* Consertado problema com _Closure Compiler_. ([@anmonteiro](https://github.com/anmonteiro) em [#8895](https://github.com/facebook/react/pull/8895)) +* Outro conserto para o _Closure Compiler_. ([@Shastel](https://github.com/Shastel) em [#8882](https://github.com/facebook/react/pull/8882)) +* Adicionada pilha de informações de componentes para avisos de tipo de elemento inválido. ([@n3tr](https://github.com/n3tr) em [#8495](https://github.com/facebook/react/pull/8495)) ### React DOM {#react-dom} -* Fixed Chrome bug when backspacing in number inputs. ([@nhunzaker](https://github.com/nhunzaker) in [#7359](https://github.com/facebook/react/pull/7359)) -* Added `react-dom/test-utils`, which exports the React Test Utils. ([@bvaughn](https://github.com/bvaughn)) +* Consertado bug no Chrome na deleção em inputs de número. ([@nhunzaker](https://github.com/nhunzaker) em [#7359](https://github.com/facebook/react/pull/7359)) +* Adicionado `react-dom/test-utils`, que exporta o React Test Utils. ([@bvaughn](https://github.com/bvaughn)) ### React Test Renderer {#react-test-renderer} -* Fixed bug where `componentWillUnmount` was not called for children. ([@gre](https://github.com/gre) in [#8512](https://github.com/facebook/react/pull/8512)) -* Added `react-test-renderer/shallow`, which exports the shallow renderer. ([@bvaughn](https://github.com/bvaughn)) +* Consertado bug onde `componentWillUnmount` não era chamado para _children_. ([@gre](https://github.com/gre) em [#8512](https://github.com/facebook/react/pull/8512)) +* Adicionado `react-test-renderer/shallow`, que exporta a renderização superficial. ([@bvaughn](https://github.com/bvaughn)) ### React Addons {#react-addons} -* Last release for addons; they will no longer be actively maintained. -* Removed `peerDependencies` so that addons continue to work indefinitely. ([@acdlite](https://github.com/acdlite) and [@bvaughn](https://github.com/bvaughn) in [8a06cd7](https://github.com/facebook/react/commit/8a06cd7a786822fce229197cac8125a551e8abfa) and [67a8db3](https://github.com/facebook/react/commit/67a8db3650d724a51e70be130e9008806402678a)) -* Updated to remove references to `React.createClass` and `React.PropTypes` ([@acdlite](https://github.com/acdlite) in [12a96b9](https://github.com/facebook/react/commit/12a96b94823d6b6de6b1ac13bd576864abd50175)) -* `react-addons-test-utils` is deprecated. Use `react-dom/test-utils` and `react-test-renderer/shallow` instead. ([@bvaughn](https://github.com/bvaughn)) +* Última versão para os _addons_; eles não serão mais mantidos ativamente. +* Removidos `peerDependencies` para que os _addons_ continuem funcionando indeterminadamente. ([@acdlite](https://github.com/acdlite) e [@bvaughn](https://github.com/bvaughn) em [8a06cd7](https://github.com/facebook/react/commit/8a06cd7a786822fce229197cac8125a551e8abfa) e [67a8db3](https://github.com/facebook/react/commit/67a8db3650d724a51e70be130e9008806402678a)) +* Atualizado para remover referências de `React.createClass` e `React.PropTypes` ([@acdlite](https://github.com/acdlite) em [12a96b9](https://github.com/facebook/react/commit/12a96b94823d6b6de6b1ac13bd576864abd50175)) +* `react-addons-test-utils` está descontinuado. Use `react-dom/test-utils` e `react-test-renderer/shallow` como alternativa. ([@bvaughn](https://github.com/bvaughn))