Dependencias
Vamos a repasar las dependencias más importantes de este primer proyecto para comprender cómo está configurado.
React
React es el Framework web basado en componentes de Facebook. Cuenta con una curva de aprendizaje corta y mucha flexibilidad. Sus características más importantes son Virtual DOM, componentes y props, estados y ciclos de vida... Esto permite crear páginas web interactivas, rápidas y eficientes, además de poder reutilizar código a lo largo del proyecto.
Vite
Toolchain para la creación de proyectos basados en React, contiene lo báisco para crear proyectos basados en single-page apps. React tiene una cierta complejidad a la hora de configurar proyectos, debido a la configuración interna de dependencias como bundleres. Existen soluciones alternativas como Gatsby o Next.js. Por diversos motivos es la toolchain más recomendada para proyectos SPA por encima de create-react-app.
Styled Components
Librería que permite usar template literals y css para crear estilos como componentes de JavaScript. La librería permite usar todas las funcionalidades de CSS moderno junto a características de React como props. Además, al crear componentes, es fácil aplicar convenciones de nombres para estructurar nuestro Virtual DOM.
Internationalization
Framework externo de React basado en i18next que permite la internacionalización de nuestra página, permitiendo controlar la selección de idiomas, localización como servicio, server side rendering...
Lottie
Lottie es una librería que permite renderizar animaciones en tiempo real, permitiendo una configuración similar a imágenes estáticas. Por dentro, estas animaciones son archivos basados en JSON que permite a diseñadores crear animaciones de forma sencilla en cualquier tipo de plataforma. Estos archivos funcionan en cualquier tipo de dispositivo y pueden escalar sin pixelación, al ser diseños vectoriales.
React Router
React Router es una librearía de navegación para cliente y server-side. Esta librería puede ser ejecutada tanto en la web, en el servidor mediante node.js y en React Native. Dentro de sus funcionalidades, tenemos características como configuración de rutas, navegación con enlaces, paso de información mediante parámetros URL, uso de rutas anidadas...
Typescript
Ya hemos hecho una introducción de TypeScript en el módulo de JavaScipt. TypeScript añade comprobación estática de código. Javascript es dinámico, y es por ello que es muy flexible y ágil a la hora de prototipar, el problema es que puedes encontrate con muchos posibles puntos de conflicto, es por ello que TypeScript ayuda a identificar y evitar esos problemas en tiempo de desarrollo.
Swagger
Herramienta para creación de especificaciones OpenAPI. Esto significa que podemos diseñar, construir, documentar y utilizar servicios web RESTful. Fue desarrollado por SmartBear Software e incluye documentación automatizada, generación de código, y generación de casos de prueba.
Figma
Herramienta de diseño vectorial y prototipado, principalmente basada en web. Esto permite que sea multiplataforma y que puedas acceder a todos los recursos en cualquier lugar. Además tiene características off-line adicionales habilitadas gracias a su desarrollo en webassembly. El conjunto de funciones de Figma se enfoca en el uso de la interfaz de usuario con énfasis en la colaboración en tiempo real.