Con frecuencia desarrollo prototipos de ideas que se me pasan por la cabeza. Últimamente, todos los programo en ReactJS. Con el tiempo, he logrado refinar al máximo la creación de un entorno de desarrollo potente a la vez que rápido. En este post detallo, paso a paso, cómo configuro mi entorno de desarrollo para programar estos prototipos en ReactJS. En concreto, voy a explicar la herramienta hjs-webpack, que descubrí viendo un screen cast de ReactJS en FrontEnd Master. En este tutorial, sin embargo, solo vamos a ver la parte más básica: cómo ponerlo en funcionamiento con poco más de tres comandos.

Instalación

Lo primero que vamos a hacer es crear la estructura de carpetas y ficheros básicos del proyecto:

├── README.md
├── package.json
├── src
│   └── styles.scss
│   └── app.js
└── webpack.config.js

Como puedes ver, es extremadamente simple. Como te imaginarás, el punto de entrada de la aplicación es src/app.js.

Luego vamos a instalar todas las dependencias de desarrollo necesarias para empezar con un proyecto basado en ReactJS:

$ npm i babel-loader babel-preset-es2015 babel-preset-react gh-pages hjs-webpack -D -E

y el loader de los estilos:

$ npm i sass-loader node-sass style-loader css-loader postcss-loader -D -E

Instalamos sobre todo el babel-loader para poder escribir nuestro código ES6, pero también instalamos el propio hjs-webpack.

La peculiaridad de hsj-webpack es que es capaz de detectar qué loaders tenemos instalados en el proyecto y, sin tener que configurar nada, él solo empezará a usarlo como parte de la configuración de nuestro fichero webpack.config.js.

Lo siguiente será instalar las dependencias de producción:

$ npm i react react-dom -S -E

Package.json y webpack.config.js

Esta es la mejor parte, cuando escribimos nuestro webpack.config.js orientado a hjs-webpack. Como vas a ver, es bastante más simple que en otros proyectos:

// webpack.config.js

var getConfig = require('hjs-webpack')

module.exports = getConfig({  
  in: 'src/app.js',
  out: 'public',
  clearBeforeBuild: true
})

Eso es todo. Indicamos el punto de entrada de la aplicación, el directorio donde queremos hacer el build de nuestro código y si queremos borrar ese directorio entre cada build.

Como dije antes, lo genial de hjs-webpack es que se encarga de cargar los loaders que tengas instalados y de saber cuándo minimizar el código cuando sales a producción.

Por otra parte, nuestro package.json quedaría así:

{
  "name": "hjs-webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "hjs-dev-server",
    "build": "webpack",
    "deploy": "npm run build && gh-pages -d public"
  },
  "keywords": [],
  "author": "Carlos Villuendas <[email protected]>",
  "license": "MIT",
  "devDependencies": {
    "babel-loader": "6.2.4",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "css-loader": "0.23.1",
    "gh-pages": "0.11.0",
    "hjs-webpack": "8.1.0",
    "node-sass": "3.4.2",
    "postcss-loader": "0.8.2",
    "sass-loader": "3.2.0",
    "style-loader": "0.13.1"
  },
  "dependencies": {
    "react": "0.14.8",
    "react-dom": "0.14.8"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  }
}

En este package.json tenemos tres tareas importantes:

  1. start: Lanza un servidor de desarrollo con hot-reloading por defecto.

  2. build: compila todo el código que hay en src y deja el output en public. Fíjate que no hay que crear el fichero index.html, ya que eso lo hará hjs-webpack por ti, además de incluir los ficheros js y css necesarios. Una maravilla.

  3. deploy: Compila la aplicación y la publica en tu página de Github Pages.

Por último, ponemos algo de código en el app.jspara verlo funcionar:

//app.js
import React from 'react'  
import ReactDOM from 'react-dom'

import './styles.scss'

const Hello = () => <h1>Hello world!</h1>

ReactDOM.render(<Hello />, document.getElementById('root'))  

Aun sin haber creado nosotros el HTML, sabemos que hay un nodo con un id root sobre el que vamos a montar la aplicación de ReactJS.

Y con esto ya tenemos todo el entorno montado. El código completo de este ejemplo está en mi repositorio de Github.

Si te ha gustado este post, difunde la palabra. Tampoco dudes en dejar comentarios u observaciones. ¡Gracias! :)

Suscríbete a mi lista de correo

* Campos obligatorios