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
React
React
Microservicios
React
React
Jamstack
React
React
Jamstack
React
React
Jamstack
React
React
Entorno de desarrollo
React
Entorno de desarrollo
-
IDE: Visual Studio Code
"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
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
React
React
By mariogl
React
Curso React 11 - 21 enero 2020
- 808