DEV Community: Alberto Sandoval

Ciclo de vida de un Componente de clase en React

Alberto Sandoval — Mon, 05 Jul 2021 20:58:35 +0000

El “Ciclo de Vida del componente” es un proceso en el cual los componetentes de React, se renderizan, actulizan o desmontan de la pantalla del navegador.

Nos permite detrminar el estado de nuestro componente y ejecutar determidas lineas de código en momentos particulares del proceso para montar (mostrar en pantalla), actualizar o desmontar (quitar de pantalla) nuestro componente.

Fases del ciclo de vida:

El ciclo de vida de un componente en React abarca tres 3 fases, el montado, actualización y desmontado.

Dentro de cada fase existen métodos que las caracterizan, a continucación describire cada fase con sus respectivos metodos.

Montaje

Momento en el que se inserta el código del componente en el DOM y se muestra en la UI.

Los métodos más importantes que se ejecutan en esta fase son:

`constructor()`

En este método se incializan los estados o valores.

`render()`

En este método el componten se renderiza , se inserta el codigo en el DOM HTML.

`componentDidMount()`

Indica que el componente ya es visible en pantalla.

Actualización

En esta etapa los props y el estado del componente cambian.

Los métodos más importantes que se ejecutan en esta fase son:

`render()`

El componente se vuelve a renderizar, esta vez con los datos que hayan cambiado.

`componentDidUpdate(prevProps, prevState)`

Recibe dos argumentos: Los props anteriormente y el estado que tenia anteriormente el componente lo actualiza. este método nos sirve para comparar entre la versión previa y la versión actual del componente.

Desmontado

Esta fase existe un solo método que se ejecuta antes de que un componente se elimine (desmonte) de la UI de nuestra aplicación.

`componentWillUnmount()`

Este método nos permite limpiar memoria eliminando el componente de la pantalla.

Existe otros métodos de ciclo de vida pero son menos comunes.

Para saber más sobre los métodos del ciclo de vida puedes revisar la documentación de React.

Estado en componentes de Clase

Alberto Sandoval — Sun, 04 Jul 2021 23:37:37 +0000

En los componentes de clase, el estado incial, se declara dentro del metodo constructor.
Tenemos que hacer referecia con this a .state y le asignamos a un objeto los valores, dentro de las llaves de éste, estos son los valores del estado.

super(props);
this.state = {
valor1: 'Valor 1',
valor2: 2,
}
}">

Podremos acceder en cualquier otro momento mediante this.state.valor1 , this.state.valor2 , etc.
Ejemplo:

this.setState() Es una función similar a setName , nos permite acualizar los valores del estado incial. setState es un elemento propio de this que recibe como argumento un objetos con los atributos que se vayan a actulaizar, inicializados dentro de this.state

NOTA IMPORTARTANTE! Nunca invocar el setState en el método constructor o en el método render porque la aplicación se romperá y entrará en un ciclo infinito.

Declarando funciones en componenetes de Clase.

Si queremos declarar funciones dentro de nuestro componentes de clase, la manera de invocarlas para el manejo de valores de estado se debe tomar en cuenta la palabra reservada this. Por ejemplo:

En el ejemplo anterior this.state.name y this.state.lastName apuntan a los valores de estado de nuestro componente e invocamos a esos datos llamando a la funcion con this.getFullName , cabe resaltar que sin la palabra reservada this no podremos manejar los valores de estado en nuestro componente de clase ya que nuestro codigo se rompería.

Estado en componentes funcionales (useState).

Alberto Sandoval — Sun, 04 Jul 2021 20:05:22 +0000

Los estados en React nos permiten controlar los valores y datos que maneja un componente. Permiten que este sea capaz de cambiar la interfaz sin renderizar todo el DOM. Podemos decir que es una manera de tener variables que podemos cambiar de manera dinámica.

useState

El componente funcional, para controlar los valores de estado, importa una función Hook, llamada useState.

