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étodo render 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ón

npm i -S react react-dom

Renderizando en el navegador

Código viejo

// React ya traía el método de render incorporado

import React from 'react';

import App from './containers/App';

React.render(<App />, document.body);

Código actualizado

import React from 'react';

// importamos la función de render

import { render } from 'react-dom';

import App from './containers/App';

render(<App />, document.body);

Renderizando en el servidor

Código viejo

// React ya traía los métodos de render incorporados

import React from 'react';

import App from './containers/App';

React.renderToString(<App />);

Código nuevo

import React from 'react';

// importamos los métodos de renderizado

import {

  renderToString,

  renderToStaticMarkup,

} from 'react-dom/server';

import App from './containers/App';

renderToString(<App />); // renderToStaticMarkup(<App />);

React add-ons

React.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.addons

const {

  CSSTransitionGroup: ReactCSSTransitionGroup,

  TestUtils,

} = React.addons;

Código nuevo

import React from 'react';

// importamos los add-ons

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

import TestUtils from 'react-addons-test-utils';

Usándolos

El 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 refs

Con 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 <div ref="container">{this.props.text}</div>;

  }

}

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 <div ref="container">{this.props.text}</div>;

  }

}

Cambios al buscar un componente

Anteriormente 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ático getDOMNode. 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ón

React.render(<MyComponent />, document.body);

// buscamos MyComponente en el DOM renderizado por React

const domElement = MyComponent.getDOMNode();

Código nuevo

import React from 'react';

// cargamos los métodos de react-dom

import {

  findDOMNode,

  render,

} from 'react-dom';

import MyComponent from './components/MyComponent';

// renderizamos nuestra aplicación

render(<MyComponent />, document.body);

// buscamos MyComponente en el DOM renderizado por React

const 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 <div>{props.text}</div>;

}

export default MyComponent;

Utilidad

La 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.