Creando tu propio boilerplate de React desde cero

¿Qué hace que un boilerplate de React sea bueno? A mi parecer, que contenga lo básico que pueda ser de utilidad para el desarrollo de proyectos actuales y futuros. Boilerplates para React se pueden encontrar por montón en la web, sin embargo, no siempre nos serán útiles las herramientas que estos incluyen, ya que a veces traen consigo demasiados paquetes que solamente estorbo nos hacen. Claro, en muchas ocasiones sí que se utilizan muchas dependencias y en especial para proyectos grandes, pero cuando deseamos hacer un proyecto pequeño, sencillo y que cumpla con nuestros objetivos primordiales, no nos serán necesarios tantos archivos. El día de hoy traigo una pequeña guía para construir un Boilerplate de React sencillo, con paquetes básicos y que nos permita construir proyectos de forma fácil y rápida.

Configuraciones iniciales y dependencias de desarrollo

Primero creamos un nuevo proyecto de node como siempre lo haríamos: npm init. A todas las preguntas que el CLI de node nos hace, vamos a responderlas como un sí y a llenar la información que nos solicita. Ahora, vamos a instalar ciertas dependencias necesarias: 

npm install --save-dev babel-core babel-core babel-preset-env babel-preset-react

Babel es un compilador de Javascript que transpila nuestro código en ES6 a código que todos los navegadores puedan entender. Ahora seguimos con más dependencias:

npm install --save-dev webpack webpack-cli webpack-dev-server image-webpack-loader html-webpack-plugin

Webpack es un bundler de Javascript que contendrá a toda nuestra aplicación y será lo que en realidad nos permitirá desplegar nuestra aplicación. Los últimos dos paquetes nos servirán para poder cargar imágenes a través de Webpack y para poder crear archivos HTML al momento de desplegar la aplicación en modo de producción. Para finalizar con las dependencias de desarrollo:

npm install --save-dev css-loader eslint eslint-loader eslint-plugin-react jest node-sass sass-loader style-loader

La primera dependencia interpreta todos los enunciados @import y url() como enunciados que Webpack pueda entender, para que cuando Webpack junte la aplicación, todos los estilos sean agrupados también. Los últimos tres paquetes ayudarán a cargar los estilos también y los archivos de Sass. ESLint es una utilidad de linting para Javascript que nos avisará de errores y advertencias durante el desarrollo de la aplicación web. Finalmente, Jest es una suite para realizar pruebas de Javascript.

Dependencias "normales"

Ahora, vamos a instalar paquetes persistentes en nuestra aplicación:

npm install --save react react-dom react-redux redux redux-thunk react-router react-router-dom bootstrap reactstrap firebase

React es una librería de Javascript que nos permitirá construir interfaces gráficas, Redux es un contenedor de estados que nos permitirá tener un mayor control del flujo de la información a través de nuestra aplicación, React Router es un paquete que nos permitirá  tener rutas dentro de nuestra aplicación. Como plus, añadimos tres librerías más al proyecto: Bootstrap, Reactstrap y Firebase. Reactstrap es una librería que recoge los elementos gráficos de Bootstrap y los coloca en componentes de React y Firebase es una colección de facilitadores de autenticación, almacenaje y bases de datos no-sql hecha por Google y nos servirá solamente para que nuestro boilerplate no esté vacío.

Estructura del proyecto

Lo siguiente será realizar la estructuración del proyecto, como sigue a continuación:

-- /assets
    -- /src
        -- /actions
        -- /components
        -- /firebase
        -- /reducers
        -- /styles
        -- constants.js
        -- index.html
        -- index.js
    -- .babelrc
    -- .eslintrc
    -- .gitignore
    -- LICENSE
    -- package-lock.json
    -- package.json
    -- webpack.config.js
    -- yarn.lock

Configuración de webpack y scripts

Ahora, lo siguiente será configurar Webpack para que haga su trabajo:

