Esta es mi solución a Body Mass Index Calculator. Los desafíos de Frontend Mentor lo ayudan a mejorar sus habilidades de codificación mediante la creación de proyectos realistas.
- Instalación de vite-plugin-svgr
vite-plugin-svgr es un plugin que permite importar archivos SVG como componentes React. Si utilizas react estandar no es necesara esta configuración, react de forma nativa permite importar archivos SVG como componentes.
npm i vite-plugin-svgr -D- Agregar el plugin en el archivo vite.config.js
import svgr from 'vite-plugin-svgr'
export default {
// ...
plugins: [svgr()],
};
Terminar un proyecto es muy satisfactorio y emocionante. Sin embargo, siempre hay algo que mejorar.
Recursos importantes de apoyo
- CSS BEM (Bloque, Elemento, Modificador) - Metodología de nomenclatura para CSS.
- Iniciar un Proyecto con Vite - Vite es un bundler que permite crear proyectos de React de forma rápida.
- Customizar Radio Buttons - Crear radio buttons personalizados con CSS.
Recursos que siempre mantengo a mano
- HTML y CSS - Cuando requiero de algo, rápidamente puedo encontrarlo.
- FlexBox Guide - Esto nunca puede faltar XD
- Bootstrap - Si bien no lo utilizo en mis proyectos. Lo recomiendo para aprender a cómo crear tus propios componente. Por ejemplo un modal o un barra de navegación. Bootstrap tiene una documentación muy completa y fácil de entender.
- Mentor de frontend — @d4nnym
- Twitter — @dannymatute_