Haciendo mas fácil el trabajo con React

Todos los que hemos tenido que hacer un curso con react, y/o lo hemos tenido que impartir, hemos tenido que sufrir con la grandiosa perdida de tiempo que se produce cuando lanzamos nuestro potente

npx create-react-app mi_aplicacion

Y, aunque nos genera una estructura muy útil… ¿Por qué no preparamos algo mas cómodo para ese trabajo?

Todos sabemos que el comando create-react-app nos genera una estructura muy útil, a la vez que prepara el entorno de desarrollo que podemos necesitar. Entonces, ¿Por que, nos vamos a atrever a realizar otra cosa?

Muy sencillo, por dos motivos

• Por un lado, mientras se crea la estructura, no podemos hacer nada mas que admirar lo bien que trabaja, y, eso, es algo que me pone muy nervioso, teniendo ya una idea de lo que quiero hacer, tener que quedarme contemplando la pantalla, no es mi ideal
• El otro motivo es que, si bien la estructura que genera puede que sea la ideal en condiciones abstractas, cada uno, y cada empresa tiene sus propias costumbres acerca de como se desea la estructura, y mas si tenemos que trabajar en entornos especiales (por ejemplo WordPress)

Bien, y tras convenceros de las posibilidades que se abren, vamos a establecer alguna limitación.

• Aunque soy un entusiasta de los test, voy a suprimir la generación de ficheros
• El articulo plantea una estructura sencilla, y enseña como ajustarla a las necesidades. Ya sabemos que cada uno, tendrá las suyas
• El proyecto, aunque se puede usar en produccion, esta muy orientado a la formación. El salto lo tendréis que dar vosotros, y si queréis, comentármelo, o incluso, escribir un articulo; si lo enviáis, lo publico.

Realizando el trabajo

Lo primero que necesitamos, será generar un proyecto base, que posteriormente optimizaremos a nuestro gusto.

Para ello, hago uso de create-react-app para crear nuestra aplicación basebase.

Si trabajamos con VisualCode, podemos abrirlo en nuestro directorio de trabajo, abrimos a continuación nuestro terminal, y lanzamos la creación

Y esperamos que termine. Tras ellos nos encontramos con la estructura que vamos a corregir

De esta lista de ficheros, ya he marcado los que de momento vamos a borrar. Naturalmente, en función de vuestra forma de trabajar, puede que queráis borrar también App.css y index.css

El siguiente paso, es modificar el contenido de algunos ficheros. Yo señalare las líneas imprescindibles, debido al borrado de ficheros, vosotros podéis borrar las estructuras que no consideréis necesarias. En la primera parte, debemos poder ejecutar nuestro proyecto para comprobar que no hemos hecho nada mal.

En index.js podemos quitar lo marcado

Y en App.js podemos quitar

A partir de este momento, podemos configurar nuestros directorios como nos interese; por ejemplo,

Y podemos modificar el fichero README.md para que contenga la información general mas próxima

Si queréis limpiar un poco mas, podéis revisar el módulo index.html, que se encuentra en la carpeta public

Como empleamos la carpeta

Lo que hemos conseguido es una carpeta (basebase) que contiene todo lo necesario para iniciar un proyecto con React. para usarlo, solo tendremos que copiarla a la carpeta del proyecto que queremos crear, supongamos que el proyecto será «nuevo1», podemos hacer

Si hemos borrado node_modules, la copia se hace al instante, ya que hay pocos ficheros, y, a continuación, entramos en el directorio creado para lanzar un npm install para cargar los módulos necesarios, pero antes, si se quiere, se puede ver la lista de paquetes de package.json para no cargar paquetes innecesarios

Solo recordaros que podeis cambiar el nombre del proyecto en el package.json

Aunque el npm install también puede ser largo, ya no me importa, porque mientras se realiza, yo ya puedo empezar a escribir los módulos que necesite

Conclusión

Reconozco, que en el trabajo habitual, la mejora en tiempo que representa esto, no aporta mucho, pero, si teneis que crear muchos proyectos nuevos de React, como para al impartir o recibir un curso, veréis que la cantidad de trabajo que quita, es considerable