¿Qué es ReactJS? Conceptos básicos

ReactJS es otro de los framework imprescindibles que debes conocer. Desarrollado por Facebook, ReactJS es una biblioteca JavaScript de código abierto muy extendida. Los desarrolladores lo utilizan principalmente en la creación de interfaces de usuario y ocuparse de esta capa de visualización de una manera mucho más ágil, versátil y rápido que otros frameworks como por ejemplo AngularJS.

También es una alternativa sólida para crear tanto aplicaciones web SPA de una sola página como incluso aplicaciones para móviles. Para ello, alrededor de React existe un completo ecosistema de módulos, herramientas y componentes capaces de ayudar al desarrollador a cubrir objetivos avanzados con relativamente poco esfuerzo.

¿Por qué debería aprender ReactJS?

React se puede utilizar para crear todo tipo de aplicaciones web, para móviles, e interfaces y mucho más. ReactJS es un framework JavaScript moderno, declarativo y eficiente que permite un desarrollo flexible y hace que la creación de interfaces de usuario interactivas/front-end sea divertida y completamente indolora.

Es también un framework con un amplio respaldo en la comunidad debido a que cuenta con Facebook como su principal impulsor. Debido a esto es muy fácil encontrar documentación o buscar ayuda gracias a la comunidad en redes sociales (Facebook, Google, Twitter, LinkedIn, GitHub, Stackoverflow, Reddit, etc.).

Debido a que Facebook está detrás de ReactJS su creación se realizó en base a unas necesidades concretas, derivadas del desarrollo de la web de la popular red social pero con el tiempo muchas otras aplicaciones web de primer nivel la fueron adoptando. Así nombres como BBC, Airbnb, Netflix, Dropbox y un largo etc hacen uso intensivo de ReactJS.

Características de React.JS

Al igual que otros marcos web Javascript, ReactJS tiene muchas características principales que podrían ser su consideración. Son:

  • Composición de componentes.
  • Desarrollo Declarativo Vs Imperativo.
  • Flujo de datos unidireccional.
  • Performance gracias al DOM Virtual.
  • Isomorfismo
  • Elementos y JSX.
  • Componentes con y sin estado.
  • Ciclo de vida de los componentes.
  • Ideal para aplicaciones de alta demanda.
  • Permite el desarrollo de aplicaciones móviles.

Primeros pasos con ReactJS

Cuando vas a trabajar por primera vez con ReactJS es cuando surgen las primeras dudas. Sobretodo si no eres un experto desarrollador frontend. La mejor opción suele ser usar el paquete create-react-app. Te permitirá empezar muy rápido y ahorrarte muchos pasos de configuración inicial de un proyecto.

Cuando creamos una aplicación o sitio web se realizan una serie de pasos repetitivos y si esto no fuera poco además tenemos que lidiar con una serie de herramientas que formarán parte del tooling de un frontend developer, como gestores de paquetes, de tareas, transpiladores, linters, builders, live reload, etc.

Y claro, si estas comenzando, todo eso añade un nivel de complejidad que nos hace perder el foco de nuestro workflow del proyecto.

Aquí es donde entra create-react-app, ofreciéndonos todo lo necesario para comenzar una app con React, pero sin tener que perder tiempo configurando herramientas.

Para instalar Create React App debemos hacerlo con el siguiente comando de npm:

npm install -g create-react-app

Una vez lo hemos instalado de manera global, nos metemos en la carpeta de nuestros proyectos y lanzamos el comando para comenzar una nueva aplicación:

create-react-app mi-ap

Así se cargarán los archivos de un proyecto vacío pero con todas las dependencias de npm necesarias para comenzar.

Hola Mundo

Este es el más simple de los ejemplos posibles pero nos servirá para dar nuestros primeros pasos, por supuesto existen otros muchos ejemplos de React en la red pero para comenzar Hola Mundo no está nada mal:

ReactDOM.render(
  <h1>¡Hola Mundo!</h1>,
  document.getElementById('root')
);

Este muestra un encabezado con el texto “¡Hola Mundo!” en la página.

