ReactJS | Preparando el flujo de desarrollo

Podemos configurar un ambiente de desarrollo para trabajar con React sin necesidad de herramientas de automatización ni engorrosos scripts. Basta con utilizar comandos npm para automatizar la transformación y empaquetado de nuestro código.

Configuración global.

Mediante el manejador de paquetes instalamos ‘http-server’ para poder servir nuestra aplicación en desarrollo.

$ npm install -g http-server

Creamos el directorio raíz de nuestra aplicación e inicializamos una aplicación mediante npm.

$ mkdir magicApp && cd magicApp && npm init

Reemplaza ‘magicApp’ por un nombre para el directorio de la aplicación.

Instalación de dependencias.

Para crear una aplicación con react ciertas dependencias son requeridas. Adicionalmente, instalamos algunas dependencias para optimizar nuestra productividad durante el proceso de desarrollo.

$ npm install --save react
$ npm install --save react-dom

Dependencias solo para desarrollo.

$ npm install --save-dev babel-preset-es2015
$ npm install --save-dev babel-preset-react
$ npm install --save-dev babelify
$ npm install --save-dev browserify
$ npm install --save-dev watchify

Optimizando el proceso de desarrollo.

Para transformar el código ES6 a javascript compatible con todos los navegadores y empaquetar los componentes React en un solo archivo. Colocamos el siguiente script en el archivo ‘package.json’  de nuestra aplicación. (El script se coloca dentro del campo “scripts” del archivo).

"watch": "watchify -t [ babelify --presets [ react ] ] ./src/js/app.js -o ./build/bundle.js -v"

Puedes reemplazar ‘./src/js/app.js’ por el archivo de arranque/entrada de tu aplicación. ‘./build/bundle.js’ es el archivo de salida donde se escribirá todo el código procesado y transformado para la aplicación (Usualmente este archivo será incluido en la página html donde se ejecutará la aplicación).

Para ejecutarlo, en la raíz de la aplicación lanza el comando:

$ npm run watch

y el código se compilara automáticamente cada vez que se guarden modificaciones en algún archivo utilizado a partir del archivo principal ‘./src/js/app.js’.

Con esto, tenemos la base para comenzar con una aplicación React.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s