Taller Preparatorio

#2y3

Talleres preparatorios | Engancha TIC 2.0 | 2023

 Orden de Clase

Fundamentos de

Talleres preparatorios | Engancha TIC 2.0 | 2023

 Front End

Talleres preparatorios | Engancha TIC 2.0 | 2023

 ¿Cómo funciona React?
React es una biblioteca de JavaScript para crear interfaces de usuario interactivas y
reactivas en aplicaciones web. Utiliza un modelo de programación basado en
componentes para dividir la interfaz de usuario en piezas reutilizables.

Talleres preparatorios | Engancha TIC 2.0 | 2023

 ¿Virtual-DOM?
React utiliza un Virtual DOM para mejorar el rendimiento. Cada vez que los datos
cambian, React compara el DOM virtual con el DOM real y actualiza solo las partes que
han cambiado, lo que optimiza la velocidad.
DOM V-DOM vs DOM

Talleres preparatorios | Engancha TIC 2.0 | 2023

 Crear un Proyecto con React
Utiizaremos el siguiente comando para crear un proyecto con React:
npx create-next-app@latest

Luego nos moveremos a la carpeta con el nombre del proyecto

usando el comando:
cd app

Y para iniciar el proyecto con React, utilizamos el siguiente

comando:
npm start

Talleres preparatorios | Engancha TIC 2.0 | 2023

 ¿Qué son los componentes?
Los componentes son bloques de construcción reutilizables en React. Pueden ser
funcionales o de clase y representan partes de la interfaz de usuario.

Talleres preparatorios | Engancha TIC 2.0 | 2023

 Tipos de componentes
Componente Funcional: Es una función de JavaScript que toma propiedades (props)
como entrada y devuelve elementos de interfaz de usuario en React. Son simples y se
utilizan ampliamente.

Componente de Clase: Es una clase en React que extiende React.Component y

proporciona métodos del ciclo de vida. Se utilizan para control más avanzado y lógica
compleja en componentes React.

Talleres preparatorios | Engancha TIC 2.0 | 2023

Ciclo de Vida de un Componente

Talleres preparatorios | Engancha TIC 2.0 | 2023

 ¿Hooks?
Los Hooks de React simplifican el ciclo de vida en componentes funcionales,
eliminando la necesidad de métodos específicos como componentDidMount en
componentes de clase.

Talleres preparatorios | Engancha TIC 2.0 | 2023

Introducción a los Estados en
React
Los "estados" son una parte fundamental de React.
Representan datos cambiantes que afectan la interfaz de usuario.

Talleres preparatorios | Engancha TIC 2.0 | 2023

 Props Drilling
El Props Drilling ocurre cuando debes pasar datos a través de múltiples
componentes para llegar a su destino final. Puede complicar la gestión de
datos en una aplicación.

Talleres preparatorios | Engancha TIC 2.0 | 2023

 Context vs Redux en React
Context es una característica de React que
permite compartir datos entre componentes
sin necesidad de pasar props manualmente.

Redux es una biblioteca de gestión de

estado comúnmente utilizada con React

Talleres preparatorios | Engancha TIC 2.0 | 2023

Code Splitting (División de Código)

Code Splitting es una técnica que permite

dividir el código de una aplicación en partes
más pequeñas que se cargan solo cuando son
necesarias, lo que mejora el rendimiento.

Talleres preparatorios | Engancha TIC 2.0 | 2023