Desarrollando aplicaciones con ReactJS

25-11-2016
 
Logo ReactJS

Logo ReactJS

Ya tenemos las primeras aplicaciones con ReactJS y no podía dejar de escribir este post. ReactJS es uno de los chicos de moda en el mundo de los frameworks Javascript. No es para menos, nos permite crear aplicaciones web con una UX(User eXperience) muy parecida a la de una aplicación nativa.

Lo primero que debemos saber es que ReactJS es un framework para la vista. Para poder desarrollar aplicaciones con Javascript con una estructura decente utiliza EcmaScript/Javascript 2015(Último estandard de Javascript, que la mayoría de navegadores no soporta). Para esto tendremos que usar un ‘Transpilador’, es decir, un compilador que nos convertirá el Javascript escrito en una versión que acepten la mayoria de los navegadores.

Además de esto, el desarrollo de aplicaciones web con este Framework es bastante distinto a lo que estábamos acostumbrados. ReactJS profesionaliza el desarrollo de UX. Vamos a ver como lo hacemos para crear una aplicación con ReactJS:

Instalando el cliente CLI de ReactJS

Lo primero va a ser instalar el script de ReactJS en nuestra máquina. Para ello utilizaremos el gestor de paquetes Javascript Npm que ya os he hablado de el en el pasado:

sudo npm install -g create-react-app

Creando nuestra primera App con ReactJS

Ahora ya podemos crear nuestro proyecto:

create-react-app hello-world

Arrancando nuestra aplicación

Una vez tenemos nuestra proyecto creado podremos arrancarlo ejecutando, desde la carpeta del proyecto el siguiente comando:

npm start

Npm nos arrancará un servidor web para que podamos testear nuestro proyecto en producción.

Instalamos la librería Axios

Como en nuestra primera aplicación web con ReactJS queremos utilizar Ajax vamos a instalar también Axios(Un módulo ReactJS para poder hacer peticiones AJAX).

npm install axios

Nuestra primera aplicación ReactJS

ReactJS App

ReactJS App

Para empezar nuestra aplicación ReactJS editamos el fichero de nuestra aplicación ‘src/App.sh’ y lo dejamos como el siguiente:

import React from 'react';
import axios from 'axios';
import './App.css';

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state={ clientes: [ ] }
  }

  clickNombre(e) {
	e.preventDefault();

	alert("Click en el nombre");
	}

  render() {
    const cls=this.state.clientes.map( (cliente,index) => (
       <div><a href='#' onClick={this.clickNombre}>{cliente.nombre}</a></div>
       ) );

    return (
      <div className="App">       
          <h1>Listado clientes</h1>
	  {cls}
      </div>
    );
  }

  componentDidMount() {
    axios.get('./clientes.json').then(res => {
	this.setState( { clientes: res.data } );
      });
  }

}

export default App;

También nos ara falta tener datos. Para ello creamos el siguiente fichero ‘public/clientes.json'(Es solo para probar):

[
	{ "nombre": "Pepe" },
	{ "nombre": "Juan" },
	{ "nombre": "Javi" }
]

El ejemplo es una aplicación donde podemos ver como se renderiza la aplicación, hacemos peticiones Ajax y capturamos eventos.

Conclusiones

– Aplicaciones mucho mas rápidas gracias a su forma de tratar el DOM. Esto tiene un gran impacto en la UX(User eXperience).
– Entorno de trabajo productivo, haces cambios en el código y lo ves directamente en el navegador, sin necesidad de refrescar.
– Aplicaciones Web mucho mas modulares y ‘legibles’. Las grandes aplicaciones de Javascript actuales pueden llegar a ser complicadas de mantener.

Leave a Reply

© Albert Coronado Calzada