React v15.5.0

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 das partes internas do React. Nós levamos estabilidade a sério e somos comprometidos a trazer essas melhorias para todos os nossos usuários com o menor esforço.

Por isso, hoje, estamos lançando React 15.5.0.

Avisos de Novas Descontinuações

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.

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.

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.

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.

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.

Migrando de React.PropTypes

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.

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á:

// Antes (15.4 ou anterior)
import React from 'react';

class Component extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Component.propTypes = {
  text: React.PropTypes.string.isRequired,}

// Depois (15.5)
import React from 'react';
import PropTypes from 'prop-types';
class Component extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Component.propTypes = {
  text: PropTypes.string.isRequired,};

O codemod para essas mudanças realiza essa conversão automaticamente. Basicamente use:

jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <caminho>

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.

Você também pode considerar usar o Flow para checar a tipagem estática do seu código JavaScript, incluindo React components.

Migrando de React.createClass

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.

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.

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.

// Antes (15.4 ou anterior)
var React = require('react');

var Component = React.createClass({  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

// Depois (15.5)
var React = require('react');
var createReactClass = require('create-react-class');
var Component = createReactClass({  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

Seus componentes vão continuar funcionando como estavam anteriormente.

O codemod 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.

Modo de Usar:

jscodeshift -t react-codemod/transforms/class.js caminho/para/componentes

Suspensão do Suporte Para React Addons

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 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 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 como alternativa.
• react-addons-shallow-compare - Use React.PureComponent como alternativa.
• react-addons-transition-group - Use react-transition-group/TransitionGroup como alternativa. A versão 1.1.1 fornece um substituto.
• react-addons-update - Use immutability-helper como alternativa.
• react-linked-input - Explicitamente coloque os handlers value e onChange como alternativa.

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

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:

// Antes (15.4 ou anterior)
import TestUtils from 'react-addons-test-utils';

// Depois (15.5)
import TestUtils from 'react-dom/test-utils';

Isso reflete o fato de que importar todas as Test Utils são um conjunto de API’s que englobam o renderizador da DOM.

A exceção é a renderização superficial, que não utiliza a DOM. A Renderização superficial foi movida para react-test-renderer/shallow.

// Antes (15.4 ou anterior)
import { createRenderer } from 'react-addons-test-utils';
// Depois (15.5)
import { createRenderer } from 'react-test-renderer/shallow';

Agradecimentos

Um grande agradecimento para essas pessoas que transferiram o domínio dos pacotes no npm:

• Jason Miller
• Aaron Ackerman
• Vinicius Marson

Instalação

Nós recomendamos usar o Yarn ou npm para o gerenciamento de dependências do front-end. Se você não conhece muito sobre gerenciadores de pacotes, a documentação do Yarn é um bom lugar para começar.

Para instalar React usando Yarn, execute:

yarn add react@^15.5.0 react-dom@^15.5.0

Para instalar React usando npm, execute:

npm install --save react@^15.5.0 react-dom@^15.5.0

Nós recomendamos usar um compilador como webpack ou Browserify para que você consiga escrever um código modular e compilar tudo em pacotes pequenos e com tempo de carregamento otimizados.

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.

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 na sua página:

• React
  Compilação para o modo de desenvolvimento com avisos: react/dist/react.js
  Compilação minificada para produção: react/dist/react.min.js
• React com Add-Ons
  Compilação para o modo de desenvolvimento com avisos: react/dist/react-with-addons.js
  Compilação minificada para produção: react/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
  Compilação minificada para produção: react-dom/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
  Compilação minificada para produção: react-dom/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

15.5.0 (7 de Abril de 2017)

React

• Adicionado aviso de descontinuação para React.createClass. Sugere o uso de create-react-class como alternativa. (@acdlite em d9a4fa4)
• Adicionado aviso de descontinuação para React.PropTypes. Sugere o uso de prop-types como alternativa. (@acdlite em 043845c)
• Consertado um problema quando usando ReactDOM junto com ReactDOMServer. (@wacii em #9005)
• Consertado problema com Closure Compiler. (@anmonteiro em #8895)
• Outro conserto para o Closure Compiler. (@Shastel em #8882)
• Adicionada pilha de informações de componentes para avisos de tipo de elemento inválido. (@n3tr em #8495)

React DOM

• Consertado bug no Chrome na deleção em inputs de número. (@nhunzaker em #7359)
• Adicionado react-dom/test-utils, que exporta o React Test Utils. (@bvaughn)

React Test Renderer

• Consertado bug onde componentWillUnmount não era chamado para children. (@gre em #8512)
• Adicionado react-test-renderer/shallow, que exporta a renderização superficial. (@bvaughn)

React Addons

• Última versão para os addons; eles não serão mais mantidos ativamente.
• Removidos peerDependencies para que os addons continuem funcionando indeterminadamente. (@acdlite e @bvaughn em 8a06cd7 e 67a8db3)
• Atualizado para remover referências de React.createClass e React.PropTypes (@acdlite em 12a96b9)
• react-addons-test-utils está descontinuado. Use react-dom/test-utils e react-test-renderer/shallow como alternativa. (@bvaughn)