const Taller => React()Carlos Correa
¿Que es React?
Facebook:
A JavaScript library for building user interfaces.
Explicación completa:
Es una biblioteca Javascript de código abierto para crear interfaces de usuario la cual intenta ayudar a construir aplicaciones que usan datos que cambian todo el tiempo.
Framework progresivo
Ventajas
-
No se recarga la página, solo se actualiza el elemento.
-
La comunidad.
-
Multiplataforma.
-
Escalabilidad.
-
Programación declarativa.
-
Flujo unidireccional.
Ventajas
Es reactiva:
No tienes que actualizar todos los elementos cuyo valor estado ha cambiado, es el sistema el que automáticamente actualiza los elementos que tienen que actualizarse. No hay que utilizar listeners, ni delegados, ni observers. Cuando hay un cambio en el estado, todos los elementos que se tienen que actualizar son actualizados automáticamente sin que nosotros explícitamente tengamos que indicarlo.
Virtual DOM
JSX
Esta sintaxis de etiqueta divertida no es ni una cadena ni HTML.
Se llama JSX y es una extensión de sintaxis de JavaScript. Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario. JSX puede recordarte un lenguaje de plantilla, pero viene con todo el poder de JavaScript.
const element = <h1> hello world </h1>;¿Por que JSX?
React adopta el hecho de que la lógica de renderizado está inherentemente acoplada con otra lógica de UI: cómo se manejan los eventos, cómo cambia el estado a lo largo del tiempo y cómo se preparan los datos para su visualización.
...
En lugar de separar artificialmente las tecnologías al poner marcado y lógica en archivos separados, React separa las preocupaciones con unidades débilmente acopladas llamadas "componentes" que contienen ambos.
=
ES6 o ES2015
Javascript Moderno
let;
vs
const;let
const
Con let definimos variable con block scope, las variables declaradas de esta manera nos genera un error de referencia cuando intentamos utilizar hoisting.
Con const definimos variables de sólo lectura , esto quiere decir que, cuando asignamos una variable, el nombre de esta va estar asignada a un puntero en memoria, el cual no puede ser sobreescrito o reasignado.
const escribir = () => console.log('hola');Arrow Function
La expresión de función flecha tiene una sintaxis más corta que una expresión de función convencional y no vincula sus propios this, arguments, super, o new.target. Las funciones flecha siempre son anónimas. Estas funciones son funciones no relacionadas con métodos y no pueden ser usadas como constructores.
function sumaUnox(){
return x++;
}const sumaUno = () => {
x++;
};const sumarUno = () => x++;Export & Import
import React from 'react';
import {view, Text, Modal} from 'react-native';
import { CardSection } from './CardSection';
import { Button } from './Button';export { CardSection };export default ListItem;Classes
//es6
class Shape(id, x, y) {
constructor(id, x, y) { // constructor con syntactic sugar
this.id = id;
this.setLocation(x, y);
}
setLocation(x, y) { // prototype function
this.x = x;
this.y = y;
}
}//es5
function Shape(id, x, y) {
this.id = id;
this.setLocation(x, y);
Shape.prototype.setLocation = function(x, y) {
this.x = x;
this.y = y;
}
}vs
Spread Operator
const numbers = [1, 2, 3];
constnewNumbers = [...numbers, 4];
console.log(newNumbers); // 1,2,3,4El operador de propagación spread operator permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).
Map( )
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); // 2, 4, 6, 8, 10El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.
Transpiler - bundler
Separación de responsabilidades
Publicar nuevo tweet
Opciones de visualización
Mostrar tweets
Template
Estilos
Logica
<h1 class="titulo"> React </h1>.titulo{
color: #61DAFB;
}var x = document.querySelector('.titulo');
x.addEventListener('click', ()=>{
console.log('hi');
});
State
State
El corazón de cada componente de React es su "estado", un objeto que determina cómo se renderiza y se comporta ese componente.
En otras palabras, "estado" es lo que nos permite crear componentes que son dinámicos e interactivos.
Props
Un componente en React puede recibir propiedades como parámetros desde un componente padre para poder insertar valores y eventos en su HTML. Estas propiedades se heredan a los componentes o elementos hijos y les permite mayor funcionalidad.
Props
<FriendList friend1={"Juan"} friend2={"Bliss"}> </FriendList>const FriendList= () => (
<div style={styles}>
<p>{this.props.friend1}</p>
<p>{this.props.friend2}</p>
</div>
);Bind
class Articles extends Component {
constructor(props){
super(props);
this.state = {
articles: [],
source: '',
}
this.getArticles = this.getArticles.bind(this);
}Pure Components
import React from 'react';
export default () => {
return(
<div className="Header">
<nav> ... </nav>
</div>
)
}Ciclo de vida de un componente
Ciclo de vida de un componente
Cada componente tiene varios "métodos de ciclo de vida" que puede anular para ejecutar el código en determinados momentos del proceso. Los métodos prefijados con voluntad se llaman justo antes de que ocurra algo, y los métodos con prefijo se llaman justo después de que algo sucede.
Procesos principales en el Ciclo de vida
Mounting:
constructor()
componentWillMount()
render()
componentDidMount()
Procesos principales en el Ciclo de vida
Updating:
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
Procesos principales en el Ciclo de vida
Unmounting:
componentWillUnmount()
Procesos principales en el Ciclo de vida
Error Handling:
componentDidCatch()
Hora del Código
Muchas Gracias
Pero...
¡Pronto!
Introducción a React
By Jose Carlos Correa Mandujano
