Taller sobre componentes front-end

Integrantes

Angie Paola Cárdenas Jaime

Juan Esteban Meneses Estrada

Rossana Ivon Caldera Serrano

Tecnología en Análisis y desarrollo de Software

Ficha 2455253 Servicio nacional de aprendizaje-SENA

Bogotá D.C-Colombia

Junio de 2023
 Contenido

Introducción 3

Objetivos 4

Conclusión 6

Referencias 7
 Introducción

React es una biblioteca de JavaScript muy popular para crear componentes interactivos

en el front-end de aplicaciones web. Con React, podemos construir interfaces de usuario

reutilizables y dinámicas de manera eficiente.

Una de las cosas interesantes de React es que utiliza una representación virtual del DOM en

memoria, lo que hace que las actualizaciones en la interfaz de usuario sean rápidas. También

utiliza JSX, una mezcla de HTML y JavaScript, lo que hace que el código sea más fácil de

entender y escribir.

React nos permite administrar el estado de los componentes, lo que significa que podemos

controlar cómo se ve y se comporta nuestra aplicación en diferentes situaciones. Cuando

actualizamos el estado, React se encarga de actualizar solo las partes necesarias en el DOM, lo

que mejora el rendimiento. Además, React tiene una gran comunidad de desarrolladores que

ofrece muchas bibliotecas y herramientas útiles para facilitar el desarrollo.

En resumen, React es una biblioteca de JavaScript que nos ayuda a crear componentes

interactivos y reutilizables en el front-end de nuestras aplicaciones web. Con su enfoque en la

eficiencia, la sintaxis sencilla y la administración del estado, React se ha convertido en una

elección popular para el desarrollo front-end.

3
Objetivo

● Codificación del módulo del proyecto según las características del software a

desarrollar, utilizando Frameworks para el front-end con React-JS.

4
 ¿Qué son clases en React?

En React, las clases son una forma especial de definir componentes. Puedes pensar en

una clase como una plantilla que te ayuda a construir un componente con su comportamiento y

apariencia.

Para crear una clase en React, usamos la palabra clave class seguida del nombre de la clase y

extendemos la clase base React.Component. Dentro de la clase, podemos agregar métodos y

propiedades que definen cómo se ve y se comporta nuestro componente.

Un método importante en una clase de React es render(), que devuelve la representación visual

del componente utilizando JSX. En este método, especificamos qué elementos y componentes

queremos mostrar en la interfaz de usuario.

También podemos usar el estado en las clases de React. El estado es un objeto especial que

contiene datos que pueden cambiar a lo largo del tiempo y afectar la representación del

componente. Al actualizar el estado, React se encarga de actualizar automáticamente la interfaz

de usuario para reflejar esos cambios.

Es importante tener en cuenta que, aunque las clases son una forma válida de crear componentes

en React, también existe una alternativa llamada "Componentes Funcionales" que se ha vuelto

muy popular. Los componentes funcionales son más simples y concisos, utilizando funciones en

lugar de clases.

5
En resumen, las clases en React son plantillas que nos ayudan a crear componentes con

comportamiento y apariencia específicos. Podemos agregar métodos y propiedades, como

render(), para definir la representación visual del componente. Aunque las clases son una opción,

también puedes considerar los componentes funcionales como una alternativa más simple.

Ejemplo de sintaxis:

import React from 'react';

class MiComponente extends React.Component {

render() {

return (

<div>

<h1>Hola, Mundo!</h1>

<p>Este es un ejemplo de un componente de clase en React.</p>

</div>

);

export default MiComponente;

6
 Principales eventos de React

Evento Descripción

onClick Se dispara cuando se hace clic en un elemento.

onChange Se dispara cuando el valor de un elemento de

entrada cambia.

onSubmit Se dispara cuando se envía un formulario.

onMouseEnter Se dispara cuando el cursor del mouse entra en

un elemento.

onMouseLeave Se dispara cuando el cursor del mouse sale de

un elemento.

onKeyDown Se dispara cuando una tecla se presiona

mientras un elemento está enfocado.

onKeyUp Se dispara cuando una tecla se suelta mientras

un elemento está enfocado.

onFocus Se dispara cuando un elemento recibe el foco,

es decir, se selecciona.

onBlur Se dispara cuando un elemento pierde el foco,

es decir, se deselecciona.

7
 Diferencia entre React y JSX

React JSX

Biblioteca de JavaScript para construir Extensión de sintaxis utilizada dentro de

interfaces de usuario. los componentes React.

Permite crear y administrar componentes Facilita la escritura de código HTML

reutilizables. similar dentro de componentes React.

Se encarga de la representación y Combina HTML y JavaScript en un solo

actualización eficiente de los componentes archivo.

en la interfaz de usuario.

Proporciona un Virtual DOM para Ayuda a escribir componentes de manera

optimizar las actualizaciones en la interfaz declarativa y legible.

de usuario.

Permite manejar el estado de la aplicación Permite utilizar elementos HTML y

y manipular el DOM de manera eficiente. expresiones JavaScript en el código.

8
Mapa conceptual de React

9
 Conclusión

Los componentes de front-end, como los de React, son bloques de construcción

esenciales en el desarrollo de aplicaciones web y móviles. Estos elementos modulares y

reutilizables definen la interfaz de usuario y se crean con HTML, CSS y JavaScript. React ofrece

dos opciones para crear componentes: clases y funciones. Además, JSX es una extensión de

sintaxis que nos permite escribir código HTML dentro de los componentes de React. Los eventos

en React, como onClick y onChange, nos permiten capturar la interacción del usuario y tomar

acciones específicas. Con estos conocimientos, podemos crear aplicaciones web modernas y

atractivas.

10
 Referencias

W3Schools. (2023). React Get Started. Obtenido de

https://www.w3schools.com/react/react_getstarted.asp

Territorium. (2023). Desarrollo de Front-end con REACT JS. Obtenido de

https://sena.territorio.la/content/index.php/institucion/Titulada/institution/SENA/

Tecnologia/228118/Contenido/OVA/CF31/index.html#/

Caballero Valdivia , José Jesús (2021).Modelo de procesos para el desarrollo del front-end de

aplicaciones web Universidad Nacional Mayor de San Marcos Repositorio

http://cybertesis.unmsm.edu.pe/handle/20.500.12672/17030

José Jesús Valdivia-Caballero (2016)Modelo de procesos para el desarrollo del front-end de

aplicaciones web Interfaces Universidad de Lima

https://revistas.ulima.edu.pe/index.php/Interfases/article/view/1245

Moreno Ortega , Miguel (2015)Definición, diseño e implementación de métricas de usuario final

sobre componentes web en el lado Front-end, mediante Google Analytics Digital Upm

https://oa.upm.es/38363/

11