Webinar React Firebase y Node

Comencemos por la parte más importante

Editores

SublimeText 2

Un editor de texto excelente con muchísimas herramientas pero pago.

Nuclide

Solución de Facebook, bastante compatibilidad con el mundo de React

Atom

Excelente, hace lo mismo que los otros esta construido en Electron

Vim

Editor de texto para super Pros.

Visual Studio Code

Un editor de texto excelente con muchísimas herramientas, es gratis.
- Prettier - React snippets - Markdown

Repositorio

Github

Github es una herramienta fantástica, te permite manejar el versionamiento de tu aplicación y eso es vital a la hora de trabajar en tu aplicación.

Estructura base de una APP

HTML

Para comenzar el paso más importante, nuestro primer index.html

Embellecimiento y estructurado de HTML
  • Bootstrap
  • Foundation

CSS y Javascript

No nos olvidemos de la salsa y la inteligencia del HTML, es decir, el CSS y el Javascript.

Estos son los que permiten que una pagina deje de ser una simple pagina y se convierta en una WebApp

Creando nuestra base

<html>  
<head>  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=900, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React Webinar</title>
</head>  
<body>  
</body>  
</html>  

Comencemos con REACT

Añadamos React a nuestro index.html

Antes del cierre de </head> añadimos react a nuestro index.html

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>  
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>  

Ahora que estamos llamando a las librerias de React y RactDOM podemos hacer un poco de magia, programemos algo...

<script>

ReactDOM.render(  
  React.createElement('div', null, 
     React.createElement('h1', null, "Hola Mundo!")
),
  document.getElementById('root')
);

</script>  

Quedará algo así:

<html>  
<head>  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=900, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React Webinar</title>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>  
</head>  
<body>  
   <!--Core de nuestra app-->
    <div id="main"/> 
    <!--Fin del core de nuestra app-->
    <script>
        ReactDOM.render(React.createElement('div', null, 'Hola Mundo'), document.getElementById('main'));
    </script>
</body>  
</html>  

Ahora a crear otro componente:

var MiTitulo = function () {  
  return (
    React.createElement('div', null,
      React.createElement('h1', null, 'Mira este componente!')
    )
  );
};

var MiPrimerComponent = function () {  
  return (
    React.createElement('div', null,
      React.createElement(MiTitulo, null),
      React.createElement(MiTitulo, null),
      React.createElement(MiTitulo, null)
    )
  );
};

ReactDOM.render(  
  React.createElement(MiPrimerComponent),
  document.getElementById("main")
);

Factories

// remplaza MiPrimerComponente
var ce = React.createElement;

//reemplazo para el cuerpo de MiPrimerComponente
return (  
  ce('div', null,
    ce(MiTitulo, null),
    ce(MiTitulo, null),
    ce(MiTitulo, null)
  )
);

Props

var ce = React.createElement;

var MiTitulo = function (props) {  
  return (
    ce('div', null,
      ce('h1', null, props.titulo)
    )
  );
};

var MiPrimerComponente = function () {  
  return (
    ce('div', null,
      ce(MiTitulo, {titulo: 'Spiderman'}),
      ce(MiTitulo, {titulo: 'Game of Thrones'}),
      ce(MiTitulo, {titulo: 'Stranger Things'})
    )
  );
};

ReactDOM.render(  
  ce(MiPrimerComponente),
  document.getElementById("main")
);

¡Más props!

// cambia MiTitulo's dentro de h1
ce('h1', {style: {color: props.color}}, props.title)

// cambia MiPrimerComponente dentro de div
ce(MiTitulo, {color: 'rebeccapurple', title: 'Spiderman'}),  
ce(MiTitulo, {color: 'peru', title: 'Game Of thrones'}),  
ce(MiTitulo, {color: 'burlywood', title: 'Stranger Things'})  

Un poco de salsa

Añadamos Bootstrap mediante el siguiente CSS

<!--  minified CSS -->  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  

y posteriormente la parte JS

<!--  minified JavaScript -->  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  

Manejo de paquetes

Npm

Manejador de paquetes de node, (el mejor y más importante hasta ahora)

Yarn

Es una herramienta esencial para tu aplicación ya que te permite gestionar el versionamiento de tus paquetes de una forma muy inteligente.

Para comenzar, debes instalar Yarn

brew install yarn  

una vez lo tengas instalado
podrás iniciarlo mediante

yarn init  

y responde la información básica que te pregunta Yarn, posterior a eso tendras un archivo de package.json, mismo que contiene la lista de todos los modulos que contendrá tu aplicación

Install

yarn add react react-dom  
yarn add babel-loader babel-core babel-preset-env webpack --dev  

Webpack (V2)

Webpack es una herramienta que te permite unificar todos tus static assets en archivos unicos, de manera en la que puedas optimizar estos archivos, y minimizar la cantidad de archivos que requerira tu aplicación, no solo optimizará su estructura si no que tambien te permitira automatizar muchos procedimientos.

webpack.config.js

var path = require('path');

module.exports = {  
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}
};

Transpilador

Babel

.babelrc, la puerta de ingreso a la declaración de modulos primordiales para la compilación del codigo, especialmente cuando trabajamos en estandares no vigentes como por ejemplo al momento de usar ES2015, ES2016 y ES2017

{
  "presets": [
      "es2015", 
      "react",
      "stage-3"],
}

3 son los modulos más importantes para que podamos comenzar a programar en reactJS, ES2015, quien brinda todo lo esencial a la hora de utilizar ES2015, react permite la utilización de JSX y Stage-3 nos permite el uso de features avanzados.

JSX

Hasta el momento hemos escrito nuestros componentes en Javascript plano, es momento de conocer una forma mucho más amigable de hacerlo, JSX le añade una sintaxis de HTML/XML al código, obviamente traduciendo a Javascript a la hora de compilar el codigo, y ya vimos como luce un Javascript plano, ahora veamos un poco de JSX

import React from 'react';

const MiTitulo = props => {  
  const style = { color: props.color };
  return (
    <div>
      <h1 style={style}>
        {props.titulo}
      </h1>
    </div>
  );
};

export default MiTitulo;  

Re-escribamos nuestro primer componente con JSX

import React from 'react';  
import ReactDOM from 'react-dom';  
import MiTitulo from './MiTitulo';

const MiPrimerComponente = () => {  
  return (
    <div>
      <MiTitulo title="Los props son excelentes!" color="rebeccapurple" />
      <MiTitulo title="Usa props en todas partes!" color="mediumaquamarine" />
      <MiTitulo title="Los props son los mejores" color="peru" />
    </div>
  );
};

ReactDOM.render(<MiPrimerComponente />, document.getElementById('main'));  

Como no escribir un componente:

// No compilará
const ComponenteInvalido = () => (  
  <h1>Mi Titulo</h1>
  <h2>Mi Titulo 2</h2>
);

// Compilará
const ValidComponent = () => (  
  <div>
    <h1>Mi Titulo</h1>
    <h2>Mi Titulo 2</h2>
  </div>
);
Webpack (--Watch) feature

Este feature es una excelente herramienta a la hora de acelerar nuestros procesos de desarrollo ya que permitira que nuestro bundle.js este constantemente actualizado con cada cambio que realicemos luego de guardar.

Este feature se puede utilizar de dos maneras la primera mediante webpack --watch en la consola o bien: "watch": "webpack -- watch" en el archivo Package.json dentro de scripts, cosa de que al escribir npm run watch el mismo sea ejecutado.

React-Router (V4) (loading...)

Rene J Polo

Read more posts by this author.

Cochabamba - Bolivia

Subscribe to Chito Tech Tips

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!