Cómo definir una vista con ReactJS

Cuando estamos iniciando con una aplicación en ReactJS, debemos recordar que este es un lenguaje
diseñado para definir Vistas, es decir, la estructura de nuestro documento, pero en lugar de definir
explícitamente el HTML, la idea es definirlo programáticamente usando JSX, esto con el fin de poder
definir Vistas que se renderizan rápidamente en respuesta de cambios en nuestro Modelo.

ReactJS nos ofrece un sistema modular que facilita hacer nuestro código extremadamente reciclable y
ordenado, personalmente recomiendo dividir nuestra aplicación en componentes procurando usar el
mínimo de elementos posibles.

Para este tutorial vamos a definir una aplicación capaz de descargar un JSON del servidor y mostrar sus
elementos en una lista.

Para hacer más fácil el desarrollo, recomiendo iniciar armando el HTML estático para después
transformarlo a JSX, esto hace el desarrollo muy lineal y facilita la documentación de nuestra
aplicación, empecemos con esto en nuestro código:

index.html

<article>
<p><strong>
Pasos para dominar un nuevo lenguaje de programación
</strong></p>
<ol>
<li>Leer la documentación</li>
<li>Completar Tutoriales</li>
<li>Crear un Demo</li>
<li>Escribir sobre lo que apendiste</li>
</ol>
</article>

Ahora vamos a dividirlo en el mínimo de componentes básicos, en este caso solo necesitamos un
contenedor estático y los elementos de la lista, la cantidad y contenido de elementos puede variar, pero
son semánticamente iguales por lo que solo necesitamos definirlos una vez en nuestro
código. Llamemos al componente SimpleList y los elementos de nuestra lista SimpleListRow.

Necesitamos nuestros datos en formato JSON para poder usarlos en nuestro template dinámico, para
que se respete el orden usaremos un array de datos ordenado, el cual guardaremos en un archivo como
este:

simpleList_data.json

[
{
"row":"Leer la documentación";
},
{
"row":"Completar Tutoriales";
},
{
"row":"Crear un Demo";
},
{
"row":"Escribir sobre lo que aprendiste";
},
]

Es momento de armar nuestros templates en JSX, empecemos por definir las variables en las que vamos
a colocar nuestros componentes, la sintaxis es muy sencilla:
reactApp.jsx

var SimpleList = React.createClass(

render: function() {
return ();
}
});
var SimpleListRow = React.createClass({
render: function() {
return ();
}
});

Empecemos por definir el componente más sencillo, en nuestro caso SimpleListRow:

reactApp.jsx

var SimpleListRow = React.createClass({

render: function() {
return (
<ol>
<li>Leer la documentación</li>
<li>Completar Tutoriales</li>
<li>Crear un Demo</li>
<li>Escribir sobre lo que apendiste</li>
</ol>
);
}
});

Esto nos generaría una vista estática, simplifiquemos nuestro código tomando en cuenta que usaremos
datos que vamos a heredar de SimpleList con el contenido de la lista, los datos que recibimos del padre
de nuestro componente se les consideran estáticos y son conocidos como props en ReactJS.

Coloquemos los datos guardados en props en una variable llamada rows y usemos una función
de ReactJS llamada .map la cual nos permite iterar directamente los elementos de un array en JSX,
usaremos la variable element para guardar los datos de cada objeto y representarlos en el VDOM
de ReactJS.

reactApp.jsx

var SimpleListRow = React.createClass({

render: function() {
var rows = this.props.simpleList;
return (
<ol>
 <li>{element.row}</li>
</ol>
);
}
});

Ahora vamos a definir a SimpleList, que es el elemento raíz de nuestro componente y es responsable
de obtener los datos de nuestro servidor y pasarlos a SimpleListRow, a estos datos que pueden variar
por cambios en el modelo en ReactJS se les conoce como state. Empecemos por definir el template
de SimpleList. Una de las ventajas de usar JSX es que podemos definir elementos en una variable
como si fueran HTML5 custom elements y al definirlos, generalmente se les pasan datos los cuales
definirán las props de ese elemento.

reactApp.jsx

var SimpleList = React.createClass(

render: function() {
return (
<span>
<p><strong>
Pasos para dominar un nuevo lenguaje de programación
</strong></p>
</span>
);
}
});

