Creando una “SPA” básica con ReactJS y ASP.NET Core

Esta entrega se pondrá interesante, se los prometo.

Antes de comenzar, definamos un par de conceptos.

¿Que es una SPA? ¿ReactJS? ¿Eso con que se come?

Básicamente una SPA (Single Page Application) es una página web cuya navegación y/o cambios de contenido se dan sobre la página principal, dando un sentimiento de rendimiento muy fluido hacia la experiencia de usuario.

Ejemplos hoy en día sobran, prácticamente cualquier sitio importante de hoy está basado en SPA.

Muy bién, ahora que sabemos que es una SPA, ¿Qué herramientas existen para construirlas? Existen varias, las más importantes y “Pro” de la industria son las 3 siguientes:

1. VUE.js

2. Angular

3. ReactJS

Vamos a enfocarnos en la última, que a mi juicio es la que en este año ha tenido más crecimiento en popularidad.

¿Que es ReactJS?

Su página oficial (www.reactjs.org) lo define como “una librería de javascript que sirve para generar interfaces de usuario”.

ReactJS está enfocado en el desarrollo de UI de usuario super atractivas, modernas y rápidas. Si eres desarrollador de los llamados “Front-End” sabrás de lo que hablo :)

ReactJS fue inventado en 2013 por Jordan Walke, un ingeniero de software que en ese tiempo trabajaba para Facebook.

ReactJS en el último año ha tenido un gran crecimiento en popularidad, de hecho, muchos de los sitios más importante del momento tienen su versiones web construidas con este framework. Algunos ejemplos son los siguientes:

• Reddit.

• Airbnb.

• Walmart.

• Netflix.

• Todo el universo Facebook (FB, Instagram, Whatsapp).

• Twitter.

• En 2018, algunos sitios importantes de Microsoft, tal es el caso del nuevo Azure DevOps, Office 365 por mencionar algunos.

ReactJS tiene como pilares los siguientes conceptos, los cuales vamos a ver en la “codeada” más adelante:

• Su lenguaje de programación, llamado JSX, que al principio puede parecer raro, pero es una combinación poderosa de ECMAScript con HTML… así es, JSX tiene como base el Estándar ECMAScript, concretamente en la versión 6.

• Desarrollo por componentes: El elemento base de la librería de React es el “componente”. Una SPA puede ser separada por componentes reutilizables a lo largo de toda la aplicación.

• DOM Virtual: ReactJS NO interactúa con el DOM del navegador, sino que genera un árbol de elementos virtual que está siendo observado todo el tiempo, y cuando detecta un cambio en el estado de la aplicación (cambios en los valores almacenados en el objeto “state”), el DOM virtual envía los cambios al DOM real.

• Estado del componente: Cada componente de React puede estar enlazado a un elemento del objeto “estado” el cual, al cambiar de valor, el componente actualiza la UI.

• Altamente escalable: Como todo buen framework, se puede extender su funcionalidad por medio de componentes desarrollados por terceros.

¿Qué necesito aprender para poder usar React?

En mi experiencia personal, aunque Facebook diga lo contrario, el club de React si tiene cadenero, y uno muy bueno.

Estas fueron las habilidades y conocimientos que tuve que “desempolvar” y/o en muchas otras aprender para que el cadenero de React me dejara pasar.

• La base de React es su lenguaje, el cual como ya mencioné, está basado en el Estándar ECMAScript 6, por lo que lo primero que tuve que aprender, fue este estándar, concretamente las nuevas características (constantes, arrow functions, import y export (módulos), POO real usando clases, string interpolation, nuevas funciones para Arrays, PROMESAS (no olvides esta palabra)).

• Mente abierta para cambiar. La estructura de archivos al principio es un poco confusa pero con el tiempo te adaptas súper, además del pensamiento de “construcción de componentes” puede ser difícil, pero lo mismo, también te vas acostumbrando.

Antes de empezar, personalmente he encontrado 2 formas de generar el proyecto inicial de SPA con React usando el sdk de .NET Core 2.1. Una con CLI (Línea de comandos) especial para OS que no son Windows, y la otra usando Visual Studio 2017 con la plantilla instalada, la cual me parece la más sencilla y la que se mostrará en este post.

Bueno, dejemos la historia a un lado y vamos a lo bueno, ¡a tirar código!, que por cierto, este proyecto estará publicado en mi GitHub para que lo chequen.

Requisitos previos.

• NodeJS (puedes descargarlo desde su página oficial www.nodejs.org)

• Microsoft Visual Studio 2017, versión 15.2

• SDK de .NET Core 2.1 (normalmente viene instalado con VS, pero se puede instalar de forma independiente).

¡Comencemos!

Una vez teniendo todo instalado, abrimos Visual Studio generamos un nuevo proyecto de tipo “ASP.NET Core Web Application”. El nombre del proyecto será “AdvientoCS.SPAReactJS”

