Proyecto: SOFT. BARBERIA Versión: 1.

0
Cliente: PACIFIC BARBER

TECNÓLOGO EN ANÁLISIS Y DESARROLLO DE

SOFTWARE

TALLER SOBRE COMPONENTES FRONT-END GA7-220501096-AA4-EV01

NEIFFER CATHERINE GOMEZ

LUIS EDGAR SALAZAR PARRA

JONATHAN ANDRÉS VILLARREAL RIVAS

SERVICIO NACIONAL DE APRENDIZAJE - SENA

ANÁLISIS Y DESARROLLO DE SOFTWARE

COLOMBIA, FEBRERO 2024

Nombre del Documento: Formulación del Proyecto de Software Versión: 1.0

Fecha de Creación: 04 de abril de 2023 Página: 1
 Proyecto: SOFT. BARBERIA Versión: 1.0
Cliente: PACIFIC BARBER

INTRODUCCION

En el siguiente documento se tiene como finalidad poder entender las diferencias

principales entre React y JSX como también entrar en el mundo de las clases que React
nos brinda para desarrollar mejores experiencias de usuario y los eventos principales que
usamos con frecuencia al momento de desarrollar una aplicación frontend con esta gran
tecnología Como es React.js

Nombre del Documento: Formulación del Proyecto de Software Versión: 1.0

Fecha de Creación: 04 de abril de 2023 Página: 2
 Proyecto: SOFT. BARBERIA Versión: 1.0
Cliente: PACIFIC BARBER

DIFERENCIA ENTRE REACT Y JSX

React y JSX son dos conceptos relacionados pero diferentes en el contexto de desarrollo
de
aplicaciones web utilizando la biblioteca React.

1. REACT:

React es una biblioteca de JavaScript utilizada para construir interfaces de

usuario interactivas y componentes reutilizables.

React se encarga de administrar el estado y el ciclo de vida de los componentes,

permitiendo la creación de aplicaciones web eficientes y escalables.

React utiliza una sintaxis basada en componentes para construir interfaces de

usuario, lo que ayuda a dividir la interfaz en partes más pequeñas y manejables.

2. JSX (JAVASCRIPT XML):

JSX es una extensión de sintaxis para JavaScript que permite escribir código
HTML similar dentro de JavaScript. Es una parte fundamental del flujo de
trabajo de desarrollo en React.

JSX permite la representación declarativa de los componentes de React

mediante la combinación de código JavaScript y elementos HTML/XML.

Aunque JSX se parece a HTML, en realidad es transpilado a llamadas de

funciones de React antes de ser interpretado por el navegador. Esto permite a
React manejar el rendimiento y la actualización eficiente de la interfaz de

Nombre del Documento: Formulación del Proyecto de Software Versión: 1.0

Fecha de Creación: 04 de abril de 2023 Página: 3
 Proyecto: SOFT. BARBERIA Versión: 1.0
Cliente: PACIFIC BARBER

usuario.

En resumen, React es la biblioteca que proporciona las capacidades y la estructura para

construir aplicaciones web interactivas, mientras que JSX es una extensión de sintaxis que
facilita la creación de componentes de React utilizando una sintaxis similar a HTML.
Juntos, React y JSX forman una poderosa combinación para el desarrollo de interfaces de
usuario modernas y dinámicas.

¿Qué son clases en React?

En React, las clases son una forma de definir componentes utilizando el sistema de
programación orientada a objetos (POO). Las clases en React son una de las dos formas
principales de definir componentes, la otra es mediante funciones (también conocidos
como componentes funcionales). Las clases proporcionan una manera más tradicional de
crear componentes utilizando el concepto de "clase" en JavaScript.

Las clases en React se definen utilizando la palabra clave class. Cada clase que define un
componente debe extender la clase base React.Component para heredar todas las
funcionalidades de React. Aquí hay un ejemplo básico de cómo se ve una clase de
componente en React:

import React, { Component } from 'react';