useState Es similar a tener una variable, así que después de importarlo dentro de nuestro archivo, podemos asignarle un valor dentro de nuestro componente.

useState es una función que nos retornara algo al pasarle un argumento, ese argumento puede ser cualquier tipo de dato (string, null, number, etc.), useState puede funcionar incluso sin recibir el argumento antes mencionado. En el ejemplo de arriba el argumento seria 'Alberto' y este se tomara como el valor inicial.

useState básicamente regresa un arreglo con dos valores: un valor y un set. Gracias al set podemos actualizar el valor de estado de nuestro componente cuando lo requiramos.
Para realizar el cambio de estado de un componente con el set necesitamos de un evento que active o llame la función, como en el ejemplo de la imagen anterior, al set se le asigno el nombre setName();

Algunas de las varias formas de declarar argumentos en useState:
const[nickName, setName] =useState('Beto');
const[age] =useState();
const[, setSomething] =useState('Hey!');">

React (Componentes)

Alberto Sandoval — Mon, 10 May 2021 19:17:20 +0000

¿Qué es un Componente en React?

Pequeña pieza de código encapsulada reutilizable que realiza un trabajo en específico y puede tener estado o no. Aceptan entradas arbitrarias (llamadas “props”) y devuelven a React elementos que describen lo que debe aparecer en la pantalla.

Todo lo que contiene una aplicación web puede ser un componente, la aplicación web en si misma puede verse como un componente que contiene otros componentes hijos, como lo son la barra de navegación, los menús, botones, etc.

Estado

Es como se encuentra la información del componente en un punto determinado del tiempo.

Todo componente tiene un estado inicial. El estado inicial es la información inicial del componente, antes de ser modificada por alguna interacción del usuario.

Por ejemplo. En el estado inicial de este componente los inputs del formulario no tienen valor alguno.

El estado se actualiza cuando el usuario interactúa con la interfaz.

¿Cómo crear componentes en React?

Existen dos maneras de crear un componente

Basada en Funciones. (Function Components)

Basada en Clases. (Class Components)

¿Por qué usar Componentes funcionales?

A partir de la versión 16.8 en React se adicionaron los hooks, que le proporcionaron características a los componentes basados en funciones que antes eran únicas de los componenetes de clase, como lo son el estado y métodos de ciclo de vida. Esto aunado a la facilidad de su uso, perfilan a los componentes funcionales, como el futuro en cuanto a implementeción de componentes en React.

Renderizando un Componenete

Para poder ver el resultado del código de nuestro componente en pantalla debemos renderizarlo. Renderizar es el proceso en el cual React va a mostrar o anclar, los componenetes que escribimos con Reactjs, en una aplicación en la que el usuario pueda verlos o el navegador pueda entenderlos.

Tenemos que crear un elemento en nuestro HTML; es aquí en donde se renderiza todo el código que hagamos ,por lo general es un div, que generalmente al configurar un proyecto viene por defecto configurado.

Es por esto que todas las aplicaciones hechas con React solo contienen un archivo HTML.

En el index.js escribimos:

RectDOM es una paquete o libreria de Reactjs que nos ayuda a renderizar nuestros elementos dentro de nuestro archivo HTML.

Ejemplo:

Props

Definicion: Son valores únicos u objetos, contienen un conjunto de datos que se pasan a los componentes mediante los elementos, utilizando una convención de nomenclatura similar a los atributos de etiquetas HTML.

¿Para qué sirven?

El propósito principal de los Props en React es proporcionar las siguientes funcionalidades a un component.

Pasar datos personalizados a un componente.
Desencadenar cambios de estado.

Por ejemplo. Cuando creamos un elemento; dentro de la etiqueta, del lado izquierdo, primero pondremos el nombre del componente. En el caso de la imagen que pusimos como ejemplo es "Element", del lado derecho pondremos el nombre de nuesta propiedad "reacProp", esta a su vez está pasando un tipo de dato string a nuestro elemento "Element":

