nicolas restrepo
javascript developer
Introduccion a
React.js
Una librería javascript basada en componentes para la construcción de interfaces de usuario
Solo Para la UI.
Virtual DOM.
Flujo de datos reactivo y unidireccional
Tu aplicación es un árbol de componentes
Algunas caraterísticas
¿jsx?
Una extensión de javascript creada por Facebook para usar con React.js, esta extensión nos permite definir nuestros componentes con una sintaxis que parece HTML.
JSX
JAVASCRIPT
¿ Pero, qué es un componente ?
Son piezas de nuestra UI independientes y reutilizables, esto nos permite pensar en cada pieza de forma aislada
Virtual DOM
pero primero, ¿qué es el DOM?
DOM Significa Document Object Model. Es una manera de representar un documento estructurado vía objetos. Sirve para representar e interactuar con la información en HTML, XML.
entonces, el virtual DOM,
¿qué es?
Es una copia en memoria de nuestro DOM, en la cual nosotros trabajamos y este se encarga de hacer una comparación con el DOM real cambiando únicamente lo que se modificó.
Beneficios
Trabajas con una copia muy ligera del DOM
Interfaces mas dinámicas
Menores tiempos de carga
Algunas otras cosas sobre los componentes.
Componentes puros
y de estado
Los componentes puros son usados para renderizar la UI, estos no contienen lógica en su interior.
ventajas
muy reutilizables
más fáciles de testear
mayor legibilidad
los compontentes de estado, tienen lógica en su interior, y esto les permite manejar los componentes puros pasándoles props
Ciclo de vida de un componente
los componentes que tienen estado cuentan con algo llamado ciclo de vida, este ciclo de vida son una serie de funciones que se ejecutan en determinado momento de nuestro componente y nos permite realizar distintas acciones.
Fases del ciclo de vida
Montado
Actualización
Desmontado
Montado
constructor(props)
static getDeriveStateFromProps()
render()
componentDidMount()
Actualización
static getDeriveStateFromProps()
shouldComponentUpdate(nextProps, nextState)
getSnapshotBeforeUpdate()
render()
Desmontado
componentWillUnmount()
Hooks
Nueva Forma en que escribiremos React, al no usar clases y teniendo en el componente un manejo más simple del estado interno.
Declarar estado
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}useState
Ciclos de vida
useEffect
import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
// componentDidMount and componentDidUpdate
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// componentWillUnMount
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}MEMO
const MyComponent = React.memo(function MyComponent(props) {
/* only rerenders if props change */
});Gracias.
Introduccion a React.js
By nicolas restrepo
