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.
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. [js] import React from ‘react’; import ReactDOM from ‘react-dom’; const MiComponente = React.createClass({ render () { return (
<div>Hola Platzi!</div>
); } }); ReactDOM.render(<micomponente>, document.body); [/js]
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.
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í: [js]const nombre = this.refs.nombre.getDOMNode();[/js] 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.
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: [js]npm i -S [email protected] [email protected][/js] 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. Si estás empezando a conocer React.js, no te pierdas el Curso Profesional de React.js en Platzi. Ahí aprenderás desde lo básico hasta lo más complejo para comenzar a desarrollar aplicaciones web modulares con esta librería.</micomponente>
