const Taller => 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.
No se recarga la página, solo se actualiza el elemento.
La comunidad.
Multiplataforma.
Escalabilidad.
Programación declarativa.
Flujo unidireccional.
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.
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>;
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.
=
let;
vs
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');
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++;
import React from 'react';
import {view, Text, Modal} from 'react-native';
import { CardSection } from './CardSection';
import { Button } from './Button';
export { CardSection };
export default ListItem;
//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;
}
}
const numbers = [1, 2, 3];
constnewNumbers = [...numbers, 4];
console.log(newNumbers); // 1,2,3,4
El 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).
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); // 2, 4, 6, 8, 10
El 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.
Publicar nuevo tweet
Opciones de visualización
Mostrar tweets
<h1 class="titulo"> React </h1>
.titulo{
color: #61DAFB;
}
var x = document.querySelector('.titulo');
x.addEventListener('click', ()=>{
console.log('hi');
});
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.
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.
<FriendList friend1={"Juan"} friend2={"Bliss"}> </FriendList>
const FriendList= () => (
<div style={styles}>
<p>{this.props.friend1}</p>
<p>{this.props.friend2}</p>
</div>
);
class Articles extends Component {
constructor(props){
super(props);
this.state = {
articles: [],
source: '',
}
this.getArticles = this.getArticles.bind(this);
}
import React from 'react';
export default () => {
return(
<div className="Header">
<nav> ... </nav>
</div>
)
}
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.
constructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()
componentDidCatch()