GA7-220501096-AA4-EV01

Taller Sobre Componentes Frontend

Karen Stefany Espósito Ramírez

Tecnólogo Análisis y Desarrollo de Software

Servicio Nacional de aprendizaje
SENA 2023
 1. Diferencias entre React y JSX.
React: Es una biblioteca de JavaScript desarrollada por Facebook para construir
interfaces de usuario interactivas y reutilizables. React proporciona una forma
eficiente de actualizar y renderizar componentes en la interfaz de usuario.
JSX: Es una extensión de sintaxis para JavaScript recomendada para su uso con
React. JSX permite escribir código similar a HTML dentro de JavaScript, lo que
facilita la creación y comprensión de la estructura de los componentes React.

2. Qué son clases en React

En React, las clases son una forma de definir componentes. Un componente es
una parte independiente y reutilizable de la interfaz de usuario. Estos
componentes pueden ser definidos como clases, que son objetos en JavaScript
que pueden contener métodos y propiedades.
La clase principal que se utiliza para definir componentes en React es Component
que se importa desde la biblioteca React. Los componentes de clase tienen un
método especial llamado render, que devuelve una descripción de cómo debería
verse el componente en la interfaz de usuario (a menudo utilizando JSX).

3. Principales eventos React

React maneja eventos de manera similar a HTML, utilizando camelCase. Algunos
eventos comunes son:
• onClick: Se activa cuando se hace clic en un elemento.
• onChange: Se activa cuando el valor de un elemento de formulario cambia.
• onSubmit: Se activa cuando se envía un formulario.
• onKeyDown, onKeyUp, onKeyPress: Eventos relacionados con las teclas
del teclado.
• onMouseOver, onMouseOut: Eventos relacionados con el ratón.
4. Mapa conceptual de React

¿Qué es React?

React es una biblioteca de JavaScript para crear

interfaces de usuario en la web.

Permite construir aplicaciones eficientes y

dinámicas

Conceptos Básicos Virtual DOM

• JSX: Sintaxis que combina HTML y React utiliza un DOM virtual para optimizar las
JavaScript en React. actualizaciones en la interfaz.
• Componentes: Bloques de
Solo actualiza los elementos que han
construcción reutilizables en React.
cambiado, en lugar de todo el DOM.
• Props: Propiedades que se pasan a los
componentes.
• Estado: Datos que pueden cambiar en
un componente.
• Hooks: Funciones especiales para
manejar el estado y el ciclo de vida.

Beneficios de React

Rendimiento: Actualizaciones eficientes gracias

al Virtual DOM.

Reutilización: Componentes modulares y

reutilizables.

Comunidad activa: Muchos recursos y librerías

disponibles.