Una vez generado el nombre del proyecto, nos saldrá la ventana donde seleccionaremos la plantilla React

Esperamos unos segundos y tendremos el proyecto generado y listo para que le demos “play”...

La plantilla genera unos archivos que, en esta ocasión no usaremos, por lo que, primero vamos a explicar la estructura del proyecto y después eliminaremos algunos archivos que sobran.

Estructura de archivos de la plantilla

Las carpetas a destacar son las siguientes:

ClientApp: esta será la carpeta raíz de nuestra SPA

ClientApp/public: esta carpeta guarda el archivo html de la SPA, su icono y un archivo que podemos analizar más adelante, el manifiesto de la SPA, que en pocas palabras funciona de forma similar al “android manifest”.

ClientApp/src: aquí se guardan los elementos de código que compone la SPA, además de uno muy importante dentro de ReactJS, package.json, archivo que en pocas palabras funciona similar a package.config (los paquetes de terceros que usará la aplicación).

Eliminando elementos innecesarios

Eliminaremos los archivos innecesarios de la SPA, dejando la estructura de archivos tal como está en la siguiente imagen:

Una vez eliminando los archivos innecesarios, ¡Es momento de tirar código!

Creando nuestro primer componente.

Vamos a crear nuestro primer componente. en la carpeta de “components” creamos un nuevo archivo de tipo Javascript que se llamará “Contador”

Una vez generado el nuevo archivo, escribimos el siguiente fragmento de código.

Explico algunos conceptos clave:

import React, { Component } from 'react';

Esta línea nos ayuda a “importar” los módulos base del framework de React, ¿recuerdan lo que les mencione de los módulos import y export?

class Contador extends Component

¡Definimos una clase en Javascript!, ¡Que loco! pero sí, se deben declarar los componentes de React como clases reales de Javascript. Component es la clase base de un componente de ReactJS.

state = { ... }

“state” es nuestra variable que controla el estado del componente, ojo, no controla el estado de los controles html, controla la información que está contenida en los controles declarados en el componente, es decir, en state se pueden almacenar datos que son “renderizados” hacia la vista html del navegador. Esto se ve más adelante en el método “render” el cual se encarga de “pintar” los controles html hacia el navegador.

SumaContador = (e) => { … }

Este método nosotros lo declaramos para manejar el click de un botón, el contenido de este método está explicado dentro del código, pero es importante destacar que en este método obtenemos el valor actual de nuestra variable de estado almacenandose en otra variable, se altera su valor y posteriormente, quien hace la magia es “setState”. esta función que está en React.Component (herencia), actualiza el valor en la variable de estado pero además, al hacer esto, ReactJS observa este cambio e invoca al método “render()” el cual vuelve a pintar los componentes html, pero ojo, no todos, solo los componentes que han cambiado, ahí hace uso del DOM Virtual.

render(){ return ( … ) }

Como mencionamos anteriormente, render() dibuja los controles html, pero ¿en donde? más adelante lo explicaremos en el archivo “app.js”. Lo importante de este método son las siguientes líneas:

<h5>Número de clics: {this.state.contador}</h5>

<button className="button" onClick={this.SumaContador}>¡Hazme clic!</button>

Esta es la sintaxis básica de JSX, una combinación rara de HTML con Javascript, las expresiones de javascript dentro de una etiqueta html se declaran usando llaves.

En este caso estamos pintando el valor de nuestra variable de estado dentro de un h5, pero además estamos declarando un botón y cuando ese botón haga clic, se ejecuta el método SumaContador, el cual ya hemos explicado.

export default Contador;

Por último, en este archivo, se “exporta” el componente, para que otro módulo lo pueda ocupar.

Ahora procederemos a modificar el archivo “app.js”, quedará de la siguiente forma:

Aquí no hay mucho que explicar, simplemente se invoca al componente Contador desde el componente inicial de la SPA, en este caso, App.

Por último, modificamos el código del archivo “index.js” para que quede así:

Tampoco hay mucho que decir al respecto de este, únicamente decir que es en este componente donde todo sucede, ReactDOM.render( … ) es el método que dibuja todos los componentes que vivirán en la SPA.

Una vez que tengamos todo listo solo nos queda iniciar la aplicación como siempre se hace, presionando el botón “Iniciar”.

Si todo sale bien, este será la página que se muestra:

Y si le das clic al botón, observa la magia :D

El valor del número de clics se muestra en la pantalla.

Conclusión.

ReactJS puede parecer al principio confuso y muchas veces difícil, pero una vez que entendemos los cimientos de la herramienta, podremos observar que es una de las herramientas más poderosos que existen hoy en día para el desarrollo de Interfaces de Usuario web.

Espero que les haya gustado y si ustedes me lo permiten, seguiremos con esta serie de entradas sobre este gran framework, ya que esto solo es el gran inicio, una muy buena introducción a este fenomenal mundo.

Gracias por su atención y nos estamos leyendo en los comentarios.