React

Introducción a
React

React

Introducción

Librería JS
UI reactivas
SPA: Single Page Applications
Data binding
Web components
Microservicios / Jamstack
Código fuente y código compilado
Reactividad
Inmutabilidad

React

Componentes

React

Microservicios

React

Jamstack

Fuente: https://cloudinary.com/blog/developer_experience_for_a_modern_web_jamstack_delivers

React

Jamstack

Fuente: https://dinarys.com/blog/jamstack-for-modern-web-development

React

Jamstack

Fuente: https://dinarys.com/blog/jamstack-for-modern-web-development

React

Entorno de desarrollo

React

Entorno de desarrollo

IDE: Visual Studio Code
- Extensiones:
  - ESLint
  - Jest
- Configuración:
  - CTRL-MAYS-P: Preferences: Open settings

"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

Extensión para navegador: React Developer Tools

React

Entorno de desarrollo

Node.js y npm

React

Node.js y npm

React

npm

Repositorio de paquetes distribuibles
La carpeta node_modules
El archivo package.json

React

Comandos npm

Instalar un paquete:
npm install paquete [--save-dev]
Instalar todas las dependencias registradas:
npm install
Ejecutar un paquete:
npx ejecutable

React

Configuración proxy

npm config set proxy http://username:password@host:port

npm config set https-proxy http://username:password@host:port

Introducción a JavaScript

JavaScript - JSON

React

Conceptos iniciales

Interpretado, compilado y ejecutado en el navegador
Cada navegador programa su propio motor de JS
Estandarización: ECMAScript
La versión ES6 o ES2015
Transpiladores: Babel, TypeScript
Módulos:
- import / export
- webpack

React

Fuente: https://ana.tap.company/how-to-build-an-npm-package/

ES6

let y const

React

let a = 3;

let a = 10;  // Error
var a = 12;  // Error

const b = 10;

b = 3; // Error

const obj = {
    x: 10,
    y: 12
}

obj.x = 15;  // OK

obj = {    // Error
    x: 15,
    y: 12
}

ES6

let y const
Template literals

React

let nombre = "Antonio";

let cuadrado = function(x) {
    return x * x;
}

let n = Math.floor(Math.random() * 10);

let saludo1 = "Hola, " + nombre + ". El cuadrado de " + n + " es " + cuadrado(n) + ".";
let saludo2 = `Hola, ${nombre}. El cuadrado de ${n} es ${cuadrado(n)}.`;

ES6

let y const
Template literals
for ... of

React

let nombres = ["Patricia", "Zacarías", "Miguel", "Maite"];

for (let i in nombres) {
    console.log(nombres[i]);
}

for (let nombre of nombres) {
    console.log(nombre);
}

let obj = {
    x: 3,
    y: 4
}

for (let i in obj) {
    console.log(obj[i]);
}

let nombre = "Antonio Jesús";

for (let c of nombre) {
    console.log(c);
}

ES6

let y const
Template literals
for ... of
Funciones
- Parámetros por defecto

React

function potencia(x, y = 2) {
    return Math.pow(x, y);
}

console.log(`10 elevado a 8 es ${potencia(10, 8)}`);
console.log(`El cuadrado de 5 es ${potencia(5)}`);

ES6

let y const
Template literals
for ... of
Funciones
- Parámetros por defecto
- Función arrow:
  
  (parámetros) => expresión_devuelta

React

const potencia = function (x, y = 2) {
    return Math.pow(x, y);
}

const potencia = (x, y = 2) => Math.pow(x, y);

setTimeout(() => console.log("pausa"), 2000);

ES6

React

Operador spread
- Parámetros en funciones
- Copiar un array en otro
- push inmutable
- Copiar un objeto en otro
- Mergear objetos

// function(a, b, c)
function sumar(a, b, c) {
  console.log(a + b + c);
}
let nums = [1, 3, 6];
sumar(...nums);

// function(n parámetros)
function sumar(...nums) {
  let suma = 0;
  for (n of nums) {
    suma += n;
  }
  console.log("La suma es " + suma);
}
let a = 3;
let b = 7;
let c = 8;
sumar(a, b, c);

// push y unshift
let nums1 = [1, 3, 6];
let nums2 = [0, 52, 15, 9];

nums1.push(...nums2);
console.log(nums1);
nums1.unshift(...nums2);
console.log(nums1);

// meter un array en medio de otro
let nums1 = [1, 3, 6];
let nums2 = [0, 52, 15, 9];
nums1.splice(1, 0, ...nums2);
console.log(nums1);

// copiar un array
let nums1 = [1, 3, 6];
let nums2 = [...nums1];

// copiar un objeto
let o1 = {
  x: 3,
  y: 5
}
let o2 = { ...o1 };

// mergear un objeto con defaults (ES2018)
let defaults = {
  ancho: 100,
  alto: 200,
  color: "rojo"
}

let o1 = {
  ancho: 200,
  grosor: 10000
}

o1 = { ...defaults, ...o1 };

React

Métodos de los arrays

Métodos:
- map

let nombres = ["juan", "luisa", "amparo", "arturo"];

let nombresMays = nombres.map(nombre => nombre.toUpperCase());