class Mi Componente extends Component {
render () {
return (
<div>
<h1>Hola desde Mi Componente</h1>
</div>
);
}
}
export default Mi Componente;

Nombre del Documento: Formulación del Proyecto de Software Versión: 1.0

Fecha de Creación: 04 de abril de 2023 Página: 4
 Proyecto: SOFT. BARBERIA Versión: 1.0
Cliente: PACIFIC BARBER

En este ejemplo, Mi Componente es una clase que hereda de React.Component. La clase

debe tener al menos un método llamado render, que devuelve el contenido que se
mostrará cuando se utilice este componente en la interfaz de usuario.

A medida que se agregan más métodos y propiedades a la clase, es posible manejar el

estado, los ciclos de vida y otras funcionalidades específicas de React. Sin embargo, con
la introducción de los React Hooks en versiones más recientes de React, los componentes
funcionales se han vuelto más populares debido a su simplicidad y facilidad de uso.

En resumen, las clases en React son una forma de definir componentes utilizando la
programación orientada a objetos. Aunque todavía son válidas, muchas veces se prefieren
los componentes funcionales y los React Hooks por su simplicidad y mejores prácticas
actuales

PRINCIPALES EVENTOS DE REACT

En React, los eventos son acciones que ocurren en la interfaz de usuario, como hacer clic
en un botón, introducir texto en un campo de entrada o mover el mouse sobre un
elemento. Los eventos en React son similares a los eventos en HTML y se manejan
utilizando funciones llamadas "manejadores de eventos".

Aquí hay algunos de los principales eventos de React:

1. ONCLICK: Este evento se activa cuando un elemento es clicado. Es comúnmente

utilizado con botones y enlace.

2. ONCHANGE: Se activa cuando el valor de un elemento cambia, por ejemplo, cuando

se escribe en un campo de entrada.

3. ONSUBMIT: Se activa cuando se envía un formulario.

4. ONMOUSEOVER Y ONMOUSEOUT: Se activan cuando el mouse se mueve sobre un

elemento o se mueve fuera de él.

5. onKeyDown, onKeyUp, onKeyPress: Estos eventos se activan cuando se

presionan, sueltan o mantienen presionadas teclas del teclado.

Nombre del Documento: Formulación del Proyecto de Software Versión: 1.0

Fecha de Creación: 04 de abril de 2023 Página: 5
 Proyecto: SOFT. BARBERIA Versión: 1.0
Cliente: PACIFIC BARBER

6. onFocus y onBlur: Se activan cuando un elemento obtiene o pierde el foco.

Cada evento se asocia con una función de manejo de eventos que se ejecuta cuando
ocurre el evento. Es importante recordar que en React, los manejadores de eventos se
pasan como propiedades (por ejemplo, onClick={handleClick}), y la función de manejo de
eventos debe definirse previamente en el componente.

Nombre del Documento: Formulación del Proyecto de Software Versión: 1.0

Fecha de Creación: 04 de abril de 2023 Página: 6
 Proyecto: SOFT. BARBERIA Versión: 1.0
Cliente: PACIFIC BARBER

MAPA CONCEPTUAL DE REACT

Nombre del Documento: Formulación del Proyecto de Software Versión: 1.0

Fecha de Creación: 04 de abril de 2023 Página: 7
 Proyecto: SOFT. BARBERIA Versión: 1.0
Cliente: PACIFIC BARBER

CONCLUSIÓN

Aunque React es una librearía muy completa, en algunas ocasiones no encontraremos en

ella toda la funcionalidad que requiere un desarrollo. Pero aquí también reside su punto
fuerte, podremos incorporar librerías de terceros. Su flexibilidad, rapidez y organización del
código la convierten en una de las opciones favoritas por la comunidad de desarrolladores.
Además, no olvidemos que, al ser de código abierto, está respaldada por toda la
comunidad.

Nombre del Documento: Formulación del Proyecto de Software Versión: 1.0

Fecha de Creación: 04 de abril de 2023 Página: 8