Configurar un entorno de desarrollo para React y ES6 con Webpack

Tras algunos meses trabajando con React finalmente he conseguido configurar un entorno de desarrollo práctico y funcional para trabajar. Es este post intentaré explicar a modo de tutorial como configurar un entorno desde cero utilizando Webpack.

 

entorno-desarrollo-react-es6-webpack

Personalmente y dado que estamos en 2016 me gusta trabajar con ES6 – imagino que como a la mayoría de vosotros – por lo que vamos a necesitar compilar nuestro código JavaScript, bien, para esta tarea utilizaremos Babel y como no podría ser de otra forma para los estilos CSS utilizaremos SASS, así que también necesitaremos compilarlo con node-sass y los loaders de Webpack.

 

Estructura del proyecto

Lo primero que necesitamos es definir la estructura de archivos para nuestro proyecto. No voy a entrar en como organizar los archivos JavaScript ni los archivos SASS ya que entiendo que esto depende más del tipo de proyecto y de los gustos o requisitos del equipo de desarrollo. Por el momento y para el propósito de este artículo propongo la siguiente estructura:

react-app
 |-- scss
 |-- js
 |-- index.html
 |-- main.js
 |-- package.json
 |-- webpack.config.js

Podéis crear los archivos a “manufla”, personalmente prefiero utilizar la terminal así que vamos paso a paso.

 

Instalando dependencias

Lo primero es crear el archivo package.json en el cual quedará reflejada toda la información sobre nuestro proyecto de Node como el nombre, autor, versión, dependencias, scripts, repositorio git, etc. para ello navegamos desde la terminal al directorio de nuestro proyecto y tiramos el siguiente comando:

npm init

A partir de aquí la terminal nos irá pidiendo los datos necesarios para rellenar debidamente nuestro package.json. Una vez creado necesitaremos instalar React y react-dom. Dependiendo del proyecto es muy probable que necesitemos instalar react-router, react-mixin o cualquier otra librería, pero de momento nos vale con estas dos.

npm install --save react react-dom

Ahora le toca el turno a Babel y sus secuaces. Además del core de Babel necesitaremos babel-loader para Webpack y los presets para ES6 y JSX que es la sintaxis que utiliza React para renderizar los componentes.

npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

Ok, ahora vamos a instalar las dependencias necesarias para poder trabajar con SASS.

npm install --save-dev node-sass css-loader sass-loader style-loader

Bien, en este punto necesitamos instalar algunas dependencias globales. Es muy probable que si habéis trabajado antes con Babel y con Webpack ya las tengáis instaladas, en cuyo caso podéis omitir este paso o instalar solo las que necesitéis.

npm install babel webpack webpack-dev-server -g

Ok, llegados a este punto es la hora de crear los primeros archivos. Necesitaremos un index.html (obvio), un archivo App.js que hará de punto de entrada para nuestro JavaScript y un archivo de configuración para Webpack webpack.config.js. Al lio.

touch index.html App.js webpack.config.js

Si todo ha salido bien con esto ya tenemos instalado todo lo necesario para arrancar el proyecto, ahora toca configurar Webpack.

 

Configurando webpack-dev-server

Este archivo no es más que un pequeño servidor Express que utiliza el middleware de Webpack (webpack-dev-middleware) para servir un paquete Webpack o Webpack bundle. Lo que hará será conectarse al servidor a través de Socket.IO para que cada vez que el servidor emita un evento informando sobre el estado de compilación, el cliente reaccione a dicho evento.

En el archivo de configuración de Webpack necesitamos configurar el punto de entrada de nuestra aplicación, la ruta y el fichero de salida para el código JavaScript compilado por Babel, la configuración para el servidor local y los loaders que vayamos a necesitar, en nuestro caso necesitamos uno para JS y otro para SASS.

module.exports = {
  // JavaScript entry point
  entry: './App.js',
  // JavaScrip bundle file
  output: {
    path: './',
    filename: 'index.js'
  },
  // Setup server
  devServer: {
    inline: true,
    port: 8081
  },
  module: {
    // JS, JSX and SASS loaders
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }
    ]
  }
};

Con esto ya tenemos todo lo necesario para comenzar a trabajar en nuestro proyecto. Para que sirva de ejemplo y no alargar este post demasiado vamos a crear una aplicación de lo más sencilla con un solo componente.

 

Creando los archivos del proyecto

Lo primero crearemos el archivo .html en el cual se visualizará nuestra aplicación. No voy a entrar en detalles ya que entiendo que todos sabemos como va esto.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
</head>
<body>

  <div id="app"></div>

  <script src="index.js"></script>

</body>
</html>

 

Perfecto, es el momento de crear un componente y renderizarlo en nuestro .html.

'use strict';

import React from 'react'

class MyComponent extends React.Component {

  constructor (props) {
    super(props)
  }


  render () {
    return (
      <div className="audioplayer">
        <h1>Hi! I'm a React Component</h1>
      </div>
    )
  }
}

export default MyComponent
import React from 'react'
import ReactDOM from 'react-dom'

// Import app styles
require('./scss/style.scss');

// Import component
import MyComponent from './app/MyComponent'

ReactDOM.render(<MyComponent />, document.getElementById('app'))

Hasta aquí nada de especial, tenemos un componente y lo renderizamos en el .html por medio del método render() de react-dom. Lo interesante de este archivo es la línea que “carga” el código SASS. Webpack se encargará de compilar cada fichero .scss al momento de salvarlo (al igual que ocurre con los archivos .js) y refrescará nuestro navegador para actualizarse con los cambios. Sin duda algo super util a la hora de desarrollar aplicaciones web.

Bien, pues ya tan solo nos falta crear el script que arrancará el server Webpack. Para eso editamos los scripts del package.json como sigue.

{
  ...
  "scripts": {
    "start": "webpack-dev-server"
  }
  ...
}

Eso es todo, tan solo hemos de ejecutar el script desde la terminal y acceder al puerto 8081 (o el que que os hayáis configurado) de nuestro localhost desde cualquier navegador.

npm run start
// or
npm start

 

Espero que os resulte util.

Hasta la próxima!

  • Pingback: Configurar un entorno de desarrollo para React y ES6 con Webpack()

  • Eider Mejia

    gracias buena informacion fue de mucha ayuda

  • Mark

    Que nombre deberia llevar cada archivo?

  • Buenas Mark,
    los nombres de los archivos los creo con la siguiente linea:


    touch index.html App.js webpack.config.js

    Justo en el párrafo anterior hablo sobre que archivos se necesitan.
    Saludos!

  • Fredo379

    Hola y configuro esto para trabajar con jsx?

    • Personalmente no utilizo la extensión .jsx, pero si lo prefieres puedes trabajar así.

  • Eurico De Luis Alvarez

    da un fallo aqui

    Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
    – configuration.output.path: The provided value “Users/Uri/paginas/tattoo_page” is not an absolute path!

    • Qué versión de Webpack estás utilizando? Como puedes ver este post ya tiene tiempo y es posible que el error se deba a conflictos entre versiones.