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.