Continuamos nuestra serie de artículos sobre ReactJS, pero nos centramos ya en la parte más práctica de esta librería Javascript y lo hacemos con un pequeño ejemplo en el que usaremos la herramienta Create React App, que nos permite obtener con un único comando el entorno de desarrollo ya listo para empezar a trabajar.
Uno de los problemas que tenía ReactJS al principio era que en ocasiones había que pelearse un poco con las configuraciones, gestores de paquetes, de tareas, transpiladores, linters, builders etc. Facebook ha resuelto esta complicación con Create React App. Por línea de comandos, nos ahorra la necesidad de configurar todo un entorno de trabajo, por lo que nos permite ponernos directamente a desarrollar sobre esta librería y disfrutar de toda la sencillez y rendimiento de ReactJS.
Instalación de Create React App
Este comando es CREATE REACT APP y se instala en tres pasos:
Primero instalamos Create React App con el siguiente comando de npm:
npm install -g create-react-app
Una vez lo hemos instalado nos metemos en la carpeta donde deseemos crear nuestro directorio de trabajo para el proyecto, y lanzamos el comando para comenzar la nueva aplicación:
create-react-app nueva-app-react
Mediante el anterior comando se cargan los archivos de un proyecto vacío y todas las dependencias de npm. Una vez terminado el proceso entraremos dentro de la carpeta de nuestra nueva app:
cd nueva-app-react
Ya dentro lanzaremos el comando que iniciará el servidor web y nos abrirá una página en nuestro navegador con un mensaje de bienvenida.
npm start
Con esto ya tendremos nuestro proyecto creado.
El propio terminal nos indicará la URL del servidor web donde está funcionando nuestra app. De manera predeterminada, será el http://localhost:3000/, aunque el puerto podría variar si el 3000 está ocupado.
Estructura del proyecto
Nuestra app React recién creada cuenta con varias carpetas:
- node_modules: dependencias npm del proyecto
- public: la raíz de nuestro servidor donde se podrá encontrar el index.html, el archivo principal y el favicon.ico, el icono de la aplicación.
- src: aquí es donde trabajaremos nuestro proyecto, donde vamos a colocar los archivos de nuestros componentes React.
Además encontrarás estos archivos sueltos, como el readme, el package.json, etc.
Hola Mundo en React
Casi todo nuestro trabajo del día a día lo realizaremos en la carpeta «src». Para comenzar y no despistarnos en nuestro primer «Hola Mundo», podríamos obviargran parte del código de nuestro archivo src/App.js y quedarnos con esto:
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1>Estamos comenzando con ReactJS</h1>
<h2>Comenzar con Create React App se hace muy sencillo</h2>
</div>
);
}
}
export default App;
En la primera línea import React, se está importando la librería React y la clase Component. Esta clase la usamos para extenderla y crear nuestra propio componente App.
Las clases que usamos para implementar componentes React solo necesitan un método render para poder funcionar. En nuestro caso el componente que estamos creando, llamado App (como el nombre de la clase), solamente tiene ese método render().
Como puedes observar, render devuelve un contenido que es el HTML necesario para pintar el componente en la página. El único detalle es que render debe devolver un único elemento HTML (en nuestro caso un <div>), sobre el que se anidarán cualquier número de elementos para crear la estructura del DOM necesaria para el componente.
Observa también que estamos usando clases de ECMAScript 6 para la creación de componentes. Actualmente es la manera recomendada, aunque no es la única. No necesitaremos preocuparnos porque ese Javascript no sea compatible con todos los navegadores, ya que Create React App configura el transpilador para hacerlo compatible con ECMAScript 5.
Guardando el archivo observamos como el navegador refresca la página automáticamente.
Con esto ya hemos creado nuestro primer componente y tenemos un acercamiento inicial a React, y muy sencillo gracias a Create React App.