Primero (en la línea 10) establecemos que la entrada del proyecto será el archivo src/index.js y en la siguiente línea le decimos a Webpack que en el directorio /dist será donde tiene que colocar los archivos HTML generados y el archivo de javascript con todo nuestro código. A partir de la línea 16 establecemos ciertas reglas: en la línea 18 indicamos que babel-loader será el encargado de cargar y transpilar nuestro código ES6, en la linea 28 indicamos que el archivo que contiene las reglas de linting es .eslintrc y será aplicado sobre archivos de Javascript, en la línea 39 indicamos que para cargar los archivos .css se utilizarán style-loader y css-loader, así como en la línea 43 indicamos que los archivos .scss (de Sass) serán cargados a través de las mismas librerías más sass-loader. En la línea 47 indicamos que para cargar los archivos con extensión de imágenes, se utilizará primero file-loader y luego image-webpack-loader se encargará de anexar los archivos. En la línea 60 indicamos qué plugins utilizaremos. En este caso, solamente usaremos HTMLWebpackPlugin, con un archivo HTML de template que este plugin utilizará para generar los nuevos archivos HTML cada vez que nuestra aplicación sea generada:

Ahora, dispondremos de algunos scripts en nuestra aplicación:


El primer script es de Jest, para correr las pruebas que realicemos en nuestro proyecto. Más adelante veremos esta parte. El script start correrá nuestra aplicación en modo de desarrollo y el último script construirá nuestra aplicación en modo producción, para que pueda ser desplegada a la web.

Configurando el linting

Ahora, brevemente, configuraremos las reglas para que nuestro linter entienda el código de ES6 y React que escribamos:

En la segunda línea indicamos que utilizaremos los plugins recomendados de ESLint y los de React. En la línea 10 indicamos que entenderemos ES6 y en la línea 22 indicamos que la versión de React para hacer linting es la 15.

Index y Redux
Ahora crearemos el archivo index.js en /src y aplicaremos Redux al mismo:


En la línea 12 creamos el Store de Redux para nuestra aplicación, utilizando un reducer llamado "starter" (este reducer está vacío y no contiene nada). Aplicamos además Redux-thunk. Luego en la línea 17, indicamos que el proveedor de nuestra aplicación será el store que acabamos de crear y encerramos nuestra aplicación (App) dentro de un Router de React, que nos permitirá crear rutas dentro de nuestro proyecto. En la línea 23, indicamos que la entrada de nuestra aplicación para que el código de React sea inyectado será el div con id "app-entry-point", que colocamos en el template de HTML que realizamos antes. Será en el archivo App.js en dónde debemos de colocar nuestros componentes de React, estableciendo las rutas que nuestra aplicación tendrá.

Repositorio del proyecto y tests (bonus)
El objetivo de este post solamente era crear un boilerplate inicial y funcional, lo cual ya hemos cubierto hasta el momento. Sin embargo, podrán haber ciertos elementos que hay que revisar dos veces para poderlo implementar. Por ello, les dejo el enlace al repositorio del boilerplate:

react-starter-redux

En él, se puede observar cómo está dispuesto todo y además, se puede clonar el proyecto y, siguiendo las instrucciones del README se puede levantar un proyecto de React en cuestión de minutos.

Como bono, explicaremos un poco más el tema de los tests con Jest. En esta aplicación, utilizamos Firebase para guardar datos de los usuarios, en el archivo firebase/CollectionProvider/CollectionProvider.js se realizan estas conexiones a Firebase. En el mismo directorio, creamos el archivo CollectionProvider.testjs, que nos servirá para correr las pruebas que deseemos. En este caso, probaremos que la conexión a Firebase sea exitosa y que se agregue un objeto a la base de datos:


Primero establecemos que existirá un objeto, antes de crear cualquier otra cosa. Luego simplemente indicamos que nuestra prueba será que se conecte a la base de datos y se agregue el objeto. Para ello empleamos el método test y esperamos a la llamada asíncrona. Y listo, luego podemos correr nuestras pruebas con el script que realizamos antes (npm test).

Así que, hemos logrado construir un boilerplate bastante sencillo, pero que sirve para iniciar proyectos pequeños y que luego podemos escalar más. Recomiendo que visiten el repositorio y le echen una mejor vista a los archivos. Nos vemos en la próxima!

- Brolius