ReactJS — Desacoplando JSX de los archivos Javascript

Haciendo a ReactJS más atractivo para quienes no soportan ver HTML dentro de Javascript

Una de las principales máximas en materia de programación web que aprendí cuando empecé a adentrarme en este mundillo era que, el código HTML debía mantenerse separado de los estilos así como de la lógica de negocio aportada por el código Javascript.

Esta “ley no escrita” imperó para mi durante mucho tiempo y cuando comencé a trabajar con AngularJS, me fue muy fácil adaptarte a la estructura de sus componentes, más que nada por eso mismo, porque mantiene separadas vista, modelo y estilos en archivos independientes.

Con el objetivo de ampliar miras y animado por mi gran compañero Ivan B. Trujillo, me decidí a adentrarme en el mundo ReactJS.

Lo que más me impactó de esta librería desarrollada por Facebook fue el hecho de que metía templates, creados en HTML, dentro del propio Javascript y a eso, lo llamaba JSX.

Lo primero que pensé es que habíamos vuelto a tiempos de PHP y sus vistas procesadas. No obstante y a pesar de ello, continué probando esta librería de Front-End y la verdad es que llegué a admirar muchas de sus cualidades: simplicidad, ligereza, desarrollo continuo, etc.; pero lo de JSX me seguía empujando hacia mi zona de confort en AngularJS.

Una vez más, Iván estuvo al quite y cuando le expuse mi inquietud a este respecto, me orientó perfectamente hacia cómo podría desacoplar JSX del archivo Javascript que contiene la lógica de negocio de los componentes de React.

Decidí darle otra oportunidad e investigar un poco sobre cómo podría alcanzar esta meta que me facilitase la adopción de la librería de Facebook, de modo que a continuación expongo mis conclusiones.

Preparando el entorno de pruebas

Para llevar a cabo esta pequeña “demo”, el sistema donde la realicé contaba con las siguientes características:

• NodeJS v7.10.0
• NPM v4.2.0
• Visual Studio Code 1.13.0
• Sistema operativo Linux Mint 18.1 64b

Partiendo de este punto, lo primero que hice fue instalar (globalmente) la herramientacreate-react-app (repositorio oficial), que viene siendo el angular-cli para ReactJS.

$ sudo npm install -g create-react-app

Después de haber instalado esta herramienta, lo siguiente es crear una nueva aplicación vacía de ReactJS y para ello, hay que ejecutar los siguientes comandos:

$ create-react-app my-app
$ cd my-app/
$ npm start

Ahora podemos acceder a nuestro navegador web y acceder a la siguiente URL localhost:3000, lo que nos debería mostrar el siguiente resultado:

Extrayendo el código JSX

Si inspeccionamos el código fuente de nuestra aplicación, concretamente el contenido del archivo App.js, veremos lo siguiente:

Como se puede observar, dentro del método rendertenemos el código JSX.

Lo primero que debemos hacer ahora es crear un nuevo archivo, al que llamaremos App.template.jsx, y que estará situado a la misma altura que el archivo App.js:

En este archivo JSX, lo primero que debemos hacer es exportar una función que será la que podremos importar dentro de App.js:

Esta función deberá devolver el contenido JSX que será interpretado por el método render.

Dado que JSX lo va a interpretar React, lo siguiente que debemos hacer es importar el módulo correspondiente.

Este JSX hace uso de estilos declarados en el archivo App.css. Si deseamos continuar utilizando dichos estilos, deberemos importarlos al igual que hicimos con el módulo de React.

Lo siguiente que debemos importar en la plantilla JSX es el logotipo de React, el cual está referenciando desde el archivo logo.svg.

Como resumen de este paso, se puede concluir que en el archivo JSX deberemos importar todos aquellos módulos, estilos y referencias externas que empleemos en nuestra plantilla.

Importando la plantilla en el archivo principal del componente

Ahora que ya hemos definido la plantilla, volvemos al archivo principal que define la lógica de negocio de nuestro componente.

Lo primero que debemos hacer es eliminar la importación del módulo React, dado que al no haber presencia de código JSX, ya no es necesario.

A continuación, eliminamos la importación del logotipo de React así como los estilos del componente, ya que han sido importados en el archivo JSX, e importamos la plantilla que creamos anteriormente.

Seguidamente borramos el código JSX (en este caso y a modo de referencia visual, simplemente lo he comentado) y modificamos el método render para que pueda trabajar con nuestra plantilla.

Si volvemos al navegador web, podremos observar que nada ha cambiado en el comportamiento de nuestra aplicación.

De este modo hemos sido capaces de desacoplar el código JSX del código Javascript que implementa la lógica de negocio de nuestro componente.

Pasando propiedades al template

Un último detalle que nos quedaría es el paso de información hacia el componente.

Para demostrar esta funcionalidad, lo primero que debemos hacer es modifica nuestro template (archivo App.template.js) de manera que reciba una serie de propiedades de prueba (color, url y location).

Lo primero que nos debe llamar la atención es que a nuestra plantilla, las propiedades que vaya a definir la lógica de negocio, se pasarán como parámetro de entrada a la función que estamos exportando. En esta ocasión, la variable que contendrá las propiedades se denominará props.

Para acceder a dichas propiedades lo haremos igual que se hace en cualquier archivo JSX, es decir, a través de la “notación punto”, tal y como se muestra en la lista desordenada que hemos implementado.

Una vez hecho esto, volvemos al archivo principal de nuestro componente (App.js) y creamos la variable que contendrá las propiedades que vamos a pasarle a la plantilla.

Finalmente, debemos proporcionarle esta variable de propiedades a la plantilla y para ello, emplearemos el operador REST (…).

Si ahora volvemos a nuestro navegador web, podremos ver que la interfaz se ha modificado y que muestra correctamente las propiedades que le hemos pasado a la plantilla.