Los props se envían a los componentes al momento de crearlos, y es tan fácil como mandar las propiedades como un atributo del <tag>  del componente, por ejemplo, supongamos que tenemos un componente <ItemList> , el cual necesita recibir los datos de un producto, dicho producto debe contener el nombre y un precio:

<ItemList product={item}/>

Mandar objetos es una forma simple y limpia de mandar propiedades, pero también lo podríamos hacer en varias propiedades, por ejemplo:

<ItemList productName={product.name} productPrice={product.price}/>

La única diferencia entre estos dos métodos será la forma de recuperar las propiedades. Para recuperar una propiedad es necesario usar el prefijo, this.props , por lo que en el primer ejemplo, el ítem se recupera como this.props.product , y en el segundo ejemplo, sería this.props.productName  para el nombre y this.props.productPrice  para el precio.

Una limitación que tenemos para mandar props, es la de no utilizar un nombre de propiedad que coincida con los atributo de React, por ejemplo: onClick , onChange , className , etc.

Las propiedades son inmutables
La propiedad tiene la característica de ser inmutables, es decir, no debemos de modificarlas o actualizarlas, pues es considerada una mala práctica, solo las debemos utilizar de modo lectura.

Regresemos al ejemplo del formulario que vimos en la sección de componentes con estado y sin estado del que hablamos en un artículo pasado. En este ejemplo, creamos el componente App  y sobre este montamos un formulario de registro de empleados. Ahora bien, ¿qué pasaría si quisiéramos que la acción de guardar la controlara el componente padre? La solución es simple, el componente padre tendría que enviar como props la función de guardar, para que el hijo la ejecute.

Lo primero será pasar el formulario a un componente externo, por lo cual, crearemos un componente llamado EmployeeForm , el cual se verá como a continuación:

import React from 'react'

class EmployeeForm extends React.Component{

  constructor(){
    super(...arguments)
    this.state = {
      firstName: '',
      lastName: '',
      age: ''
    }
  }

  componentDidMount(){
    this.refs.firstName.focus();
  }

  handleChanges(e){
    let newState = Object.assign(
      this.state, {[e.target.id]: e.target.value})
    this.setState(newState)
  }

  saveEmployee(e){
    this.props.save(this.state)
  }

  render(){
    return (
      <form>
        <label htmlFor='firstName'>Nombre</label>
        <input ref='firstName' id='firstName'
          type='text' value={this.state.firstName}
          onChange={this.handleChanges.bind(this)}/>
        <br/>
        <label htmlFor='lastName'>Apellido</label>
        <input id='lastName' type='text' value={this.state.lastName}
          onChange={this.handleChanges.bind(this)}/>
        <br/>
        <label htmlFor='age'>Edad</label>
        <input id='age' type='number' value={this.state.age}
          onChange={this.handleChanges.bind(this)}/>
        <br/>
        <button onClick={this.saveEmployee.bind(this)}>Guardar</button>
      </form>
    )
  }
}
export default EmployeeForm

Este componente tiene dos cosas a resaltar, lo primero es que agregamos un botón (línea 44), el cual, al ser presionado, ejecutar la función saveEmployee  declarada en este mismo componente, lo segundo es la función saveEmployee  que declaramos en la línea 24, la cual ejecuta la función save  enviada por el parent como prop.

Por otra parte, tenemos al componente App  que será el padre del componente anterior:

import React from 'react'
import { render } from 'react-dom'
import EmployeeForm from './EmployeeForm'

class App extends React.Component{
  
  save(employee){ 
    alert(JSON.stringify(employee))
  } 
		
  render(){
    return (
	  <EmployeeForm save={ this.save.bind(this) }/> 
	) 
  } 
} 
render(<App/>, document.getElementById('root'));

Podemos ver que al momento de crear el componente EmployeeForm , este le envía como una prop la función save . De esta forma, cuando el componente EmployeeForm , ejecute la propiedad, se lanzará una alerta con los datos capturados (línea 8).

Cuando es necesario “bindear” una función con una prop o queremos utilizar una función en un evento como onClick , onChange , etc. es necesario siempre empezar con this , y finalizar con binding(this)  como se ve a continuación this.<function>.bind(this) .

