He estado revisando algunas plantillas disponibles (FREE) para React y son excelente y hay una gran cantidad de ellas.

¿Por qué utilizar plantillas? Porque de entrada, te facilitan una gran labor de «presentación» de tu aplicación, además de tener una estructura de directorios y ficheros que te explican cómo se debe construir un proyecto grande y ordenado, y además,  te facilita una gran cantidad de código de calidad para tu aplicación.

¿Qué problemas tiene? Esta es mi conclusión, por lo que puede que para otro perfil pueda tener otros.

• Normalmente, hay muchas plantillas de alta calidad que utilizan los componentes que ellos mismos han producido y eso te «obliga» a que tu proyecto se basen, principalmente, en esos componentes. A mi me gustan los componentes y soluciones de Material UI. Son los que he utilizado en artículos anteriores.
• El código que te entrega es de alta calidad y por lo tanto, necesitas tener buen conocimiento de React y del conjunto de componentes que utilizan en la Plantilla. Casi todos los casos disponen de una documentación que explica cómo está construido.
• No son aplicaciones completas (lógicamente), por lo que falta toda la parte del Server y siempre o casi siempre, te venden una versión PRO que es mucho más completa y relativamente barata.

DEMO: https://fhumanes.com/mantis-react/

Solución Técnica

El ejemplo está basado en la plantilla Mantis de Material UI (MUI). Los motivos para seleccionar esta plantilla son:

• Es de las más usadas por los desarrolladores de React.
• Al ser de MUI, utiliza los componentes de MUI, que son los que hemos utilizado en los artículos anteriores.

En la actualidad, sigo revisando su código y aprendiendo, pero me parece importante comunicaros que estoy en esta línea de trabajo que creo es la más adecuadas, ya que en los proyectos se avanza muchísimo si reutilizas código (de calidad).

¿Qué es lo que he hecho hasta ahora?

• He cambiado la herramienta de construcción. Por defecto trae «VITE», que he visto que es muy habitual y he puesto «Webpack», que es lo que hemos utilizado hasta este momento con todos los ejemplos.
  Para hacer esto he creado un nuevo proyecto y he instalado todas las librería que se indica en el fichero «package.json» excluyendo los de «vite». Son:

  npm i @ant-design/colors @ant-design/icons @emotion/cache @emotion/react @emotion/styled @fontsource/inter @fontsource/poppins @fontsource/public-sans @fontsource/roboto @mui/lab @mui/material @mui/system @mui/x-charts formik framer-motion lodash-es react-device-detect react-number-format react-router react-router-dom simplebar-react swr yup

• He visto cómo se configura la ruta base, para la referencia de todos lo «import», siempre que no se indique que es relativa. La plantilla viene así y creo que es una muy buena forma de trabajar.
  – Fichero «jsconfig.json» en la raíz (en este caso siempre depende del directorio «src»):

  {
    "compilerOptions": {
      "baseUrl": "src",
      "paths": {
        "@/*": ["./*"]
      }
    },
    "exclude": ["node_modules"]
  }

• También he visto cómo se construye el paquete de producción fraccionándolo para que la carga inicial no sea excesivamente lenta.
  – Fichero «webpack.config.js», también en el directorio raíz:

  const publicPath = process.env.NODE_ENV === 'production' ? '/mantis-react/' : '/mantis-react/';
  
  module.exports = {
    // ... otras configuraciones
    output: {
      publicPath: publicPath,
      chunkFilename: 'static/js/[name].[contenthash].chunk.js',
      filename: 'static/js/[name].[contenthash].bundle.js',
    }
  };

• Además he cambiado el fichero de configuración para adaptarlo al que habitualmente utilizo y he «retirado» paneles que entendí que eran de propaganda del fabricante.

Espero que compartáis mi valoración sobre las plantillas y en cuanto disponga de más conocimientos la utilizaré para realizar una aplicación ejemplo.

Os facilito el código adaptado, pero recordad que el producto completo y su documentación (que también sirve para mi ejemplo) está en la web, a nuestra disposición.

En este artículo explico cómo se crea una nueva app y cómo se instalan los ejemplos