react revisitado: 01. Introducción

Primera entrada de un taller dedicado a react 15.5.0

George Saru

archivado en: JavaScript / 6 Mayo, 2017 / taller:

Hace unos dos años comencé un taller sobre React que dejé a medias y como ando estos días trabajando con esta herramienta había pensado en retomarlo. Sin embargo, desde entonces ha evolucionado bastante, sobre todo para adaptarse a ecmaScript 6, por lo que casi mejor empezaré desde cero.

React es un framework de Facebook que propone una nueva manera de entender el trabajo con javaScript: se abandonan los principios de la programación orientada a objetos y el patrón MVC tradicional para fundamentarse en otros paradigmas, como la programación reactiva y la funcional. Es complicado de resumir en unas pocas líneas qué significa esto, pero vendría a decir que la parte de la vista, separada en pequeñas piezas, se suscribe a un flujo general de datos y reacciona de forma automática cuando cambian.

Para entender este galimatías podemos establecer una analogía con un restaurante. Si estuviera orientado a objetos, tendríamos un objeto cocinero, otro camarero y un tercero comensal. Este último, el cliente, la vista, le pide al camarero un plato y este, que actúa de controlador, marcha hasta la cocina donde el modelo, el cocinero, se lo proporciona. Luego habría que definir una a una las instrucciones para que la vista se lo zampe:

  1. Coge el tenedor
  2. Corta un trozo
  3. Llévatelo a la boca...

En lugar de eso, el planteamiento de React y otras herramientas similares es que el cliente está directamente conectado a la cocina y se «suscribe» a los platos que van saliendo por la puerta. Cuando aparece el suyo, pasa de forma transparente, sin necesidad de estar escribiendo cómo, del estado "pendiente de comer" al estado "estoy comiendo" y de ahí al "ya he comido".

Por poner otro ejemplo, para mostrar u ocultar un modal, en lugar de estar manipulando nosotros directamente el DOM añdiendo y quitando displays y opacities por javaScript, sencillamente definimos un estado showModal que puede tener dos valores: hide y show. Luego la vista se suscribe, se engancha, observa ese estado y se muestra de una forma u otra según vaya cambiando su valor.

Es un poco lío, pero cuando se baja al código queda más claro así que de momento dejamos aquí la teoría.

Para profundizar en la programación funcional aplicada a javaScript, algunas lecturas interesantes son:

  • La serie programación funcional escrita por jdonsan en El abismo de null. Una delicia.
  • Atencio, Luis . Functional Programming in JavaScript. Manning Publications, 2016.
  • Mantyla, Dan. Functional Programming in JavaScript. Packt Publishing, 2015.

Preparativos

En las próximas entradas iré tratando los conceptos básicos de react -desde los componentes más sencillos hasta su integración con redux- con el desarrollo de una aplicación para llevar las cuentas domésticas, los gastos y los ingresos. No es muy original, pero espero que sirva para mostrar cómo se trabaja con esta herramienta.

La aplicación estará realizada en la versión 15.5.0 con ecmaScript 2015, por lo que conviene estar familiarizado con las novedades de esta versión de javaScript, sobre todo con las clases, las arrow functions, los módulos y la destructuración.

Las últimas entradas estarán dedicadas a webpack, pero de momento vamos a utilizar una herramienta muy cómoda e intuitiva, create-react-app, que permite levantar un entorno react en un periquete. Así que lo primero es crear un directorio, nos vamos ahí y escribimos yarn init para preparar el package.json (o npm si nos gusta más). Luego instalamos el instalador de react.

yarn add create-react-app --save

Una vez todo descargado, creamos el scaffilding de la aplicación, que yo he llamado domesticEconomy, pero que cada cual llame como quiera.

create-react-app domesticEconomy

Cuando se terminan de instalar los dos millones de dependencias que necesita todo el tinglado, nos vamos por consola al directorio que ha generado create-react y levantamos un servidor que se relanza con los cambios escribiendo yarn start. Cuando tengamos todo listo para producción, yarn build.

cd domesticEconomy

yarn start

Hola mundo

El scaffolding que genera create-react es muy sencillo. En dist estará la aplicación final, en src los archivos en los que estaremos trabajando y en public todo aquello que está al margen de React, como el index.html. De momento, lo más interesante de este último archivo es un nodo con el id root, a partir del cual se engarzará el árbol de nuestros componentes react con el DOM normal de la página. Por aquello de ser un poco más semánticos, vamos a cambiar ese div por un section.

public/index.html

<div id="root"></div>

<section id="root"></section>

Vamos ahora con el archivo index.js que se encuentra en el directorio src, donde está el punto de entrada de nuestra aplicación, el equivalente al <body> de una página web, a partir del cual se irán distribuyendo componentes dentro de componentes siguiendo una estructura arbórea. Y este punto de entrada es el método render del paquete ReactDom, el cual admite dos parámetros: un fragmento de JSX y un selector del nodo del DOM en el que debe enganchar la aplicación react.

ReactDOM.render(

<App />,

document.getElementById('root')

);

JSX es la manera peculiar con que se trabaja el html con React. Son como los tags de html, pero con alguna salvedad. Para empezar a conocerlo, algunas ideas a vuelapluma:

Al igual que ocurre en XML, los elementos deben ir por pares de apertura y cierre, y si uno no lo necesita (como ocurre con los <br> de html) hay que cerrar el tag al final:

<myComponent />

Como veremos cuando hablemos del método render, hay que englobarlos los tags de un componente en un solo tag (o nodo) raíz. Por ejemplo, esto cascaría:

<h3>Foo</h3>

<p>Lore Ipsum</p>

Esto funcionaría:

<div>

<h3>Foo</h3>

<p>Lore Ipsum</p>

</div>

Los tags JSX admiten los mismos atributos que sus parientes hachetemelescos, salvo dos que se llaman de forma diferente por ser palabras reservadas de javaScript: className en lugar de class y htmlFor en lugar de for en los labels.

<p id="Foo" className="awesome">...

Por último, destacar que, aunque nos parezca html, jsx es javaScript, por lo que en medio de la «plantilla» podemos incluir código js ejecutable, como las expresiones de Angular. Para eso, hay que indicarlo entre llaves ({}). Por ejemplo, este componente:

const ComponenteSimple = () => {

return (

<h3>Soy un componente mondo lirondo {2+2}</h3>

)

}

Se renderizaría así:

Soy un componente mondo lirondo 4

Por lo tanto, para preparar un «hola mundo», lo único que debemos hacer es modificar el JSX que le estamos pasando como primer argumento al método render de ReactDOM...

ReactDOM.render(

<App />,

document.getElementById('root')

);

Y poner el célebre saludo:

ReactDOM.render(

<h3>Hola Mundo</h3>,

document.getElementById('root')

);

Bueno, pues por hoy lo dejo aquí.

 

|| Tags: ,

Este artículo aún no ha sido valorado.

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario

*