Práctica | Text2ArtJS

Introducción

Consiste en crear un sitio web (single page) para generar Arte ASCII basado en Texto, Imagen y GIF.

Objetivo

El objetivo de la práctica es usar react-router-dom, componentes, custom hooks durante el desarrollo de la práctica con React. Además de usar e incluir módulos externos de npm para React.

Este conjunto de tecnologías y características para este sitio web:

Proyecto dockerizado. (*)
Proyecto vagratizado. (*)
Estilos de Tailwind CSS
Componentes funcionales de ReactJS
Hooks personalizados
Etiquetas de Open Graph (para SEO)

Las herramientas utilizadas para la práctica son:

Visual Studio Code (editor de texto)
NPM (gestor de paquetes)
Vite (bundler o empaquetador de aplicaciones web)
Git (control de versiones)
GitHub (Alojamento de repositorios git)
GitHub Pages (Alojamiento de sitios web estáticos)
MySQL (base de datos)
Terminal
etc.

Conocimientos obtenidos

Vite es un bundler o empaquetado de aplicaciones web y una herramienta de desarrollo que se distingue por su alta velocidad y eficiencia.

ReactJS es una biblioteca de JavaScript de código abierto utilizada para construir interfaces de usuario, especialmente para aplicaciones web de una sola página (SPA, por sus siglas en inglés).

GitHub Pages es un servicio proporcionado por GitHub que permite a los usuarios alojar sitios web estáticos directamente desde un repositorio en GitHub.

Open Graph son metadatos de etiquetas para HTML que permite a las páginas web optimizar su apariencia y contenido cuando son compartidas en redes sociales o aplicaciones.

Al desarrollar la práctica se obtiene conocimientos acerca de

Vite Sirve como un empaquetado de aplicaciones web
ReactJs Para crear una aplicación web.
GitHub Pages Alojamiento de sitios web estáticos gratuito
react-router-dom Sirve para crear rutas dinámicas
componentes funcionales Sirve para crear pequeños bloques de código y poder reutilizarlos en otros componentes, de tal manera que se puede distribuir y dividir mejor el código.
custom hooks Sirve para crear bloques de códigos con lógica repetitiva o avanzada, que se puedan reutilizar en los componentes.
Open Graph Sirve para incluir información relevante del sitio web al ser compartidas en redes sociales
NPM Para descargar, instalar y desinstalar paquetes.
Git Para crear commit, crear ramas, fusionar ramas, subir repositorio a GitHub, etc.
etc.