Want to make creations as awesome as this one?

More creations to inspire you

Transcript

3

2

1

CONCEPTOS

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.

TIPOS DE COMPONENTES

JSX (JavaScript XML)

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.

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.

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.

REACT.JS

FUNCIONALES

DE CLASE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

6

5

4

CONCEPTOS

PROMPS

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.

HOOKS

ESTADO (State)

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.

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.

REACT.JS

9

8

7

CONCEPTOS

CONTEXT

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.

REACT ROUTER

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

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.

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.

REACT.JS

FRAGMENTS

METODOS

DOM

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

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

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:

¿Tienes una idea?

Aquí puedes incluir un dato relevante a destacar

Aquí puedes incluir un dato relevante a destacar

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

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:

¿Tienes una idea?

Aquí puedes incluir un dato relevante a destacar

Aquí puedes incluir un dato relevante a destacar

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

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:

¿Tienes una idea?

Aquí puedes incluir un dato relevante a destacar

Aquí puedes incluir un dato relevante a destacar