INFOGRAFIA CONCEPTOS REACT

DE CLASE

FUNCIONALES

REACT.JS

Es una extensión de sintaxis para JavaScript recomendada por React para escribir la estructura de los componentes de la UI. JSX se parece mucho al HTML, pero permite incorporar lógica de JavaScript directamente dentro de la estructura del componente.

Definidos usando clases de JavaScript, estos componentes permiten una gestión más compleja del estado y proporcionan acceso a los métodos del ciclo de vida de los componentes, lo que les permite reaccionar a cambios en los datos de entrada o en su propio estado.

Estos son los componentes más simples en React, definidos por funciones en JavaScript. A partir de React 16.8, con la introducción de Hooks, los componentes funcionales pueden hacer uso del estado y otros aspectos de React que anteriormente estaban limitados a los componentes de clase.

JSX (JavaScript XML)

TIPOS DE COMPONENTES

Son el corazón de cualquier aplicación React. Un componente de React puede ser definido como una clase o una función que opcionalmente puede recibir entradas (llamadas "props") y retorna un elemento React (a menudo representado con JSX) que describe cómo se debería ver una sección de la interfaz de usuario. Los componentes permiten dividir la UI en piezas independientes y reutilizables.

COMPONENTES

CONCEPTOS

REACT.JS

El estado es una información mantenida internamente por el componente y puede cambiar a lo largo del tiempo. Los cambios en el estado o en las props de un componente desencadenan una actualización o re-renderización del componente.

Permiten a los componentes funcionales utilizar estado y otras características de React sin escribir una clase. Los Hooks más comunes incluyen useState, useEffect, y useContext.

ESTADO (State)

HOOKS

Son las propiedades que se pasan a los componentes para configurarlos y darles los datos que necesitan. Son inmutables dentro del componente, lo que significa que un componente no puede cambiar sus propias props.

PROMPS

CONCEPTOS

Aunque no es parte de React core, React Router es fundamental para la construcción de aplicaciones de una sola página (SPA) al manejar la navegación entre diferentes componentes de la aplicación basada en la URL.

DOM

METODOS

FRAGMENTS

REACT.JS

Aunque no es parte de React core, React Router es fundamental para la construcción de aplicaciones de una sola página (SPA) al manejar la navegación entre diferentes componentes de la aplicación basada en la URL.

Definidos usando clases de JavaScript, estos componentes permiten una gestión más compleja del estado y proporcionan acceso a los métodos del ciclo de vida de los componentes, lo que les permite reaccionar a cambios en los datos de entrada o en su propio estado.

Permiten agrupar una lista de hijos sin agregar nodos extra al DOM.

REACT ROUTER

Proporciona una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel. Es útil para datos que deben ser accesibles por muchos componentes en diferentes niveles.

CONTEXT

CONCEPTOS

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!