Calculadora del día de ovulación y del próximo período en React.js

En este artículo, crearemos una calculadora de período que calcula la fecha de su próximo período y el día de la ovulación. La menstruación es el desprendimiento mensual del revestimiento del útero de una menstruadora. En promedio, un ciclo dura 28 días; sin embargo, puede variar de 21 a 35 días. La liberación de un … Continue reading «Calculadora del día de ovulación y del próximo período en React.js»

¿Cómo activar animaciones en una aplicación ReactJS según la posición de desplazamiento?

En este artículo, aprenderemos cómo podemos activar la animación en un componente en función de su posición de desplazamiento mediante un paquete npm react-animated-css-onscroll. En muchos sitios web, vemos que cuando nos desplazamos, se activan algunas animaciones. Esto proporciona una experiencia de usuario muy agradable. Usando el módulo react-animated-css-onscroll, podemos activar la animación cada vez … Continue reading «¿Cómo activar animaciones en una aplicación ReactJS según la posición de desplazamiento?»

¿Cómo reproducir/pausar video o audio en ReactJS?

En este artículo, discutiremos cómo encender/apagar video o audio. Comprenderemos cómo podemos encender o apagar nuestro video/audio usando el botón de alternar Para una mejor comprensión, mantendremos la implementación simple.  Creación y configuración del entorno: Paso 1: Cree una aplicación React usando el siguiente comando npx create-react-app myapp Paso 2: después de crear la aplicación … Continue reading «¿Cómo reproducir/pausar video o audio en ReactJS?»

¿Cómo probar los componentes de React usando Jest?

React es una biblioteca JavaScript de código abierto de frontend, que se utiliza para crear interfaces de usuario interactivas. React se centra en aplicaciones de una sola página y se conoce más popularmente como SPA.  La prueba es un aspecto importante del desarrollo. Examina si la aplicación se está comportando según lo previsto y la … Continue reading «¿Cómo probar los componentes de React usando Jest?»

Tienda Redux en React Native

En este artículo, vamos a aprender sobre Redux Store. Es el objeto que contiene el estado de la aplicación. La tienda es uno de los componentes básicos de Redux. Redux es una biblioteca de gestión de estado utilizada en aplicaciones de JavaScript. Se utiliza para gestionar los datos y el estado de la aplicación.   … Continue reading «Tienda Redux en React Native»

Orden de métodos de ciclo de vida de ReactJS en montaje

Cada componente en React tiene que pasar por tres fases que son Montaje, Actualización y Desmontaje. Estos se denominan métodos de ciclo de vida en react.js. De los tres, el montaje es la primera fase del ciclo de vida. Hay cuatro métodos que se incluyen en esta fase, esos métodos son: constructor() getDerivedStateFromProps() prestar() componenteHizoMontar() … Continue reading «Orden de métodos de ciclo de vida de ReactJS en montaje»

Comprensión de libros de cuentos y formas de escribir Stories for React

Storybook es una herramienta de desarrollo de interfaz de usuario de código abierto. Ayuda a los desarrolladores a crear componentes de interfaz de usuario organizados y reutilizables con la documentación adecuada de forma independiente. El componente que creamos se llama la historia en Storybook. En este artículo, entenderemos los siguientes temas: Cómo escribir una historia … Continue reading «Comprensión de libros de cuentos y formas de escribir Stories for React»

¿Qué son los portales en React y cuándo los necesitamos?

En la versión React 16.0, se introdujeron los portales React. Los portales de React presentan una forma de representar componentes secundarios en un Node DOM que generalmente ocurre fuera de la jerarquía DOM del componente principal. Antes de React Portals, era muy difícil representar el componente secundario fuera de la jerarquía de su componente principal. … Continue reading «¿Qué son los portales en React y cuándo los necesitamos?»

¿Cómo optimizar el rendimiento de la aplicación React?

Las operaciones involucradas en mantener las actualizaciones del DOM son costosas, pero react utiliza varias técnicas para minimizar el no. de operaciones que conduce a una interfaz de usuario más rápida de forma nativa para muchos casos. Aún así, podemos utilizar varias técnicas para acelerar la aplicación: 1. Usar funciones vinculantes en constructores: al agregar … Continue reading «¿Cómo optimizar el rendimiento de la aplicación React?»

Componente de tarjeta de imagen de fondo React Rebass

React Rebass es un framework front-end que fue diseñado teniendo en cuenta a React. En este artículo, sabremos cómo usar el componente de tarjeta de imagen de fondo en React rebass. La tarjeta de imagen de fondo  es un componente importante que se requiere en cada desarrollo. Entonces, para crear un componente de tarjeta de … Continue reading «Componente de tarjeta de imagen de fondo React Rebass»