Comenzar con React

Hola amigos, hoy quiero hablar sobre como empezar con React, ya que hace poco empecé a trabajar con esta librería y quiero compartir lo que aprendí. Antes de comenzar voy a dar una muy pequeña introducción de que es cada cosa que vamos a utilizar:

– React: Librería para crear interfaces UI es decir, la V del modelo vista controlador. Fue creada por Facebook y es utilizada para crear componentes ui en Facebook y Instagram.

– ES6/ES2015: EcmaScript 6 o EcmaScript 2015 es la última versión de javascript.

– Webpack: Webpack es simplemente un empaquetador de módulos hecho específicamente para desarrollo Frontend, pero posible de usar incluso en Backend. Webpack esta pensado para módulos de JS, usando los sistemas de módulos de CommonJS, AMD e incluso ES6.

– Babel: Para transpilar con webpack a código ES5 que es el que entienden los navegadores.

Vamos a empezar a instalar webpack con npm de form global

    npm install webpack -g 

Luego vamos a crear una carpeta de nombre react-test y vamos ingresar y crear nuestro package.json con npm init. Configuramos todo y instalamos las dependencias que necesitamos:

Instalamos react:

    npm install react react-dom --save 

Instalamos las dependencias de babel:

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

Algunas plugins de webpack:

    npm install webpack-dev-middleware webpack-hot-middleware --save-dev

Dependencias para poder import css, imágenes desde javascript:

    npm install css-loader file-loader style-loader url-loader --save-dev

Dependencias de eslint:

    npm install es-lint eslint-config-airbnb eslint-plugin-babel eslint-plugin-react --save-dev

Podríamos agregar otras dependencias que podríamos llegar a necesitar como react-router (Router para react) o jquery, etc. Esto puede ser necesario dependiendo del proyecto:

Bueno después de instalar todo pasamos a crear nuestros archivos de webpack para compilar todo. Me gusta separar en dos archivos webpack.config.js (Para producción) y webpack.config.dev.js (Para desarrollo).

Empezamos por webpack.config.js:

    const path = require('path');
const webpack = require('webpack');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: {
    a: './src/index.js'
  },
  output: { path: __dirname, filename: 'build/bundle.js' },
  watch: true,
  plugins: [
    /**
     * See description in 'webpack.config.dev' for more info.
     */
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    /**
     * Some of you might recognize this! It minimizes all your JS output of chunks.
     * Loaders are switched into a minmizing mode. Obviously, you'd only want to run
     * your production code through this!
     */
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url'
      }
    ]
  },
};

Esto toma como entry point el archivo src/index.js y devuelve todo transpilado a es5 y minificado para producción en build/build.js.

Luego para el archivo webpack.config.dev.js el contenido sería el siguiente:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: {
    a: './src/index.js'
  },
  output: { path: __dirname, filename: 'build/bundle.js' },
  watch: true,
  plugins: [
    /**
     * DefinePlugin allows us to define free variables, in any webpack build, you can
     * use it to create separate builds with debug logging or adding global constants!
     * Here, we use it to specify a development build.
     */
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    }),
  ],
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url'
      }
    ]
  },
};

Idem que lo anterior pero no esta minificado para producción. En este archivo se pueden agregar más plugins para el trabajo en desarrollo, pero así básico para el ejemplo esta bien.

Entonces tenemos nuestros archivos webpack para empaquetar todo nuestro código y tenemos las dependencias instaladas. Faltaría crear las carpetas src con el archivo index.js (El entry point), la carpeta build donde estará el archivo final a incluir en el sistema, nuestro servidor para correr la app y configurar los comandos que necesitamos en nuestro archivo package.json. Vamos con eso, vamos a necesitar dos comandos para poder correr nuestros archivos webpack, no es obligatorio, pero me gusta hacerlo así 🙂

En la sección de scripts de nuestro archivo package.json agregamos lo siguiente:

"scripts": {
    "build-webpack-dev": "cross-env NODE_ENV=development webpack --config webpack.config.dev.js",
    "build:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "build": "npm run clean && npm run build:webpack",
    "build-dev": "npm run clean && npm run build-webpack-dev",
  },

Y luego para empezar a compilar ejecutamos npm run build (para producción) o npm run build-dev (Para desarrollo).

Ahora vamos a configurar nuestro server para correr nuestra app react y para esto vamos a utilizar express.js:

Instalamos express:

   npm install express --save-dev

Y en nuestro archivo server.js agregamos lo siguiente:

  'use strict';

const path = require('path');
const express = require('express');
const app = express();

app.use('/', express.static(__dirname));
app.use('/build', express.static(path.join(process.cwd() + '/build')));

app.listen(5000, () => {
  console.log('Listening port: 5000');
});

Donde escuchará el puerto 5000 y tomará como raíz el archivo index.html de nuestra carpeta react-test.

Nuestro archivo index.html tendrá el siguiente contenido:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React example</title>
</head>

<body>
    <div id="app"></div>
    <script src="build/bundle.js"></script>
</body>

</html>

Ahora en nuestra carpeta src creamos nuestro archivo index.js que es el principal del proyecto:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class HolaMundo extends Component {
    constructor(props, context) {
      super(props, context);
    }

    render() {
        return (
            <div>
                <label>Hola Mundo</label>
            </div>
        );
    }
}

ReactDOM.render(<HolaMundo />, document.getElementById("app"));

)

Esto lo que hace es crear un componente React, el código a renderizar va dentro de la función render y luego con ReactDom renderizamos el component en el id “app”, que es un div, de nuestro archivo index.html.

Luego corremos node server en una terminal y en otra npm run build. Si no hay nada raro, en tu browser en localhost:5000 tendrías que ver el “Hola Mundo”.

Listo esto te genera tu primer “Hola Mundo” en react.js. Un poco complejo al principio capaz, pero después te enamoras de react, por lo menos así me pasó a mi. Me encanta esta librería.

En el próximo artículo seguramente hable sobre como integrar redux en React.

Espero que el post sea de utilidad y muchas gracias por leer mi blog 🙂

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 )

Google photo

Estás comentando usando tu cuenta de Google. 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 )

Conectando a %s