En el artículo anterior Introducción a ReactJS vimos como que es React y un par de pequeños ejemplos de como crear un componente, en este artículo instalaremos todo lo necesario para correr React en nuestra computadora.
Instalar Node
Lo primero que tenemos que tener instalado es Node, preferiblemente en su última versión.
Mac OS X o Linux (Recomendada)
Si tienes cualquiera de estos dos sistemas operativos recomiendo instalar node con NVM, este es un manejador de versiones de node que permite cambiar de versiones cuando lo necesites y mantener actualizado node a su última versión de forma sencilla.
Nota: Para linux necesitas tener instalado build-essentials y libssl-dev.
Los pasos para instalarlo son:
1- Ejecutar en el terminal:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash
2- Para instalar la última versión de node ejecutamos:
nvm install node
Para más información ve a la página de NVM.
Mac OS X (Alternativo)
Tienes dos opciones ir a la página de Node descargar el instalador y ejecutarlo o instalarlo con brew ejecutando:
brew update brew install node
Con cualquiera de los dos métodos debería quedar instalado node y npm.
Si ya lo tenías instalado lo puedes actualizar con:
brew update node
Linux (Alternativo)
Puedes instalar node en Linux usando cualquier instalador de paquetes de tu distribución por ejemplo para Debian y Ubuntu ejecutando:
sudo apt-get update sudo apt-get install build-essential libssl-dev sudo apt-get install nodejs npm
También puedes descargar el instalador desde la página de Node
MS Windows
Descarga el instalador desde la página de Node
Instalar Webpack
Hay dos librerías que se utilizan con React para crear el bundle de nuestra aplicación, hacer live reload y mucho más una es browserify y la otra es Webpack, yo prefiero Webpack y por eso indico como se instala aquí, si prefieres browserify instala ese.
Para instalar Webpack simplemente ejecutamos:
npm install webpack -g
También necesitaremos el Webpack-dev-server para instalarlo ejecutamos:
npm install webpack-dev-server -g
Esto instalará el paquete de webpack y webpack-dev-server de manera global.
Instalar Babel
En nuestros ejemplos vamos a estar utilizando ES6 (o ES2015 como prefieras llamarlo) y para esto necesitamos Babel que “transpila” o transforma el código ES6 a la versión anterior para que sea entendido por todos los navegadores, sin tener que preocuparnos de nada.
Para instalarlo ejecuta:
npm install babel -g
Empezando un proyecto
Listo esas son las herramientas que necesitamos ahora veremos con configurar un proyecto de ejemplo con estas herramientas.
En este ejemplo vamos a hacer un simple botón que al presionarlo nos muestre un número aleatorio.
Creamos un directorio que yo voy a llamar react-configuracion
mkdir react-configuracion
cd react-configuracion
Una vez dentro del directorio ejecutamos:
npm init
Presionamos Enter para seleccionar todas las opciones por defecto, después lo podremos cambiar en el archivo package.js.
Esto inicializará nuestro proyecto con un archivo package.js.
Ahora tenemos que instalar react y react-dom ejecutando:
npm install react react-dom --save
Eso lo instalará y lo guardará en nuestras dependencias.
Para que no tengamos errores en la instalación debemos declarar webpack y webpack-dev-server en nuestras dependencias para eso ejecutamos:
npm install webpack webpack-dev-server --save-dev
Ahora instalaremos algunos preset de Babel:
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
Nota: Recuerda que debes tener instalado babel, webpack y webpack-dev-server como lo indicamos en los pasos anteriores.
Ahora vamos a empezar a crear nuestra aplicación.
Primero creamos un archivo llamado webpack.config.js en tu editor favorito, este archivo es donde indicaremos como se compilará nuestro proyecto y donde se hará la transformación de JSX a Javascript, en este archivo colocamos lo siguiente:
module.exports = {
entry: './main.js', //cual es la entrada de nuestra aplicacion
output: {
path: './', //donde colocará los archivos al terminar
filename: 'index.js' //el nombre de nuestro bundle
},
devServer: { // opciones para el servidor de desarrollo
inline: true, // para que se recargue automáticamente cuando cambie un archivo
port: 3333 // puerto donde funcionará el servidor
},
module: {
loaders: [
{
test: /\.js$/, //probamos por la extensión .js
exclude: /node_modules/, //no queremos procesar los archivos en node_modules
loader: 'babel', //utilizamos babel
query: { //cargamos los presets que instalamos
presets: ['es2015', 'react']
}
}
]
}
};Todo está comentado en el archivo para que lo puedan entender mejor.
Ahora creamos un archivo llamado index.html con el siguiente contenido:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Número Aleatorio</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>Un HTML estandar donde agregamos un div con id #app que será nuestro elemento target para la aplicación e incluimos el index.js que es el bundle que crea Webpack como lo indicamos anteriormente.
Creamos un archivo llamado App.js donde crearemos nuestro primer componente, colocamos el siguiente contenido:
import React from 'react';
const App = React.createClass({
getInitialState() {
return { num: Math.ceil(Math.random() * 6) };
},
getNumeroAleatorio() {
this.setState({num:Math.ceil(Math.random() * 6)});
},
render() {
return (
<div>
<p>{this.state.num}</p>
<button onClick={this.getNumeroAleatorio}>Lanzar</button>
</div>
)
}
});
export default App;Simplemente estamos creando un componente con JSX, con un estado inicial de un número aleatorio, una función que coloca el estado de num en un número aleatorio, el componente como tal que consiste en mostrar el número y un botón para actualizarlo que llama la función getNumeroAleatorio. Finalmente exportamos la clase. Puedes ver más de los componentes en el primer artículo de Introducción a ReactJS.
Luego creamos el archivo main.js donde mostraremos nuestro componente, en este archivo colocamos lo siguiente:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));Aquí importamos la librerías necesarias y nuestro componente que acabamos de crear, luego indicamos con ReactDOM.render() que muestre nuestro componente App (primer argumento), y que lo asocie con el div con id app que creamos en nuestro index.html.
Por último modificamos nuestro archivo package.js, eliminamos la linea que dice test dentro de scripts y agregamos una nueva linea de start donde llamamos a webpack-dev-server.
{
"name": "react-configuracion",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7"
},
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
}El cambio ocurre en la línea 7, “start”: “webpack-dev-server”.
Guardamos todos los archivos y en nuestra terminal dentro del directorio del proyecto ejecutamos:
npm start
Nuestro servidor correrá en el puerto 3333 como lo indicamos en el archivo de webpack.config.js.
Abrimos nuestro navegador en:
localhost:3333
y deberíamos ver algo como:
Si hacemos click en el botón nos debería mostrar un número aleatorio del 1 al 6.
Si cambiamos algo nuestro servidor debería recargar automáticamente, puedes probar cambiado la palabra lanzar en el botón en App.js por otra cosa y deberías verlo en el navegador sin necesidad de hacer click en botón de recargar.
Eso es todo por ahora, tenemos una base para nuestros futuros proyectos.
Cualquier duda o sugerencia puedes dejar un comentario.