Debido a que un componente padre puede enviar cualquier propiedad a sus componentes hijos, React proporciona un mecanismo para validar las propiedades que espera un determinado componente, validar su estructura, tipo de dato y definir un valor por default, para eso existen dos términos llamados PropTypes y DefaultProps, de los cuales estaremos hablando en otra ocasión.

Conclusiones

Como hemos visto, las propiedades son el único método que ofrece React para transmitir información de forma descendente, desde un componente padre hacia sus hijos, sin embargo, existe otras alternativas como Redux, una librería que permite gestionar la información de la aplicación totalmente desacoplada de los componentes.

Una característica de los componentes, es su estado, el cual determina tanto la información que se muestras en pantalla, hasta como se representa la información, de esta forma, el estado puede cambiar la apariencia gráfica de un componente y la forma en que se muestra la información. Un ejemplo básico de un estado, es, por ejemplo, un formulario que puede pasar de modo lectura a escritura.

Como vemos en la imagen, una componente puede pasar de un formulario que no permite la edición, a otro donde los valores se muestran en <input>  para que el usuario pueda cambiar sus valores. Al guardar los cambios, el componente puede regresar a su estado principal. No vamos a entrar en los detalles de lo que es un estado, ni cómo es posible modificarlo, pues eso lo podremos para más adelante, por ahora, solo quiero que tengas una idea de lo que es el estado y cómo puede afectar la forma en que se muestra un componente.

Componentes sin estado

Este tipo de componentes son los más simples, pues solo se utilizan para representar la información que les llega como parámetros. En algunas ocasiones, estos componentes pueden transformar la información con el único objetivo de mostrarla en un formato más amigable, sin embargo, estos compontes no consumen datos de fuentes externas ni modifican la información que se les envía.

Los componentes sin estado también son llamados componentes de presentación, pero son mejor conocidos como Stateless Component por su nombre en inglés.

Para ejemplificar mejor este tipo de componentes vamos a analizar el siguiente archivo llamado ItemList.js , el cual representará un ítem de una lista de productos:

import React from 'react' 
class ItemList extends React.Component{ 
  constructor(props){ 
	super(props) 
  } 
  
  render(){ 
    return( 
	  <li>{this.props.product.name} - {this.props.product.price}</li> 
	) 
  }
 } 
 export default ItemList

Este componte utiliza algo que hasta ahora no habíamos utilizado, las Props, las cuales son parámetros que son enviados durante la creación del componente. En este caso, se le envía una propiedad llamada product, la cual debe de tener un nombre (name ) y un precio (price ).

Las propiedades o simplemente props, son parámetros que se le envían a un componente durante su creación. Los props pueden ser datos para mostrar o información para inicializar el estado. Como regla general, las props son inmutables, lo que quieres decir, que son de solo lectura. Para obtener las propiedades de un componente es necesario obtenerlas mediante el prefijo this.props , seguido del nombre de la propiedad.

Observemos que el componente ItemList  solo muestra las propiedades que recibe como parámetro, sin realizar ninguna actualización sobre ella.
Para completar este ejemplo, crearemos el componente App  que quedará de la siguiente manera:

import React from 'react' 
import { render } from 'react-dom' 
import ItemList from './ItemList' 

class App extends React.Component{ 
  render(){
    let items = [{ 9. name: 'Item 1', 10. price: 100 11. }, { 12. name: 'Item 2', 13. price: 200 14. }] 
	
	return ( 
	  <ul> 
	    <For each="item" index='index' of={ items }> 
		  <ItemList product={item}/>
		</For> 
	  </ul> 
	)
  } 
}

render(<App/>, document.getElementById('root'));

Veamos que hemos creado un array de ítems (línea 8), los cuales cuentan con un nombre y un precio. Seguido, iteramos los ítems para crear un componente <ItemList>  por cada ítem de la lista, también le mandamos los datos del producto mediante la propiedad product , la cual podrá ser accedida por el componente <ItemList>  utilizando la instrucción this.props.product .

Otra cosa importante a notar, es la línea 3, pues en ella se realiza la importación del nuevo componente para poder ser utilizando.