console.log(nombresMays);

React

Métodos de los arrays

Métodos:
- map
- filter

let personas = [
    {
        nombre: "juan",
        edad: 15
    },
    {
        nombre: "luisa",
        edad: 35
    },
    {
        nombre: "amparo",
        edad: 17
    },
    {
        nombre: "arturo",
        edad: 32
    }
];

let mayoresEdad = personas.filter(persona => persona.edad >= 18);

console.log(mayoresEdad);

React

Métodos de los arrays

Métodos:
- map
- filter
- reduce

let nums = [2, 4, 10, 15, 12];

let suma = nums.reduce((x, y) => x + y);

let objs = [
    {
        x: 3,
        y: 2
    },
    {
        x: 8,
        y: 10
    },
    {
        x: 10,
        y: 15
    }
]

let sumaX = objs.reduce((acc, obj) => acc + obj.x, 0);            // Método 1
let sumaX = objs.map(obj => obj.x).reduce((obj1, obj2) => obj1 + obj2);     // Método 2

React

Desestructuración

Asignar desde un array
Intercambiar variables

function medidasMueble(mueble) {
  // ...

  return [100, 70, 20];
}

let [ancho, alto, profundo] = medidasMueble(mesa);

console.log(ancho, alto, profundo);

// 100, 70, 20

let a = 10;
let b = 20;
 
[a, b] = [b, a];

console.log(a, b);

// 20, 10

React

Desestructuración

Asignar desde un array
Intercambiar variables
Asignar desde un objeto

function getRGB(colorHex) {
  // ...

  return {
    alias: 'deeppink',
    red: 255,
    green: 20,
    blue: 147,
    alpha: 0.8
  }
}

let { red, green, blue } = getRGB("#ff1493");

console.log(red, green, blue);

// 255, 20, 147

let personas = [{
  nombre: "Luis",
  apellido: "Herrera",
  edad: 23
},
{
  nombre: "Marta",
  apellido: "Nieto",
  edad: 29
}];
 
for (let {nombre, edad} of personas) {
  console.log(`Me llamo ${nombre} y tengo ${edad} años`);
}

// Me llamo Luis y tengo 23 años
// Me llamo Marta y tengo 29 años

let persona = {
  nombre: "Luis",
  edad: 23
}

let { nombre, edad, estado = "soltero" } = persona;

console.log(nombre, edad, estado);

// Luis, 23, soltero

let notas = {
  mat: 8,
  fis: 6,
  dib: 5,
  tec: 6
}

let { mat: matematicas, fis: fisica, dib: dibujo, tec: tecnologia } = notas;

console.log(matematicas, fisica, dibujo, tecnologia);

// 8, 6, 5, 6

React

Manipulación del DOM

El Document Object Model

<!DOCTYPE html>
<html lang="es-ES">

<head>
  <title>DOM</title>
  <script src="js/jquery.min.js"></script>
  <script src="js/scripts.js"></script>
  <link rel="stylesheet" href="css/estilos.css">
</head>

<body>
  <header>
    <h1>Ejemplo DOM</h1>
  </header>
  <div>
    <h2>Esto es un documento HTML</h2>
    <img src="img/html.jpg" alt="Documento HTML">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non consectetur sapiente esse odit dolorem fugiat, iure
      omnis dolore obcaecati veniam necessitatibus sit quia praesentium, nesciunt suscipit. Adipisci illum tempore fuga.
    </p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis, consequatur? Nostrum repudiandae qui expedita
      optio exercitationem sapiente rem, quisquam ipsam, sunt veniam dolorum architecto similique! Iusto quibusdam omnis
      tenetur nihil.</p>
  </div>
</body>

</html>

React

Manipulación del DOM

El Document Object Model
Nodos HTML
Propiedades de los nodos:
- Genéricas:
  - classList
  - className
  - id
- Particulares:
  - src
  - href
  - type
  - disabled

  <header class="cabecera titulo">
    <h1 id="titulo-pagina">Ejemplo DOM</h1>
  </header>
  <div>
    <h2>Esto es un documento HTML</h2>
    <img src="img/html.jpg" alt="Documento HTML">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non <a href="https://consectetur.com">consectetur</a> sapiente esse odit dolorem fugiat, iure
      omnis dolore obcaecati veniam necessitatibus sit quia praesentium, nesciunt suscipit. Adipisci illum tempore fuga.
    </p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis, consequatur? Nostrum repudiandae qui expedita
      optio exercitationem sapiente rem, quisquam ipsam, sunt veniam dolorum architecto similique! Iusto quibusdam omnis
      tenetur nihil.</p>
    <input type="text" placeholder="Introduce un valor">
    <button type="submit" disabled>
      Enviar
    </button>
  </div>

React

Manipulación del DOM

Eventos
Tipos de eventos
Cancelar la operación por defecto:
- evento.preventDefault()
Quién ha emitido el evento:
- evento.target

mario@mariogl.com

@marioglweb

React

By mariogl

React

Curso React 11 - 21 enero 2020

Introducción a React

Entorno de desarrollo

Node.js y npm

Introducción a JavaScript

React

More from mariogl

Introducción a
React