Lo nuevo en React v0.14

React v0.14 es la nueva beta de la librería de Facebook que fue liberada recientemente. Esta primera versión llegará con dos grandes cambios que harán que los módulos sean más ligeros y que logremos mejoras en nuestros desarrollos. En este artículo te contaré en qué consisten y cómo puedes empezar a implementarlos.

División de paquetes

El módulo de React.js se va a dividir en dos para la versión 0.14. El primero va a mantener el nombre de react y va a contener todos los métodos de creación de componentes. Estos son React.createElement, React.createClass, React.Component, React.PropTypes, React.Children y otras funciones para facilitar el trabajo con elementos del DOM.

El segundo módulo va a llamarse react-dom y va a contener toda la parte de renderizado. Es decir, los métodos ReactDOM.render, ReactDOM.unmountComponentAtNode y ReactDOM.findDOMNode. Además, dentro de react-dom vamos a tener acceso a react-dom/server con los métodos para renderizar un componente en el servidor. Estos son ReactDOMServer.renderToString y ReactDOMServer.renderToStaticMarkup.

import React from "react";
import ReactDOM from "react-dom";

const MiComponente = React.createClass({
  render() {
    return <div>Hola Platzi!</div>;
  }
});

ReactDOM.render(<MiComponente />, document.body);

Implicaciones del cambio

Con estos cambios se optimizará la descarga de los componentes de React.js. Es decir, no será necesario cargar toda la lógica del renderizado con el módulo react-dom. En su lugar, sólo necesitaremos el módulo react. Esto además nos permitirá desarrollar alternativas a react-dom para poder renderizar de otras formas los componentes ó dar lugar a librerías de renderizado más rápido. También dará lugar a que los componentes creados con react puedan ser usados no sólo con react-dom, sino también con react-native o alguna otra tecnología que salga en el futuro.

Y esto aumentará las posibilidades de compartir componentes entre Front-end, Backend y Mobile. Por último, esta versión todavía va a contar con los métodos de react-dom dentro del módulo react.

De esta forma, evitamos que se rompa el código actual y que, al momento de intentar usarlo, la consola nos muestre un warning para dar aviso de que es necesario empezar a usar react-dom. Sin embargo, en la versión 0.15 de React.js el react-dom pasará a ser obligatorio. Así se eliminarán tanto el warning, como los métodos de renderizado del módulo react.

Referencia a nodos del DOM

El segundo gran cambio que va a traer React.js en la v0.14 es una modificación en la forma en la que accedemos a los elementos del DOM que posean un atributo ref. Actualmente para acceder a un elemento referenciado tendríamos que hacer algo así:

const nombre = this.refs.nombre.getDOMNode();

Donde nombre es el valor del atributo ref del elemento. Desde esta versión ya no va a ser necesario usar getDOMNode() para obtener el elemento del DOM. En cambio, this.refs.nombre va a devolver el elemento directamente. Junto a este cambio se va a remplazar MiComponente.getDOMNode() por ReactDOM.findDOMNode(MiComponente).

Este método permite obtener el elemento del DOM que es renderizado por MiComponente dentro del árbol del DOM generado por ReactDOM.render. Para poder hacer el cambio rápido de getDOMNode() a ReactDOM.findDOMNode Facebook liberó una script llamado react-codemod.

Cómo empezar a usar la v0.14

Si intentas descargar el módulo react desde npm, vas a obtener la versión actual (0.13.3). Para poder empezar a usar la beta de la nueva versión, es necesario descargar estos dos módulos usando los siguientes comandos:

npm i -S react@0.14.0-beta1 react-dom@0.14.0-beta1

De esta manera, los módulos react y react-dom se agregarán al package.json con estos nuevos cambios. Luego, como en el ejemplo arriba, basta importarlos de forma normal para empezar a implementar estas mejoras en nuestro código.