Cuando un elemento usa state es importante definir un estado inicial o default para ese elemento, esto
se hace muy facilmente usando getInitialState:

reactApp.jsx

getInitialState: function() {
return {
simpleList:
[
{
row: 'cargando ...'
}
]
};
},
Para obtener los datos del servidor, en nuestro ejemplo vamos a usar AJAX via jQuery, esto debemos
hacerlo después de que se haya realizado el rendering inicial y así tener la representación básica en el
DOM y el elemento podrá interactuar con ella usando el VDOM. Para esto, ReactJS nos ofrece una
función llamada componentDidMount(), este método nos permite integrar correctamente AJAX u otro
Framework al flujo de ReactJS.

reactApp.jsx

componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({simpleList: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString())
}.bind(this)
});
};

Notarás que como origen de datos usamos this.props.url, esto nos indica que vamos a pasar la url al
inicializar el elemento, para esto usamos React.render() y basta con inicializar el elemento, asignar el
valor y asignarle un elemento en el DOM para inyectar su contenido.

reactApp.jsx

React.render(
<SimpleList url="simpleList_data.json"/>,
document.getElementById('simpleList')
)

Una vez cargado el DOM de nuestro sitio, ReactJS buscará el elemento que indicamos y su contenido
será reemplazado por el contenido en el VDOM generado por nuestro JSX. Podemos aprovechar esto
para mostrar una pantalla inicial a nuestros usuarios dando la impresión de cargar mas rápido, un
beneficio interesante es que podemos incluir el contenido importante para el SEO en el HTML inicial,
de este modo los crawlers podrán indexar correctamente el contenido de las vistas dinámicas en tu
aplicación.
En nuestro ejemplo simplemente mostraremos un letrero que se lea “cargando…” en lo que carga
el JSX de nuestra aplicación. Para una mejor experiencia de usuario, recuerda siempre colocar tu
código justo antes del cierre con la etiqueta , esto evitará que Javascript bloquee la carga inicial de tu
documento.
index.html

<body>
<section>
<article id="simpleList">
<small>cargando...</small>
</article>
</section>
<script
src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.min.js"></script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="js/reactApp.jsx" type="text/jsx"></script>
</body>

Con esto tenemos todo lo necesario para armar nuestra aplicación, puedes ver un live demoo revisar
el código completo en GitHub. Es importante notar la presencia del archivo JSXTransformer.js, esto
es porque usamos código JSX directamente, algo ideal para aprender y hacer prototipos de nuevos
elementos JSX en grandes proyectos, pero recuerda nunca usarlo en producción, pues el cliente tendrá
que compilar el JSX en JS en cada visita; en su lugar debemos usar un precompilador de JSX basado
en NodeJS, lo cual convertirá el JSX de nuestro ejemplo en JS normal listo para producción.
Para instalarlo basta con correr el comando npm install ‐g react‐tools desde nuestra consola, una vez
que tengamos React Tools instalado, podemos dejar un proceso que observe los cambios en el
archivo JSX y compile automáticamente a JS; para nuestro ejemplo usaremos el comando jsx extension
jsx watch jsx/ js/.

Estamos usando la opción extension jsx simplemente para indicarle que el archivo a compilar tiene
extensión .jsx, puedes omitir esto si tu archivo tiene extensión .js pero se recomienda usar .jsx para
distinguirlo, después usamos el comando watch para que el proceso continúe observando cambios en
nuestro archivo y los compile automáticamente, después declaramos la ruta de la carpeta con los
archivos JSX a compilar y finalmente en donde deseamos que se guarden los archivos compilados,
ahora en JS.Es importante actualizar nuestro HTML para que deje de usar JSXTransformer y cargue el
archivo precompilado, ahora nuestro código se vera así:

index.html

<body>
<section>
<article id="simpleList">
<small>cargando...</small>
</article>
</section>
<script src="bower_components/react/react.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="js/reactApp.js"></script>
</body>

Con estos sencillos cambios nuestros usuarios no tendrán que cargar la librería de JSXTransformer y
compilar el JSX en cada visita, lo cual nos permite usar mejor el potencial de ReactJS.