Componentes con estado

Los componentes con estado se distinguen de los anteriores, debido a que estos tienen un estado asociado al componente, el cual se manipula a mediad que el usuario interactúa con la aplicación. Este tipo de componentes en ocasiones consumen servicios externos para recuperar o modificar la información.

Un ejemplo típico de componentes con estados, son los formularios, pues es necesario ligar cada campo a una propiedad del estado, el cual, al modificar los campos afecta directamente al estado. Veamos cómo quedaría un componente de este tipo. Regresaremos al componente App  y lo dejaremos de la siguiente manera:

import React from 'react' 
import { render } from 'react-dom' 
import ItemItem from './ItemList' 

class App extends React.Component{ 
  constructor(){ 
    super(...arguments) 
       this.state = { 
       firstName: '', 
       lastName: '', 
       age: '' 
      }  
  } 
  
  handleChanges(e){ 
    let newState = Object.assign(this.state, {[e.target.id]: e.target.value}) 
    this.setState(newState) 
  } 

  render(){ 
    return ( 
      <form> 
        <label htmlFor='firstName'>Nombre</label> 
        <input id='firstName' type='text' value={this.state.firstName}  onChange={this.handleChanges.bind(this)}/>
        <br/> 
        <label htmlFor='lastName'>Apellido</label> 
        <input id='lastName' type='text' value={this.state.lastName}  onChange={this.handleChanges.bind(this)}/> 
        <br/> 
        <label htmlFor='age'>Edad</label> 
        <input id='age' type='number' value={this.state.age}  onChange={this.handleChanges.bind(this)}/> 
      </form> 
    ) 
  } 
} 
render(<App/>, document.getElementById('root'));

No vamos a entrar en detalle acerca de los estados, ni cómo se actualizan, más adelante lo veremos, por lo que solo te cuento rápido que está pasando.
Primero que nada, vemos que en el constructor se establece el estado inicial del componente, el cual tiene un firstName  (nombre), lastName  (apellido) y ege  (edad). Los cuales están inicialmente en blanco.
Seguido tenemos la función genérica handleChanges  que modifica el estado a medida que vamos capturando valores en los campos de texto. Y finalmente en el método render , retornamos 3 campos, correspondientes a las 3 propiedades del estado, adicional, cada campo está ligado a una propiedad del estado mediante la propiedad value . Cuando el usuario captura valores en los campos, se dispara la función handleHanges  para actualizar el estado.

Seguramente al ver esta imagen, no quede muy claro que está pasando con el estado, es por eso que utilizaremos el plugin React Developer Tools que puedes descargar desde chrome para analizar mejor como es que el estado se actualiza. Para esto, nos iremos al inspector, luego seleccionaremos el Tab React:

Una vez en el tab React, seleccionamos el tag <App>  y del lado izquierdo veremos las propiedades y el estado. Con el inspector abierto, actualiza los campos de texto y verás cómo el estado también cambia.

Se le conoce como componente con estado, a aquellos componentes que tiene estado y que adicional, manipulan el estado a medida que el usuario interactúa con ellos. Estos componentes también son conocidos como Componentes Contenedores, pero es más común llamarlos Stateful Components, por su nombre en inglés.

Conclusiones

Como hemos podido analizar en este artículo, existen dos tipos de componentes, con estado y sin estado, los cuales podrán ser utilizados según las necesidades que tengamos. Recordemos que los componentes sin estado solo se utilizan para representar las propiedades enviadas como parámetros o mostrar una estructura estática, mientras que los componentes con estados permiten interacturar con un estado que representa la información interna del componente, lo que les permite afectar la forma en que se ven y la como muestran los datos antes el usuario.

ECMAScript 5 – createClass

Este fue el primer método que existió para crear componentes en React y aun que ya está bastante anticuado, la realidad es que puedes encontrar mucho material en Internet que todavía utiliza este método. Es muy probable que ya no te toque trabajar con este método, sin embargo, no está de más mencionarlo y si te lo llegaras a encontrar, sepas de que están hablando.
Para crear componentes en ECMAScript 5 es necesario utilizar el método createClass  de la clase React, Veamos un ejemplo muy rápido:

var miComponent = React.createClass({ 
  propTypes: {...}, 
  getDefaultProps: {...}, 
  getInitialState: {...}, 
  render: function(){...} 
})

Lo primero que podemos ver, es que la clase se crea mediante la función React.createClass , el cual recibe un objeto que debe de tener al menos la función render, adicional, se puede declarar los propTypes , defaultProps  y el estado inicial del componente.

ECMAScript 6 – React.Component

Este es el método que hemos está utilizando hasta ahora, en la cual los componentes se crean mediante clases que extienden de React.Component . vemos un ejemplo rápido:

import React from 'react' 
class ECMAScript6Class extends React.Component{ 
  constructor(props){ 
    super(props) 
      state = {
        ...
      } 
    } 
	
  render(){ 
    return ( 
      ... 
    ) 
  } 
}

ECMAScript6Class.propTypes = { ... } 
ECMAScript6Class.defaultProps = { ... }

Cuando declaramos una clase, es necesario crear el constructor que reciba los props , para después enviarlos a la superclase, de esta forma iniciamos correctamente el componente. Los propsTypes  y defaultsProps  son declarados fuera de la clase. Este es el componente más recomendable cuando trabajamos con componentes con estado (Stateful). Pues permite un mejor control sobre el componente.

ECMAScript 6 – Function Component

La siguiente forma que soporta ECMAScript 6, es la creación de componentes mediante funciones, y es recomendado únicamente para componentes sin estado (Stateless). Veamos cómo quedaría:

cont MiComponent = ({prop1, prop2, prop2}) => ( 
  return( 
    ... 
  ) 
) 
MiComponent.propTypes = { 
  ... 
} 
MiComponent.defaultProps = { 
  ...
}

Observemos que el componente se reduce a una arrow function, la cual recibe como parámetros las props . El cuerpo de la función es como el método render, podremos crear variables, poner un poco de lógica y retornar un JSX.
Adicional, se puede definir los propTypes  y defaultProps  por fuera de la función.

ECMAScript 7 – React.Component

La última forma disponible, es utilizar las nuevas sintaxis de ECMAScript 7. Aunque todo apunta a que esta sea la mejor forma de declarar componentes, no es muy utilizada aun, debido a que ECMAScript 7 todavía se encuentra en desarrollo. Este método es muy parecido a la creación de componentes mediante React.Componentes  ES6. Veamos cómo quedaría:

class MiComponent extends React.Component { 
  static propTypes = {
    ...
  } 
  
  static defaultProps = { 
    ... 
  } 
  
  state = { 
	... 
  } 
  
  constructor(props){ 
    super(props) 
  } 
  
  render(){ 
    ... 
  } 
}

Este método es prácticamente igual que crear una clase en ES6, con la diferencia que es posible declarar el estado como una propiedad, adicional, podemos declarar los defaultProps  y propTypes  dentro de la clase y marcarlos como static  para poder ser accedidos desde fuera sin necesidad de crear una instancia.

Conclusiones

Como hemos podido observar, React ha venido cambiando la forma en que podemos crear componentes, permitiendo crear componentes desde una simple arrow function , hasta una clase JavaScript que extiende de React.Component , la forma de definir los defaultProps  y propTypes  también ha venido cambiando a medida que el lenguaje Javascript evoluciona y nos permite nuevas formas de definirlas, lo que nos hace pensar que seguramente veremos más formas de crear Componentes en el futuro.

Si todavía no sabes que es React o la forma en que este trabaja, te invito a que veas una Introducción a React JS que escribí hace unos días, en donde hablo de las ventajas y desventajas, así de porqué es tan exitoso este framework.

Tenemos básicamente 3 formas de implementar React en nuestro proyecto, la las cuales son mediante CDN, utilerías (boilerplate) o una configuración manual, aunque en la práctica y para desarrollos profesionales, solo se utilizan las dos últimas opciones, sin embargo, aquí vamos a explicar las 3 formas para que las conozcas y sea tu quien identifique qué forma se adapta mejor a tus necesidades.

Instalar React con CDN

