Creando una Aplicación SPA con React

Para continuar con la serie de creación de aplicaciones SPA con los frameworks más populares, ahora es el turno de React

React es un framework Open Source para la construcción de interfaces de usuario interactivas, mantenida por Facebook. Más info:

React Website

Por mi trabajo, la mayoría aplicaciones que he desarrollado han usado Angular o AngularJS, pero recientemente he empezado a trabajara con React para algunos proyectos y aunque no es mi intención hacer una comparación entre estos dos frameworks y soy un fan de typescript, he empezado a inclinarme por React, sobre todo por la rapidez y facilidad para crear prototipos y componentes sin mucho esfuerzo de configuración.

El código completo del ejemplo que construimos en este tutorial lo puedes encontrar en el repositorio de Github:

diegoguevara/tutorial-react-hello-world-01

Instalar lo necesario

Create React App

El equipo de Facebook, creó una herramienta llamada Create React App la cual nos ayuda en la creación de nuestra aplicación en React.

Para instalarla:

npm install -g create-react-app

Usar create-react-app para crear nuestra app inicial

Ahora usamos la herramienta Create React App que instalamos para crear nuestra aplicación base.

Vamos a crear una aplicación llamada hello-world, para hacerlo solo digitados lo siguiente en la consola:

create-react-app hello-world

La herramienta creará una carpeta con el nombre hello-world y dentro empezará a instalar las librerías básicas necesarias para que funcione la aplicación React

En este punto ya tenemos una aplicación React funcionando.

hello-world/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

Para iniciarla, y siguiendo las instrucciones de la documentación escribimos:

cd hello-world
npm start

Ahora se compilará y se iniciará el servidor de desarrollo y con el que trabajaremos en la creación de nuestra aplicación. En este punto podemos ver la aplicación funcionando en:

http://localhost:3000

Configurar la aplicación SPA

En este punto, ya tenemos una aplicación React funcionando, pero aun no es una SPA.

Para configurar las rutas vamos a usar la librería react-router

npm install react-router --save

Que va a hacer nuestra aplicación

Vamos a crear una aplicación SPA que tendrá 3 rutas:

• Home: Página inicial
• Clientes: Lista de clientes
• Productos: Lista de productos

En la aplicación generada, todo el contenido de los componentes se creará dentro de la carpeta /src

Pasos 1 : Crear Componentes

Cada vista de la aplicación será un componente, para nuestra aplicación debemos crear 3 Componentes, home.js, clients.js, products.js

Componente Home

Creamos el archivo home.js Dentro de la ruta /src

import React, { Component } from 'react';

export default class Home extends Component {
  render() {
    return (
      <div>
        <h1>Hola, Bienvenido al sistema</h1>
      </div>
    );
  }
}

Componente Clients

Creamos el archivo clients.js Dentro de la ruta /src

import React, { Component } from 'react';

export default class Clients extends Component {
  render() {
    return (
      <div>
        <h1>Listado de Clientes</h1>
      </div>
    );
  }
}

Componente Products

Creamos el archivo products.js Dentro de la ruta /src

import React, { Component } from 'react';

export default class Products extends Component {
  render() {
    return (
      <div>
        <h1>Lista de productos</h1>
      </div>
    );
  }
}

Paso 2 : Configurar Rutas

Abrir el archivo /src/index.js, e incluir el import a la librería react-router

import { Router, Route, browserHistory } from 'react-router';

Adicionalmente, debemos incluir import a cada uno de los componentes que creamos anteriormente.

import Home from './home';
import Clients from './clients';
import Products from './products';

Luego dentro quitamos el tag <App /> y lo reemplazamos por la configuración de rutas.

El archivo index.js quedaría:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import Home from './home';
import Clients from './clients';
import Products from './products';

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={Home}></Route>
    <Route path="/clients" component={Clients}></Route>
    <Route path="/products" component={Products}></Route>
  </Router>,
  document.getElementById('root')
);

Paso 3 : Probando la aplicación

Ahora tenemos lista nuestra aplicación SPA.

Para probarla solo necesitamos iniciar el servidor de desarrollo:

npm start

E ingresar a la dirección de prueba:

http://localhost:3000

Podemos probar las otras rutas que creamos ingresando en el navegador:

http://localhost:3000/clients
http://localhost:3000/products

Como navegar entre rutas con links

Para crear links que permitan navegar entre rutas, vamos a hacer lo siguiente:

Abrimos el archivo home.js e importamos el componente Link de react-router

import { Link } from 'react-router';

Ahora solo incluimos el componente Link en donde no necesitamos:

<Link to="/clients" > Ir a Clientes</Link>

El ejemplo completo para home.js queda:

import React, { Component } from 'react';

import { Link } from 'react-router';

export default class Home extends Component {
  render() {
    return (
      <div>
        <h1> Hola, Bienvenido al sistema</h1>

        <ul>
            <li> <Link to="/clients" > Ir a Clientes</Link></li>
            <li> <Link to="/products" > Ir a Productos</Link></li>
        </ul>

      </div>
    );
  }
}

Exportar aplicación a Producción

Cuando ya tenemos todo listo, utilizamos el comando:

npm run build

Esto creará una nueva carpeta llamada /build con una versión optimizada de nuestra aplicación para producción. Solo necesitamos tomar la carpeta /build, publicarla y listo, nuestra aplicación React está al aire.

Código completo de ejemplo

El código completo del ejemplo lo puedes encontrar en:

diegoguevara/tutorial-react-hello-world-01

Conclusión (TL;TR)

Actualmente, tenemos una gran variedad de frameworks para escoger, algunos con más complejidad que otros, pero básicamente todos con resultados similares.

React es una gran herramienta, ya que nos ofrece un framework robusto y en mi opinion, con una curva de aprendizaje mucho mas pequeña.

Espero que con la serie de artículos que he publicado sobre React, AngularJS y Angular puedas comparar y sacar tus propias conclusiones a la hora de decidir cual framework utilizar en tus proyectos.