React.js DEMO básica

¿QUÉ ES REACT JS?

Según sus autores REACT JS fue construido con un objetivo principal: Que la construcción y mantenimiento de grandes aplicaciones con datos que cambian con el tiempo, sea lo más sencilla posible.

REACT JS, es una librería Javascript, cuyo enfoque principal se centra en la gestión de interfaces de usuario (vistas). REACT JS gestionará automáticamente las actualizaciones de la interfaz de usuario cuando detecte cambios en los datos internos que tendrá cada componente de la vista. Cuando los datos cambian, REACT JS actualiza únicamente las partes que han cambiado, es casi mágico.
.

¿QUÉ ES UN COMPONENTE EN REACT JS?

Cuando se diseñan interfaces, se acostumbra descomponer los elementos de diseño comunes (secciones, botones, campos de formulario, etc.) en componentes reutilizables con interfaces bien definidas. REACT JS utiliza este concepto teórico para sus componentes, por lo cual un componente puede ser cualquier elemento de nuestra interfaz de usuario.

REACT JS está enteramente pensado para la construcción de componentes reutilizables. De hecho, con REACT JS prácticamente lo único que se hace es construir y gestionar componentes.

Debido a que los componentes en REACT JS están tan encapsulados, hacen que la reutilización de código, pruebas y separación de las responsabilidades sea una tarea más fácil.

El requisito principal es que un componente REACT JS debe sobreescribir el metodo render(), ya que cuando el componente se inicializa el método render se llama automáticamente, y este genera una representación lógica de la vista. Desde esa representación lógica REACT JS puede inyectarla en el DOM.

Cuando los datos cambian, el método render se llama de nuevo, REACT JS compara el valor devuelto anteriormente con el nuevo, de esa comparación obtiene un conjunto mínimo de cambios que se aplicarán en el DOM, obviamente esta actualización es mucho más eficiente.

Los componentes son el corazón de REACT JS
.

INICIANDO EL PROYECTO

En la terminal, creamos nuestra carpeta para la demo e ingresamos a ella:

mkdir demo-react && cd demo-react

Luego daremos por iniciado nuestro proyecto creando interactivamente nuestro archivo package.json, con la siguiente instrucción:

npm init --force

Mediante la instrucción npm init --force evitamos todas las preguntas incomodas de npm init.
.

INSTALACIÓN DE DEPENDENCIAS

Primero instalamos las dependencias principales de nuestro proyecto, las cuales son: react y react-dom:

npm i -S react react-dom

Mediante la instrucción npm i -S podemos instalar las dependencias de nuestro proyecto, esto hará que dentro de nuestro archivo package.json se agregue la llave dependencies y allí se almacenen las dependencias principales de nuestro proyecto.
.

INSTALACIÓN DE DEPENDENCIAS DE DESARROLLO

Luego instalamos las dependencias de desarrollo que usaremos para Webpack

npm i -SD webpack webpack-dev-server

Luego instalamos las dependencias de desarrollo que usaremos para Babel JS

npm i -SD babel-loader babel-preset-es2015 babel-preset-react

Mediante la instrucción npm i -SD podemos instalar las dependencias de desarrollo de nuestro proyecto, esto hará que dentro de nuestro archivo package.json se agregue la llave devDependencies y allí se almacenen las dependencias de desarrollo de nuestro proyecto.

Con esto hemos instalado todas las dependencias de nuestro proyecto, ahora sí comencemos !.
.

DEMO-REACT

Para nuestro primer taller simplemente crearemos un componente llamado Header el cuál contendrá una etiqueta <h1> con un título dinámico.

Inicialmente para realizar esta demo escribiremos los siguientes archivos:

• public/index.html

• app/DemoReact.js

• app/components/Header.js
  .

PUBLIC/INDEX.HTML

En el archivo index.html escribiremos un nuevo documento html muy simple, en el cual agregaremos un div con el id: divDemoReact, dentro de este div es donde REACT JS renderizará nuestra Aplicación. Además agregaremos la llamada al script: DemoReact.js, en este archivo estará todo el código necesario para la ejecución de nuestra Aplicación.

Nuestro archivo index.html debería quedar así:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>demoReact</title>
  </head>
  <body>
      <div id="divDemoReact"></div>
    <script type="text/javascript" src="DemoReact.js"></script>
  </body>
</html>

.
APP/COMPONENTS/HEADER.JS

Luego crearemos el archivo app/components/Header.js en el cual declararemos la clase Header, que como podemos observar hereda todo lo que ofrece la clase React.Component, mediante la palabra clave extends.

Luego sobreescribiremos el método render(), insertando el contenido de nuestro componente. Para este ejemplo de componente retornaremos un div conteniendo una etiqueta <h1>, dentro del cual escribiremos {this.props.title} . Finalmente exportamos nuestro componente Header mediante export default class Header. De esta manera nuestro nuevo componente Header podrá ser utilizado/llamado de forma independiente por cualquier otro componente o aplicación.

Nuestro archivo Header.jsdebería quedar así:

import React from 'react';

export default class Header extends React.Component {
    render() {
      return (
        <div>
          <h1>{this.props.title}</h1>
        </div>
      );
    }
}

.
APP/DEMOREACT.JS

Creamos el archivo: app/DemoReact.js , en donde importamos react, react-dom y nuestro componente anteriormente creado Header.

Declaramos la constante header, que contendrá una instancia de nuestro componente Header y además asignándole a su propiedad title el valor: ‘Demo de React JS’.

Luego definimos la constante nodoContenedor que será el nodo html que contendrá nuestro componente, que para este caso es un div con el id: divDemoReact.

Luego definimos la función renderizacion, en la cual simplemente renderizaremos la instancia de nuestro componente Header, dentro del nodoContenedor de nuestra Aplicación, mediante el método render() de ReactDOM.

Finalmente ejecutamos la función renderizacion.

Nuestro archivo DemoReact.js debería quedar así:

import React from 'react';
import ReactDOM from 'react-dom';

import Header from './components/Header';

const header = <Header title="Demo de React JS" />;
const nodoContenedor = document.getElementById('divDemoReact');

const renderizacion = () => {
  ReactDOM.render(header, nodoContenedor);
}

renderizacion();

Nota: Dentro del componente el valor de la propiedad title puede ser capturado mediante la siguiente instrucción: {this.prop.title}.