Apuntes del Curso Práctico de React Js
React es una librería desarrollada por Facebook que nos ayuda a construir interfaces de usuario interactivas para todo tipo de aplicaciones: web, móviles o de escritorio.
Cada pequeña parte de nuestra página web la conoceremos como “Componente”. Cada componente se encargará de una función en específico. Además, podremos reutilizar nuestros componentes siempre que lo necesitemos.
Al unir todos nuestros componentes tendremos una página web que nos permite cambiar, actualizar o eliminar elementos de forma muy sencilla.
El DOM es el código HTML que se transforma en páginas web.
Cada vez que cambiamos alguna parte del DOM, también estamos actualizando el HTML con el que interactúan nuestros usuarios. El problema es que todas las operaciones, comparaciones y actualizaciones en el DOM son muy costosas.
El Virtual DOM es una herramienta que usan tecnologías como React y Vue para mejorar el rendimiento (performance) y velocidad de nuestras aplicaciones.
Es una copia exacta del DOM, pero mucho más ligera, ya que los cambios no actualizan el verdadero HTML de nuestras páginas web. Gracias al Virtual DOM podemos hacer operaciones y comparaciones de forma sumamente rápida.
Recuerda que los cambios en el Virtual DOM no afectan el HTML que ven los usuarios, así que debemos estar sincronizando constantemente las copias con el DOM. Pero no te preocupes, React DOM lo hace por nosotros.
Creación de nuestro sitio web usando la plantilla por defecto de create-react-app:npx create-react-app nombre-de-tu-proyecto
Iniciar el servidor de desarrollo:npm start
Los nombres de nuestros componentes deben empezar con una letra mayúscula, al igual que cada nueva palabra del componente. Esto lo conocemos como Pascal Case o Upper Camel Case.
Los componentes Stateful son los más robustos de React. Los usamos creando clases que extiendan de React.Component. Nos permiten manejar estado y ciclo de vida (más adelante los estudiaremos a profundidad).
import React, { Component } from 'react'; class Stateful extends Component { constructor(props) { super(props); this.state = { hello: 'hello world' }; } render() { return ( <h1>{this.state.hello}h1> ); } } export default Stateful;
También tenemos componentes Stateless o Presentacionales. Los usamos creando funciones que devuelvan código en formato JSX (del cual hablaremos en la próxima clase).
`import React from ‘react’;
const Stateless = () => {
return (
<h1>¡Hola!h1>
);
}
// Otra forma de crearlos:
const Stateless = () => <h1>¡Hola!h1>;
export default Stateless;`
<h3>¿Qué son los métodos del ciclo de vida de un componente?</h3>Todos los componentes en React pasan por una serie de fases que generalmente se denominan “Ciclo de Vida del componente” es un proceso que React hace en cada componente, en algunos casos no podemos verlos como un bloque de código y en otros podemos llamarlos en nuestro componente para asignar una actividad según sea el caso necesario.
Los componentes en react pasan por un Montaje, Actualización, Desmontaje y Manejo de errores.
Montaje: En esta fase nuestro componente se crea junto a la lógica y los componentes internos y luego es insertado en el DOM
Actualización: En esta fase nuestro componente está al pendiente de cambios que pueden venir a través de un cambio en “state” o “props” esto en consecuencia realizan una acción dentro de un componente.
Desmontaje: En esta etapa nuestro componente “Muere” cuando nosotros no necesitamos un elemento de nuestra aplicación, podemos pasar por este ciclo de vida y de esta forma eliminar el componente de la representación que tiene en el DOM.
Cuando nuestro código se ejecuta y tiene un error, podemos entrar en una fase donde se puede entender mejor qué está sucediendo con la aplicación.
Algo que debemos tener en cuenta es que un componente NO debe pasar por toda las fases, un componente puede ser montado y desmontado sin pasar por la fase de actualización o manejo de errores.
Ahora que entendemos las fases que cumple el ciclo de vida en React vamos a entrar a detalle en cada uno de ellos para ver qué piezas de código se ejecutan y nos ayudarán a crear aplicaciones en React pasando por un ciclo de vida bien estructurado.
Métodos de Montado
- Constructor() Este es el primer método al que se hace un llamado, aquí es donde se inicializan los métodos controladores, eventos del estado.
- getDerivedStateFromProps() Este método se llama antes de presentarse en el DOM y nos permite actualizar el estado interno en respuesta a un cambio en las propiedades, es considerado un método de cuidado, ya que su implementación puede causar errores sutiles.
- render() Si queremos representar elementos en el DOM en este método es donde se escribe esta lógica, usualmente utilizamos JSX para trabajar y presentar nuestra aplicación.
- ComponentDidMount() Este método se llama inmediatamente que ha sido montado en el DOM, aquí es donde trabajamos con eventos que permitan interactuar con nuestro componente.
Actualización de componentes
- getDerivedStateFromProps() Este método es el primero en ejecutarse en la fase de actualización y funciona de la misma forma que en el montaje.
- shouldComponentUpdate() Dentro de este método se puede controlar la fase de actualización, podemos devolver un valor entre verdadero o falso si queremos actualizar o no el componente y es utilizado principalmente para optimización.
- render() Se llama el método render que representa los cambios en el DOM.
- componentDidUpdate() Este método es invocado inmediatamente después de que el componente se actualiza y recibe como argumentos las propiedades y el estado y es donde podemos manejar nuestro componente.
Desmontado
- componentWillUnmount() Este método se llama justo antes de que el componente sea destruido o eliminado del DOM.
Manejo de Errores - getDerivedStateFromError() Una vez que se lanza un error este es el primer método que se llama, el cual recibe el error como argumento y cualquier valor devuelto en este método es utilizado para actualizar el estado del componente.
- componentDidCatch() Este método es llamado después de lanzarse un error y pasa como argumento el error y la información representada sobre el error.
"React nos permite responder a las interacciones de los usuarios con propiedades como onClick, onChange, onKeyPress, onFocus, onScroll, entre otras.
Estas propiedades reciben el nombre de la función que ejecuta el código que responde a las interacciones de los usuarios. Seguramente, esta función usará la función this.setState para actualizar el estado de nuestro componente.
class Button extends React.Component { state = { count: 0 } handleClick = () => ( this.setState({ count: this.state.count + 1 }) ); render() { const { count } = this.state; return ( <div> <h1>Manzanas: {count}</h1> <button onClick{this.handleClick}>Sumar</button> </div> ); } }
Recuerda que los nombres de estos eventos deben seguir la nomenclatura camelCase: primera palabra en minúsculas, iniciales de las siguientes palabras en mayúsculas y el resto también en minúsculas."
Babel: Babel es una herramienta muy popular para escribir JavaScript moderno y transformarlo en código que pueda entender cualquier navegador.
<h3>Webpack</h3>Es una herramienta que nos ayuda a compilar multiples archivos (JavaScript, HTML, CSS, imágenes) en uno solo (o a veces un poco más) que tendrá todo nuestro código listo para producción.
Instalación de Webpack y algunos plugins:
npm install webpack webpack-cli html-webpack-plugin html-loader --save-dev
Configuración de Webpack (webpack.config.js):const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, resolve: { extensions: ['.js', '.jsx'], }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, { test: /\.html$/, use: { loader: 'html-loader', }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', filename: './index.html', }), ], };
Script para ejecutar las tareas de Webpack (package.json):
{ ""scripts"": { ""build"": ""webpack --mode production"" }, }
React Hooks: una característica de React disponible a partir de la versión 16.8 que nos permite agregar estado y ciclo de vida a nuestros componentes creados como funciones.
El Hook useState nos devuelve un array con dos elementos: la primera posición es el valor de nuestro estado, la segunda es una función que nos permite actualizar ese valor.
El argumento que enviamos a esta función es el valor por defecto de nuestro estado (initial state).
import React, { useState } from 'react'; const Component = () => { const [name, setName] = useState('Nombre por defecto'); return <div>{name}div>; }
El Hook useEffect nos permite ejecutar código cuando se monta, desmonta o actualiza nuestro componente.
El primer argumento que le enviamos a useEffect es una función que se ejecutará cuando React monte o actualice el componente. Esta función puede devolver otra función que se ejecutará cuando el componente se desmonte.
El segundo argumento es un array donde podemos especificar qué propiedades deben cambiar para que React vuelva a llamar nuestro código. Si el componente actualiza pero estas props no cambian, la función no se ejecutará.
Por defecto, cuando no enviamos un segundo argumento, React ejecutará la función de useEffect cada vez que el componente o sus componentes padres actualicen. En cambio, si enviamos un array vacío, esta función sólo se ejecutará al montar o desmontar el componente.
import React, { useState, useEffect } from 'react'; const Component = () => { const [name, setName] = useState('Nombre por defecto'); useEffect(() => { document.title = name; return () => { document.title = 'el componente se desmontó'; }; }, [name]); return <div>{name}div>; }
