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.
\nPor isso, hoje, estamos lançando React 15.5.0.
\nA 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.
\nEntã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.
\nPara 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.
\nProp 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.
\nNa 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)\nimport React from 'react';\n\nclass Component extends React.Component {\n render() {\n return <div>{this.props.text}</div>;\n }\n}\n\nComponent.propTypes = {\n text: React.PropTypes.string.isRequired,}\n\n// Depois (15.5)\nimport React from 'react';\nimport PropTypes from 'prop-types';\nclass Component extends React.Component {\n render() {\n return <div>{this.props.text}</div>;\n }\n}\n\nComponent.propTypes = {\n text: PropTypes.string.isRequired,};O codemod para essas mudanças realiza essa conversão automaticamente. Basicamente use:
\njscodeshift -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.
\nQuando 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.
\nPara 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)\nvar React = require('react');\n\nvar Component = React.createClass({ mixins: [MixinA],\n render() {\n return <Child />;\n }\n});\n\n// Depois (15.5)\nvar React = require('react');\nvar createReactClass = require('create-react-class');\nvar Component = createReactClass({ mixins: [MixinA],\n render() {\n return <Child />;\n }\n});Seus componentes vão continuar funcionando como estavam anteriormente.
\nO 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:
\njscodeshift -t react-codemod/transforms/class.js caminho/para/componentesNó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.
\nvalue e onChange como alternativa.React.PureComponent como alternativa.React.PureComponent como alternativa.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.
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)\nimport TestUtils from 'react-addons-test-utils';\n\n// Depois (15.5)\nimport 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.
\nA 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)\nimport { createRenderer } from 'react-addons-test-utils';\n// Depois (15.5)\nimport { createRenderer } from 'react-test-renderer/shallow';Um grande agradecimento para essas pessoas que transferiram o domínio dos pacotes no npm:
\n\nNó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.
\nPara instalar React usando Yarn, execute:
\nyarn add react@^15.5.0 react-dom@^15.5.0Para instalar React usando npm, execute:
\nnpm install --save react@^15.5.0 react-dom@^15.5.0Nó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.
\nLembre 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.
\nNo 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:
\nNó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.
React.createClass. Sugere o uso de create-react-class como alternativa. (@acdlite em d9a4fa4)React.PropTypes. Sugere o uso de prop-types como alternativa. (@acdlite em 043845c)ReactDOM junto com ReactDOMServer. (@wacii em #9005)react-dom/test-utils, que exporta o React Test Utils. (@bvaughn)componentWillUnmount não era chamado para children. (@gre em #8512)react-test-renderer/shallow, que exporta a renderização superficial. (@bvaughn)peerDependencies para que os addons continuem funcionando indeterminadamente. (@acdlite e @bvaughn em 8a06cd7 e 67a8db3)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)