Guía de actualización desde React.js v0.13

Con la salida de React.js v0.14 Facebook introdujo varios cambios al API de la librería que se hicieron efectivos en la v15 que salió el 8 de abril de 2016. Vamos a ver cuales son estos cambios y como actualizar nuestro código. Métodos de render Hasta la v15 de React.js para renderizar nuestra aplicación solo teníamos que usar el métodorender que venía incluido junto a React. En la v0.14 decidieron que todas las funciones de renderizado se separarían en un módulo aparte llamado react-dom(https://www.npmjs.com/package/react-dom). Adicionalmente para poder renderizar nuestra aplicación en el servidor es necesario importar el método renderToString (o renderToStaticMarkup) desde react-dom/server. Este cambio se realizo debido al auge de librerías personalizadas para renderizar React a otras plataformas, como puede ser react-blessed (https://github.com/Yomguithereal/react-blessed) que permite renderizar a una interfaz de línea de comandos. Incluso Netflix posee su propia librería para usar React.js en televisores (https://www.youtube.com/watch?v=eNC0mRYGWgc). Instalaciónnpm i -S react react-dom Renderizando en el navegador Código viejo // React ya traía el método de render incorporadoimport React from 'react'; import App from './containers/App'; React.render(, document.body); Código actualizado import React from 'react';// importamos la función de renderimport { render } from 'react-dom'; import App from './containers/App'; render(, document.body); Renderizando en el servidor Código viejo // React ya traía los métodos de render incorporadosimport React from 'react'; import App from './containers/App'; React.renderToString(); Código nuevo import React from 'react';// importamos los métodos de renderizadoimport { renderToString, renderToStaticMarkup,} from 'react-dom/server'; import App from './containers/App'; renderToString(); // renderToStaticMarkup(); React add-onsReact.js posee muchas funciones o componentes llamados React Add-ons (https://facebook.github.io/react/docs/addons.html), estos Add-ons sirven para realizar distintas funcionalidades, como pueden ser animaciones o probar de componentes. Al igual que con los métodos de render los add-ons que antes venían incluidos en el módulo de React ahora se separaron, cada uno en su propio módulo independiente. Instalación npm i -S react react-addons-css-transition-group react-addons-test-utils Importándolos Código viejo import React from 'react/addons'; // traemos los add-ons desde React.addonsconst { CSSTransitionGroup: ReactCSSTransitionGroup, TestUtils,} = React.addons; Código nuevo import React from 'react'; // importamos los add-onsimport ReactCSSTransitionGroup from 'react-addons-css-transition-group';import TestUtils from 'react-addons-test-utils'; UsándolosEl uso de los add-ons es el mismo, la API de estos no cambió, o lo hizo muy poco, por lo que lo más importante es de donde los importamos. Referencias a nodos del DOM Otro cambio es como funcionan los `refs` y como encontrar un componente en el DOM ya renderizado. Cambios en refsCon los refs el cambio que se introdujo es que desde ahora vamos a tener acceso al elemento del DOM directamente, sin necesidad de llamar al método getDOMNode. Código viejo import React, { Component } from 'react'; class App extends Component { componentDidMount() { // obtenemos el elemento del DOM const $container = this.refs.container.getDOMNode(); // hacemos algo con $container } render() { return {this.props.text}; }} Código nuevo import React, { Component } from 'react'; class App extends Component { componentDidMount() { // obtenemos el elemento del DOM const $container = this.refs.container; // hacemos algo con $container } render() { return {this.props.text}; }} Cambios al buscar un componenteAnteriormente si, por algunas razón, queríamos buscar un componente en el árbol del DOM ya renderizado, necesitábamos traernos el componente y llamar al método estáticogetDOMNode. Ahora necesitamos usar el método findDOMNode que viene incluido en react-dom y que recibe el componente a buscar. Código viejo import React from 'react'; import MyComponent from './components/MyComponent'; // renderizamos nuestra aplicaciónReact.render(, document.body); // buscamos MyComponente en el DOM renderizado por Reactconst domElement = MyComponent.getDOMNode(); Código nuevo import React from 'react';// cargamos los métodos de react-domimport { findDOMNode, render,} from 'react-dom'; import MyComponent from './components/MyComponent'; // renderizamos nuestra aplicaciónrender(, document.body); // buscamos MyComponente en el DOM renderizado por Reactconst domElement = findDOMNode(MyComponent); Introduciendo componentes puros No todos son cambios, también hay nuevas características que se incluyeron en la v0.14 y se mejoraron en la v15. La más importante sin duda es la introducción de Componentes Puros a React.js ¿Qué son?Los componentes puros son funciones de JS que devuelven JSX y no poseen los métodos del ciclo de vida de un componente normal de React.js. Imaginemos que sería un componente que solo tiene el método `render`. Creación import React from 'react'; function MyComponent(props) { return {props.text};} export default MyComponent; UtilidadLa principal utilidad de los componentes puros es representar pequeños pedazos de nuestra UI fácilmente y de forma reutilizable. Otra ventaja es que al no tener ciclo de vida se ejecutan más rápido ya que no es necesario tratar de ejecutarlas al momento de renderizar un componente. Conclusión Como se ve, no son tantos los cambios que hay que realizar al momento actualizar nuestra aplicación desde React.js v0.13. La mayoría de los cambios incluso son simplemente cambiar la forma en la que importamos ciertos métodos o funciones y una vez realizados podríamos seguir actualizando React.js sin problemas.