Construyendo una calculadora con React.JS

Siguiendo el ejemplo anterior primero ejecutaremos el comando create-react-app en nuestro directorio para crear la estructura básica de nuestra aplicación. Para el siguiente ejemplo, nuestra calculadora necesitará al menos dos componentes. Uno en donde se puedan mostrar los resultados como salida y otro componente donde se mostrará el teclado para introducir valores.

En la carpeta src, crearemos un directorio llamado component. Aquí es donde codificaremos nuestros componentes. Allí creamos el fichero ResultComponent.js donde añadiremos el siguiente código:

import React, {Component} from 'react';

class ResultComponent extends Component {


    render() {
        let {result} = this.props;
        return (
            <div className="result">
                <p>{result}</p>
            </div>
    )
        ;
    }
}

export default ResultComponent;

Nuestro componente de resultados consta de una sola etiqueta <p> que mostrará el contenido de salida.

A continuación, crearemos otro componente para el teclado pero nada muy elaborado, solo un grupo de botones que hacen algo cuando se hace clic. Este es el código para el archivo KeypadComponent.js.

import React, {Component} from 'react';

class KeyPadComponent extends Component {

    render() {
        return (
            <div className="button">
                <button name="(" onClick={e => this.props.onClick(e.target.name)}>(</button>
                <button name="CE" onClick={e => this.props.onClick(e.target.name)}>CE</button>
                <button name=")" onClick={e => this.props.onClick(e.target.name)}>)</button>
                <button name="C" onClick={e => this.props.onClick(e.target.name)}>C</button><br/>


                <button name="1" onClick={e => this.props.onClick(e.target.name)}>1</button>
                <button name="2" onClick={e => this.props.onClick(e.target.name)}>2</button>
                <button name="3" onClick={e => this.props.onClick(e.target.name)}>3</button>
                <button name="+" onClick={e => this.props.onClick(e.target.name)}>+</button><br/>


                <button name="4" onClick={e => this.props.onClick(e.target.name)}>4</button>
                <button name="5" onClick={e => this.props.onClick(e.target.name)}>5</button>
                <button name="6" onClick={e => this.props.onClick(e.target.name)}>6</button>
                <button name="-" onClick={e => this.props.onClick(e.target.name)}>-</button><br/>

                <button name="7" onClick={e => this.props.onClick(e.target.name)}>7</button>
                <button name="8" onClick={e => this.props.onClick(e.target.name)}>8</button>
                <button name="9" onClick={e => this.props.onClick(e.target.name)}>9</button>
                <button name="*" onClick={e => this.props.onClick(e.target.name)}>x</button><br/>


                <button name="." onClick={e => this.props.onClick(e.target.name)}>.</button>
                <button name="0" onClick={e => this.props.onClick(e.target.name)}>0</button>
                <button name="=" onClick={e => this.props.onClick(e.target.name)}>=</button>
                <button name="/" onClick={e => this.props.onClick(e.target.name)}>÷</button><br/>
            </div>
        );
    }
}


export default KeyPadComponent;

Con esto, hemos completado nuestra aplicación de calculadora con React.JS. Quedaría añadir algo de CSS para mejorar su aspecto visual.

calculadora ReactJS

Ha quedado bien, ¿cierto? Pero quieres saber más o descargarte el código fuente completo puedes hacerlo desde el siguiente enlace.

Conclusión:

Esto es solo una pequeña muestra de lo que podemos hacer en muy poco tiempo. Cabe señalar que React es válido para hacer componentes que se pueden usar dentro de aplicaciones ya existentes lo que aumenta sus capacidades.

ReactJS está en todas partes. Negar su importancia en estos momentos es casi como negar la propia existencia de la web. Cada vez más desarrollos utilizan este entorno de trabajo como base para sus proyectos y si deseas actualizar tus conocimientos, sin duda comenzar a trabajar con React es el camino a seguir.

 

 

He leído y acepto la política de privacidad
Acepto recibir emails sobre actividades de recruiting NTT DATA