Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 2 vistas

    Taller Fundamentos de Frontend

    Cargado por

    ubadelmendozafernandez
    Taller sobre aspectos básicos en el desarrollo frontend

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    Taller Fundamentos de Frontend

    Cargado por

    ubadelmendozafernandez
    2 vistas5 páginas
    Taller sobre aspectos básicos en el desarrollo frontend

    Título original

    Taller fundamentos de frontend

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Taller sobre aspectos básicos en el desarrollo frontend

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    2 vistas5 páginas

    Taller Fundamentos de Frontend

    Cargado por

    ubadelmendozafernandez
    Taller sobre aspectos básicos en el desarrollo frontend

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    de 5

    Tecnología en Análisis de Desarrollo de Software

    GA7-220501096-AA4-EV01 Taller sobre componentes


    frontend.
    GA7-220501096-AA4-EV02 Verificación de procedimientos
    para la definición de componentes frontend de la
    aplicación.

    Aprendiz: Ubadel Antonio Mendoza Fernández


    Presentado a: Camilo Alfonso Salamanca Guauque
    Ficha: 2721424

    Centro de Tecnologías del Transporte


    Regional Distrito Capital
    Puerto Libertador – Córdoba
    2024
    Introducción

    En este documento se desarrolla el taller propuesto en la guía de aprendizaje sobre


    los componentes del frontend, tomando como punto de inicio el material de
    formación “Desarrollo de frontend con React JS”.

    La librería de React es una herramienta que permite desarrollar interfaces de


    usuario que componen el frontend de una aplicación o sitio web, facilitando su
    creación, implementación y reutilización en diferentes sitios, permitiendo desarrollar
    tanto el lado del cliente y del servidor.

    El objetivo de este taller es presentar las principales características y


    funcionalidades que trae React al momento de utilizarlo en el desarrollo del frontend
    en nuestro proyecto, conociendo sus principales pilares fundamentales, eventos y
    conceptos para poder implementarlo.
    Taller sobre componentes frontend

    1. Diferencia entre React y JSX

    React es una biblioteca de JavaScript que permite


    construir interfaces de usuario de una manera fácil y
    dinámica, este se basa en componentes reutilizables
    que facilitan su reutilización, ofrece una rápida
    renderización de las páginas y un mayor rendimiento,
    esto debido al uso de componentes.

    JSX es una extensión de la sintaxis de JavaScript utilizada


    en la creación de elementos de React. Empleada por los
    desarrolladores para incrustar código HTML en objetos
    JavaScript. Ya que JSX acepta expresiones válidas de
    JavaScript e incrustación de funciones, puede simplificar las
    estructuras de código complejas.

    2. ¿Qué son clases en React?

    Las clases en React son una forma de definir componentes que heredan
    de React.Component. Los componentes de clase deben tener un método
    render () que devuelva los elementos de React para la interfaz del
    componente. Los componentes de clase de diferencian de los
    componentes funcionales, que son funciones de JavaScript que aceptan
    props como argumentos y retornan un elemento React.

    3. Principales eventos de React

    Los eventos en React son acciones que ocurren en la interfaz de usuario


    en una aplicación, como hacer clic en un botón, mover el ratón o escribir
    en un campo de texto. Los eventos en React son nombrados en
    camelCase por ejemplo, onClick. Algunos de los principales son:

     onClick: Ejecuta una cierta funcionalidad cuando se hace clic en un


    botón.
     onMouseEnter: Ejecuta una cierta funcionalidad cuando el puntero
    del ratón se mueve sobre un elemento.
     onDrop: Ejecuta una cierta funcionalidad cuando el elemento
    arrastrado es soltado dentro del área de un receptor de soltado.
     onDrag: Ejecuta una cierta funcionalidad cuando está siendo
    arrastrado un elemento o la selección de texto.
     onKeyDown: Ejecuta una cierta funcionalidad cuando el usuario
    pulsa una tecla.
     onKeyPress: Ejecuta una cierta funcionalidad cuando una tecla que
    produce un valor de carácter es presionada.
     onCopy: El evento se activa cuando el usuario copia un elemento o
    el contenido de un elemento, como texto o imágenes.
     onScroll: Ejecuta una cierta funcionalidad cuando se está
    desplazando la barra de desplazamiento de un elemento.
     onSelect: Ejecuta una cierta funcionalidad después de que algún
    texto haya sido seleccionado en un elemento.

    4. Mapa conceptual de React


    Componentes

    Login: Componente que permitirá el ingreso de los usuarios al aplicativo, el


    formulario de ingreso no contará con la opción de registrar un nuevo usuario
    ya que el sistema tendrá dos usuarios predeterminados.

    Navbar (Barra de navegación): Componente que contiene enlaces a


    diferentes secciones del aplicativo.

    Formularios: Componente que permitirá el ingreso de registros al sistema.

    Alertas: Componente que contiene mensajes de advertencia, éxito o error al


    usuario.

    Vistas: Componentes que permitirán mostrar al usuario los datos registrados


    y donde podrá realizar algunas acciones como editar, eliminar, descargar o
    imprimir.

    Botones: Componentes que tendrán las acciones y funciones de los botones


    de confirmación o cancelación de aplicativo.

    Dropdown (Menú desplegable): Componente que mostrará una lista de


    opciones en un menú desplegable.

    Footer (Pie de página): Componente con información adicional del equipo


    desarrollador enlaces e información de contacto.

    También podría gustarte