Este es el método más simple, pues solo requiere importar React mediante el tag <script> directamente sobre el documento HTML en donde se requiere. Veamos un ejemplo:

<!DOCTYPE html>  
<html lang="es">  
  <head>  
    <title>Hello World React CDN</title>  
  </head>  
  <body>  
    <div id="root"></div>  
    <script src="https://fb.me/react-15.0.0.js"></script>  
    <script src="https://fb.me/react-dom-15.0.0.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>  
    <script cross src="App.js" type="text/babel"></script>  
  </body>  
</html>  

En el documento anterior podemos apreciar un documento HTML simple, sin nada más que una división <div> y 4 scripts, de los cuales, los dos primeros son necesario para tener a React disponible en nuestra página. El tercero, importa Babel, el cual es un transpilador que nos permite utilizar JSX para desarrollar con React.

JSX o JavaScript XML, es un lenguaje que extiende a JavaScript para hacerlo más potente y es el estándar para el desarrollo web con React, un que también es posible utilizar JavaScript puro.

El cuarto script (App.js) es un archivo Javascript que hemos creado para agregar toda la lógica de React y separarla del documento HTML, un que es posible insertar directamente el código dentro de la etiqueta <script> ahorrándonos la creación de un archivo adicional.

El archivo App.js se ve de la siguiente forma:

var HelloWorld = React.createClass({    
  render: function() {    
    return (    
      <h1>Hello World CDN</h1>    
    )    
  }    
});    
    
ReactDOM.render(    
  <HelloWorld/>,    
  document.getElementById('root')    
);

En las líneas 1 a 7 creamos un Componente llamado HelloWorld el cual retornará una etiqueta <h1> con la frase, “Hello World CDN”.

Finalmente, en las líneas 9 a 12 hacemos que React muestre nuestro componente dentro del elemento con id = root, el cual lo tenemos definido en el documento index.html.

Clave aclarar que este método es ajeno a cualquier web, ya sea Apache, NodeJS, ISS, o cualquier otro, por lo que puede ser montado en el que sea, el cual dará como resultado lo siguiente:

Instalar React con utilerías

Este segundo método es recomendado únicamente cuando vamos a desarrollar el FrontEnd, y asumimos que todos los servicios o recursos WEB ya está disponibles para ser consumidos.

Para este método será necesario instalar NodeJS + NPM, para lo cual, tendremos que ir a la página oficial de NodeJS y descargarlo. https://nodejs.org.

Puedes ver una introducción a NodeJS en el siguiente artículo.

Una vez que tenemos NodeJS instalado, deberemos instalar la utilería create-react-app mediante la ejecución del siguiente comando en la terminal: npm install -g create-react-app. Una vez instalada la utilería, deberemos ubicarnos mediante la terminal en la carpeta en la queramos crear el proyecto y ejecutar el comando: create-react-app <app-name>, donde <app-name> deberá ser el nombre del proyecto. Este comando tardará un momento, principalmente si es la primera vez que lo ejecutamos, pues descargará algunas dependencias.

Una vez terminada la instalación veremos lo siguiente:

El siguiente paso será cambiar de directorio al creado por la nueva aplicación, en nuestro caso app-test, para lo cual ejecutamos el comando cd app-test, y finalmente ejecutamos el comando npm start.

Esta acción levantará un servidor NodeJS en el puerto 3000, por lo que podremos ir al navegador y entrar a http://localhost:3000.

Como resultado, veremos la pantalla anterior y solo nos restará editar el archivo App.js para personalizar nuestra aplicación.

Instalar React manualmente.

El tercer método es el más complicado, pues requiere que configuremos todo el proyecto paso a paso, pero también es el más recomendado, pues permite que configurar cada aspecto de React y nuestro servidor NodeJS.

Este método es recomendado cuando queremos desarrollar el FrontEnd, pero adicional, requerimos desarrollar funcionalidad del lado del servidor. Muy utilizado para crear el FrontEnd + BackEnd.

Para iniciar este método, es necesario ubicarnos mediante la terminal en la carpeta en donde queremos crear el proyecto. Una vez allí, ejecutaremos el comando npm init -y. Este comando creará solamente el archivo package.json, el cual es el inicio para cualquier proyecto con NodeJS.