Cuando creas una propiedad, como la propiedad reactProp, esta se agrega al objeto de accesorios nativos de React y podra ser invocada al igual que un objeto en JS con la nomeclatura props.reactProp.

Desestructuración de Props

También podemos desestructura las props entre llaves. Por ejemplo:

Proptypes.

Sirven para definir un valor por defecto a las propiedades y verificar que ese valor sea correcto, en caso que el valor de alguna propiedad no sea enviado por el componente padre.
Para importarlo debemos escribir la nomenclatura import ProTypes from 'prop-Types' e invocarla con ComponenteNombre.propType como se muestra en el siguiente ejemplo:

Para exportar nuestro componente a otros archivos de nuestra aplicación con los valores de definidos en las propTypes usamos la sintaxis export default ComponenteNombre .

DefaultProps

Agrega un valor por defecto a alguna propiedad en caso de que no lo tenga.

React (Conceptos Básicos)

Alberto Sandoval — Mon, 10 May 2021 01:46:04 +0000

¿Qué es React?

Es una librería de código abierto de Java Script que nos permite crear interfaces de usuario.

Características

Usa un virtual DOM en vez del DOM real haciendo el manejo de este más fácil.
Es declarativa, puedes crear tus propias etiquetas que al final de cuentas son componentes, esto hace fácil seguir patrones de diseño y crear interfaces de usuario interactivas.
Es eficiente.
Predecible. Fluye en una sola vía.
React está basado en Componentes. Pequeñas piezas de código encapsuladas que pueden tener un estado o no, permite organizar aplicaciones complejas en pequeños componentes sencillos y fáciles de mantener.
Se puede trabajar con React del lado del servidor con Node
Se puede crear aplicaciones móviles con Reac Native y aplicaciones de escritorio con Electron.

Virtual DOM

VDOM Es una representación en memoria de lo que es el DOM real del navegador. Actua como intermediario entre el estado de la aplicación y la UI que está viendo el usuario de tu proyecto.

Reconciliación

Este concepto describe la manera en que React manipula y actualiza los componentes. Para ello usa un algortmo diferencial para actualizar los elementos del árbol de tu aplicación.

Fiber (Fibras)

Son objetos internos de React que mantienen información del árbol de los componentes. Se podiran vislumbrar como partes pequeñas que nos ayudan a actualizar la información de los nodos.

JSX

El JSX es una combinación de Java Script con XML, nos provee una sintaxis fácil de usar ("syntactic sugar").

Ejemplo: a la constate llamada "h1Tag" le asignamos como valor una etiqueta de HTML.

Crear un proyecto en React.

Para crear un proyecto en React usamos el comando:

Con este comando se creara un proyecto con el nombre "my-app". Para personalizar el nombre de nuestro proyecto debemos cambiar "my-app" por el nombre deseado.

npm start. Comienza a ejecutar un servidor para nuestra la aplicación que acabamos de crear.

En mi próximo post publicare mis apuntes sobre los componentes en React.

Paginas Estaticas vs Paginas Dinamicas

Alberto Sandoval — Fri, 04 Dec 2020 03:29:31 +0000

Paginas estáticas:

Son aquellas que tienes poca o nula interacción con el usuario, generalmente informativas, un ejemplo de estas puede ser alguna "Landing page". La información en este tipo de paginas no cambia, si se genera un cambio, este es sutil y en periodos extensos de tiempo.
Estas paginas no están conectadas a una base de datos ya que los cambios se generan del lado del servidor, no del cliente.

Paginas Dinámicas:

Este tipos de paginas pueden denominarse web apps ya que tienen funciones avanzadas que le permiten interactuar con el usuario.
Estas paginas están conectadas a una base de datos que hacen posible la interacción con el usuario, asico como el almacenamiento de información, por ejemplo la información de un formulario de login.