diff --git a/content/blog/2016-03-07-react-v15-rc1.md b/content/blog/2016-03-07-react-v15-rc1.md index 49066ef0c..9a0c19025 100644 --- a/content/blog/2016-03-07-react-v15-rc1.md +++ b/content/blog/2016-03-07-react-v15-rc1.md @@ -3,92 +3,93 @@ title: "React v15.0 Release Candidate" author: [zpao] --- -Sorry for the small delay in releasing this. As we said, we've been busy binge-watching House of Cards. That scene in the last episode where Francis and Claire Underwood ████████████████████████████████████. WOW! +Desculpe pelo pequeno atraso em liberar esta release. Como dissemos, estivemos ocupados assistindo House of Cards. Essa cena do último episódio onde Francis e Claire Underwood ████████████████████████████████████. WOW! -But now we're ready, so without further ado, we're shipping a release candidate for React v15 now. As a reminder, [we're switching to major versions](/blog/2016/02/19/new-versioning-scheme.html) to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we'll continue to follow semver like we've been doing since 2013. It's also worth noting that [we no longer actively support Internet Explorer 8](/blog/2016/01/12/discontinuing-ie8-support.html). We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8. +Mas agora estamos prontos, então sem mais delongas, estamos disponibilizando agora uma *release canditate* para o React v15. Como lembrete, [estamos mudando para versões principais](/blog/2016/02/19/new-versioning-scheme.html) para indicar que estamos utilizando o React em produção há bastante tempo. Esta release 15.0 segue a nossa versão anterior 0.14 e vamos continuar a seguir a semver como temos vindo fazendo desde 2013. Também vale ressaltar que [não suportaremos ativamente o Internet Explorer 8](/blog/2016/01/12/discontinuing-ie8-support.html). Acreditamos que o React funcionará em sua forma atual lá, mas não estaremos priorizando quaisquer esforços para corrigir novos problemas que afetam somente o IE8. -Please try it out before we publish the final release. Let us know if you run into any problems by filing issues on our [GitHub repo](https://github.com/facebook/react). +Por favor, experimente-o antes de nós publicarmos a versão final. Deixe-nos saber se você algum problema, crie issues em nosso [repositório no GitHub](https://github.com/facebook/react). -## Upgrade Guide {#upgrade-guide} +## Guia de Atualização {#upgrade-guide} -Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain. +Como sempre, temos algumas mudanças significativas nesta versão. Nós sabemos que mudanças podem ser dolorosas (a base de código do Facebook possui mais de 15.000 componentes), por isso sempre tentamos fazer alterações gradualmente a fim de minimizar a dor. -If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We've also laid some groundwork in the core to bring you some new capabilities in future releases. +Se o seu código estiver livre de avisos ao ser executado em versões abaixo do React 0.14, a atualização deverá ser fácil. A maior parte das alterações nesta versão ocorrem por trás das cortinas, impactando a forma com o React interage com o DOM. A outra mudança substancial é que o React agora suporta uma gama completa de elementos e atributos SVG. Além disso, temos um grande número de melhorias incrementais e avisos adicionais destinados a ajudar os desenvolvedores. Nós também estabelecemos algumas bases no core para trazer algumas novas capacidades em versões futuras. -See the changelog below for more details. +Veja o changelog abaixo para mais detalhes. -## Installation {#installation} +## Instalação {#installation} -We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages: +Recomendamos o uso do React a partir do `npm` e utilizando uma ferramenta como o browserify ou webpack para criar o seu código em um único bundle. Para instalar os dois pacotes: * `npm install --save react@15.0.0-rc.1 react-dom@15.0.0-rc.1` -Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster. +Lembre-se que, por padrão o React executa verificações extras e fornece avisos úteis no modo de desenvolvimento. Quando estiver fazendo o deploy da sua aplicação, defina a variável de ambiente `NODE_ENV` como `production` para utilizar o build de produção do React que não inclui os avisos de desenvolvimento e funciona significativamente mais rápido. -If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower. +Se você ainda não pode utilizar o `npm`, nós fornecemos compilações pré-construídas de navegador para sua conveniência, que também estão disponíveis no pacote `react` no bower. -* **React** - Dev build with warnings: - Minified build for production: +* **React** + Build de desenvolvimento com avisos: + Build minificada para produção: * **React with Add-Ons** - Dev build with warnings: - Minified build for production: + Build de desenvolvimento com avisos: + Build minificada para produção: * **React DOM** (include React in the page before React DOM) - Dev build with warnings: - Minified build for production: + Build de desenvolvimento com avisos: + Build minificada para produção: ## Changelog {#changelog} ### Major changes {#major-changes} -- #### `document.createElement` is in and `data-reactid` is out +- #### `document.createElement` está dentro e `data-reactid` está fora - There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the `data-reactid` attribute for each DOM node. While this will make it much more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use `document.createElement` on initial render. Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As we've all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node. + Houveram uma série de grandes mudanças em nossas interações com o DOM. Uma das mudanças mais perceptíveis é que não definimos mais o atributo `data-reactid` para cada nó do DOM. Embora isso torne muito mais difícil saber se um site está usando React, a vantagem é que o DOM é muito mais leve. Essa mudança possibilitou que alterássemos para usar `document.createElement` na renderização inicial. Anteriormente, geraríamos uma grande sequência de HTML e em seguida definíamos o `node.innerHTML`. Na época, foi decidido que isso seria mais rápido do que usar `document.createElement` para a maioria dos casos e navegadores que suportamos. Os navegadores continuaram a melhorar e, por isso, esmagadoramente, isso não é mais verdade. Usando o `createElement` podemos tornar outras partes do React mais rápidas. Os ids foram usados para mapear de volta os eventos para o componente React original, o que significa que tivemos que fazer um monte de trabalho em cada evento, mesmo que tenhamos cacheado esses dados fortemente. Conforme tivemos experiências, caching e caches particularmente inválidos, podem ser propensos a erros e vimos que torna-se difícil de reproduzir problemas ao longo dos anos como resultado. Agora podemos construir um mapeamento direto na hora da renderização, já que temos o controle no nó. -- #### No more extra ``s +- #### Chega de ``s extras - Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra ``s. Eg, in our most basic example on the home page we render `
Hello {this.props.name}
`, resulting in markup that contained 2 ``s. Now we'll render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so it's likely you are not impacted. However if you were targeting these ``s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components. + Outra grande mudança com nossa interação do DOM é como fazemos blocos de texto. Anteriormente, você deve ter notado que o React renderizava um monte de ``s extras, por exemplo, em nosso exemplo mais básico na página inicial nós renderizamos `
Hello {this.props.name}
`, resultando em uma marcação que continha 2 ``s. Agora deixaremos os nós de texto simples intercalados com nós de comentários que são usados para demarcação. Isso nos dá a mesma capacidade de atualizar pedaços individuais de texto, sem criar nós aninhados extras. Poucas pessoas dependeram da marcação real gerada aqui, então é provável que você não seja impactado. No entanto, se você tem esses ``s como seletor em seu CSS, você precisará se ajustar de acordo. Você sempre poderá renderizá-los explicitamente em seus componentes. -- #### Rendering `null` now uses comment nodes +- #### Renderização de `null` agora utiliza nós de comentários - We've also made use of these comment nodes to change what `null` renders to. Rendering to `null` was a feature we added in React v0.11 and was implemented by rendering `