Lo siguiente será instalar todas las dependencias necesarias mediante npm. Es posible instalar todas las dependencias de una por una o agregar todas las dependencias al archivo package.json e instalarlas todas de una. En nuestro caso, actualizaremos el archivo package.json para que se vea de la siguiente manera:

{  
  "name": "app-test",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1"  
  },  
  "keywords": [],  
  "author": "",  
  "license": "ISC",  
  "devDependencies": {  
    "babel-core": "^6.24.1",  
    "babel-loader": "^7.0.0",  
    "babel-preset-es2015": "^6.24.1",  
    "babel-preset-react": "^6.24.1",  
    "webpack-dev-middleware": "^1.12.1",  
    "webpack": "^3.8.1"  
  },  
  "dependencies": {  
    "express": "^4.16.2",  
    "react": "^16.1.1",  
    "react-dom": "^16.1.1"  
  }  
}

Y continuaremos con la ejecución del comando npm install, este simple paso instalará todas las dependencias listadas en el archivo de forma automática.

Podemos apreciar dos secciones en el archivo, devDependencies que es para librerías para desarrollo y dependencies, las cuales estarán disponibles en todo momento, ya sea desarrollo o producción.

Las librerías que inician con babel-* son para permitir la transpilación de JSX a JavaScript nativo, mientras que Webpack y Webpack-dev-middleware son para el empaquetamiento del proyecto y de la compilación de los archivos (respectivamente).

Las librerías react y react-dom son las indispensables para utilizar react, mientras que express es un framework para desarrollo web con NodeJS.

Para que Webpack funcione, será necesario crear el archivo webpack.config.js sobre la raíz del proyecto, el cual se verá de la siguiente manera:

module.exports = {    
  entry: [    
    __dirname + "/app/App.js",    
  ],    
  output: {    
    path: __dirname + "/public",    
    filename: "bundle.js",    
    publicPath: "/public"    
  },    
        
  module: {    
    loaders: [{    
      test: /\.jsx?$/,    
      exclude: /node_modules/,    
      loader: 'babel-loader',    
      query:{    
        presets: ['es2015','react']    
      }    
    }]    
  }    
};

En este archivo tenemos 3 secciones, entry, que permite definir el punto de inicio de la aplicación, en este caso el archivo App.js.

Output, donde configuramos donde quedará los archivos empaquetados por Webpack, en este caso, definimos que estará disponibles en el path /public y que el archivo empaquetado se llamará public.js.

La sección module nos ayuda a definir como se llevará a cabo la transpilación y los archivos a procesar, en este caso, definimos que tome todos los archivos *.js y que excluya los que estén en la carpeta node-module, también indicamos que utilizará el modulo babel-loader para transpilar los archivos.

El siguiente paso será crear nuestro archivo index.html, el cual se verá de la siguiente manera:

<!DOCTYPE html>    
<html lang="es">    
  <head>    
    <title>Hello World React CDN</title>    
  </head>    
  <body>    
    <div id="root"></div>    
    <script type="text/javascript" src="/public/bundle.js"></script>    
  </body>    
</html>

Podemos ver que este archivo se ve más simple que en el primer método que analizamos, pues solo requiere hacer referencia al archivo bundle.js, el cual tiene toda la aplicación transpilada y empaquetada. Adicional, es necesario tener un div con id=root, para que sirve como punto de montado para React.

Los últimos pasos será crear nuestros archivos de React, me refiero a App.js y a nuestro componente HelloWord.js dentro de la carpeta /app:

import React from 'react'    
import { render } from 'react-dom'    
import HelloWorld from './HelloWorld'    
    
render((    
  <HelloWorld/>    
), document.getElementById('root'))

La función render es la encargada de montar el componente HelloWord dentro del elemento con ID =root

import React from 'react'    
    
class HelloWorld extends React.Component{    
    
  render(){    
    return(    
      <h1>Hello World!</h1>    
    )    
  }    
}    
export default HelloWorld

En este punto ya tenemos creada la aplicación en React, sin embargo, es necesario crear un servidor con NodeJS para que responda a las peticiones del puerto 3000 , para ello, deberemos crear el archivo server.js  en la raíz del proyecto:

var express = require('express');
var app = express();
var path = require('path')
var webpack = require('webpack')
var config = require('./webpack.config')
var compiler = webpack(config)

app.use('/public', express.static(__dirname + '/public'))
app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
}))

app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname, 'index.html'))
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
});

A grandes rasgos, este archivo lo que hace es responder a todas la peticiones en la url /* , es decir, todo lo que venga después de la raíz del dominio y enviar el archivo index.html , adicional, utiliza el módulo webpack-dev-middleware  para “Transpilar” la aplicación en tiempo real y crear el archivo bundle.js . En este punto, solo restaría ejecutar la aplicación con el comando node ./server.js . El componente HelloWord solamente imprime Hello Word! En pantalla.

Finalmente, código completo de la aplicación lo puedes encontrar en el siguiente repositorio de GitHub: https://github.com/oscarjb1/blog-react-hello-world

Conclusiones:

Instalar React puede parecer un reto la primera vez que lo utilizamos, pues no existe un IDE especial para React que nos ayude en la creación y configuración del proyecto, como es el caso de Java con Eclipse y NetBeans o C# con Visual Estudio. Sin embargo, una vez que entendemos como instalarlo y configurarlo ya no representa más un problema.

React es sin duda una de las tecnologías web más revolucionarias de la actualidad, pues proporciona todo un mecanismo de desarrollo de aplicaciones totalmente desacoplado del backend y ejecutado 100% del lado del cliente.

React fue lanzado por primera vez en 2013 por Facebook y es actualmente mantenido por ellos mismo y la comunidad de código abierto, la cual se extiende alrededor del mundo. React, a diferencia de muchas tecnologías del desarrollo web, es una librería lo que lo hace mucho más fácil de implementar en muchos desarrollos, ya que se encarga exclusivamente de la interface gráfica del usuario y consume los datos a través de API que por lo general son REST.

Te recomiendo el artículo SOAP vs REST en donde hablo de las diferencias que existen entre ambas.

El nombre de React proviene de su capacidad de crear interfaces de usuario reactivas, la cual es la capacidad de una aplicación para actualizar toda la interface gráfica en cadena, como si se tratara de una formula en Excel, donde al cambiar el valor de una celda automáticamente actualiza todas las celdas que depende del valor actualizado y esto se repite con las celdas que a la vez dependía de estas últimas.

Como funciona React

React es una librería de Javascript que nos permite crear la interface UI mediante una sintaxis propia llamada Javascript XML (JSX) el cual es una mezcla entre XML y HTML que permite la construcción de elementos HTML de una forma muy simple y rápida.

Las aplicaciones desarrolladas mediante JSX no pueden ser interpretadas por el navegador, por lo que es requerido que todo el código sea convertido a Javascript nativo mediante un proceso llamado Transpilación, el cual es parecido a la compilación, pero en este proceso no se lleva a cabo una compilación como tal, sino que el código es convertido de JSX a Javascript.

Este proceso es llevado a cabo mediante herramientas como Webpack el cual es el más ampliamente utilizado.

Como vemos en la imagen, Webpack es en realidad un empaquetador, el cual organiza, compacta y mediante plugins como Babel realiza la transpilación, arrojando como resultado una serie de archivos compactos y listos para ser utilizados.

React y el Backend

Como hablamos, React solo sirve para la creación de interface gráfica, por lo que el desarrollo del backend queda fuera de React y es precisamente eso lo que lo hace una librería super portable, ya que la podemos integrar con cualquier API ya desarrollada.

Como React no es capaz de resolver la parte del backend es necesario desarrollar el API de datos mediante otras tecnologías como NodeJS, el cual es por lo general el servidor más utilizado para el desarrollo con React.

El API es consumido mediante AJAX a medida que la aplicación lo demanda.

React y Web Components

React utiliza una forma de trabajar que a mi parecer se convertirá en el estándar en unos años más y es que utiliza un concepto llamado Web Componentes, el cual es la creación de tus propias etiquetas de HTML para representar tus componentes. Te imaginas crear un login en tu página utilizando una etiqueta como esta <login>, pues esta forma de trabajar es la que propone React, donde todo lo que desarrollemos sean componentes que puedan ser reutilizables cuantas veces queramos, incluso podrán ser empaquetadas como librerías para que las utilices en diferentes desarrollos. Esto lo puedes ver como si cada componente fuera una pequeña caja, y lo único que tenemos que hacer es colocar las cajas donde la necesitemos.

Como podemos ver en la imagen, cada parte de la aplicación puede ser un componente (etiqueta) el cual solo se tiene que agregar a la página para crear interfaces gráficas micho más rápido. Ahora veamos cómo quedaría esta misma página, pero en código con React:

import React from 'react'
import NavBar from './NavBar'
import Login from './Login'
import Footer from './Footer'

class LoginApp extends React.Component{

  render(){

    return(
      <div>
        <NavBar/>
        <Login/>
        <Footer/>
      </div>
    )
  }
}

Observemos que estamos utilizando las etiquetas <NavBar>, <Login> y <Footer> las cuales no son propias de HTML , pero sin componentes desarrollados en React, los cuales pueden ser simplemente importados y utilizados.

React y el Shadow DOM

React es una librería que se ejecuta del lado de cliente, por lo que es esta misma la encargada de actualizar el DOM a medida que el usuario interactúa con la UI, sin embargo, el proceso de actualización del DOM es un trabajo muy costoso para el navegador, por lo que actualizar el DOM cada vez que el usuario realiza una acción, no es una opción, es por esto que React provee un DOM propio llamado Shadow DOM el cual es una versión del DOM sobre la cual React trabaja para realizar los cambios, y una vez que calcula todos los cambios que hay que realizar es solo entonces cuando actualiza el DOM del navegador. Este proceso es en realidad muy complejo y React se encarga por completo de su gestión, por lo que como programadores no hace falta preocuparnos por estos detallas en la mayoría de las veces.

Cuando se realiza un cambio en el Shadow DOM, este se dé sincroniza con el DOM original y es necesario realizar un proceso llamado reconciliación, el cual es el encargado de aplicar los cambios del Shadow DOM al DOM real.

React y los Estados

Una de las principales características de React es que los componentes pueden mantener estados. Los estados le indican los datos que el componente muestra, e incluso el formato en se muestran.

Por ejemplo, podemos tener un formulario, el cual tenga los estados de solo lectura y edición, en el primero, solo mostraremos los datos en texto plano, como un <p> o un <span> mientras que cuando el formulario está en estado de edición, podemos representar el formulario con <imput type=”text” />

Cuando un componte por alguna razón modifica su estado, entra en lo que se le conoce como Dirty o Sucio, y esto le indica a React que debe de haber un proceso de Reconciliación para actualizar los datos en la UI.

Como ya hablamos en hace un momento, React utiliza programación Rectiva para actualizar los componentes, de tal forma, que cuando un componente es actualizado, todos los componentes hijos del árbol DOM serán evaluados para determinar si deben de ser también actualizados.

En la imagen podemos apreciar en Rojo, los componentes que fueron actualizados por el usuario, por lo que React deberá iniciar el proceso de Reconciliación para estos componentes, pero adicional, si este componente tiene componentes hijos, React deberá determinar si los hijos necesitan ser también actualizados en cascada, ha este proceso es a lo que se le conoce como programación Reactiva.

React es bastante inteligente para determinar que componentes deberán ser actualizado, sin embargo, React también nos da la posibilidad de ayudarle en este proceso, con la finalidad de optimizar aún más la forma en que se lleva a cabo la Reconciliación.

 Deploy de React

Finalmente, React tiene una forma muy particular de ser cargado por el navegador, pues cuando el usuario entra a la página, esta solo tiene un elemento, sobre el cual react montará toda la aplicación.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>

Adicional del elemento root, se carga un JavaScript llamado bundle.js el cual es en realidad TODA LA APLICACIÓN en un solo archivo, el cual es generado por Webpack tras ejecutar el proceso de Transpilación.

Cuando el bundle.js se carga por completo, remplaza el componente root por la aplicación desarrollada en React.

Referencias adicionales: introducción a reactjs por Miguel Gómez