Starter library

Usa:

• ReactJs
• Webpack
• Sass
• (StyleGuidist)[https://react-styleguidist.js.org/]
• Jest Unit Testing

Entornos

Para instalar todas las dependencias:

$ yarn

Devel

Para levantar el entorno de desarrollo:

$ yarn start

Encontraremos el entorno: http://localhost:7400/

Build

Para generar los archivos /dist y que los componentes sean accesibles desde cualquier otro lugar debemos ejecutar el comando:

$ yarn run build

Con este comando se genera la carpeta /dist, preparado para su subida a producción, minificado y limpio.

Documentación

Utilizamos StyleGuidist para la documentación de componentes. Para poder saber que propiedades acepta cada uno, y de que tipo. Esto lo gestionamos comentando cada propType, a modo de descripción. Para poder ver la documentación que genera, necesitaremos ejecutar:

$ yarn run doc

El entorno donde podemos verlo es: http://localhost:6060/

Podemos generar el archivo /dist para subir la documentación a un entorno de producción a modo de consulta para el equipo ejecutando:

$ yarn run doc-build

Los archivos necesarios para desplegar en el entorno de producción se desplegan en la carpeta /styleguide

Testing

Todos los componentes deben ir con sus correspondientes test. Es muy importante que se mantenga la filosofia de testear todos los componentes que se desarrollen con el fin de evitar posibles bugs en el futuro, para correr los test el comando es:

$ yarn test

Para correrlos en modo escucha:

$ yarn run test:watch

Para ver la tabla de Coverage de testing en nuestro código:

$ yarn run coverage

Linter

Para que el código siga un orden lógico y limpio, común entre todos los desarrolladores que participen en el proyecto, utilizamos Eslinter, con su configuración estandar para React. Debemos instalar su extensión en nuestro IDE, pero además podemos lanzar un comando por consola que nos muestre una tabla con los errores y warnings más relevantes:

$ yarn run linter

Proceso de desarrollo:

• Creación de vistas:
  • Crear la carpeta con el nombre más a fin a lo que va a mostrar para facilitar su reconocimiento: /views/nombre-carpeta
  • Si contiene sub vistas, crearlas en sus respectivas carpetas dentro de esta, siendo exportadas en un archivo index.js para su correcta importación después.
  • Definición de rutas /src/routes
  • Añadir la nueva página en el menú correspondiente /src/config
  • Importar los componentes pertientes en cada vista
• Creación de componentes:
  • Crear carpeta con el nombre del componente dentro de /src/modules
  • Cada componente consta de:
    • /components, donde incluimos la vista de nuestro nuevo componente:
      • ExampleComponent.jsx, vista, normalmente stateless function que recibe los propiedades, o no, y solo se responsabiliza de la vista, la lógica de esta recae sobre la vista, para que pueda ser dinámico y exportable a cualquier proyecto.
      • ExampleComponent.md, archivo markdown que monta un ejemplo del componente para pintarlo en la documentación del StyleGuist
    • /style
      • /_main.scss, donde se aplicarán los estilos que sobreescriban el actual tema puesto como base.
    • /test, donde incluiremos los archivos que contendrán nuestros test
      • ExampleComponents.test.js
    • index.js, donde exportamos el componente para hacer una ruta más limpia, y un fácil acceso para su posterior exportación.
• Documentar código: Una vez finalizado el componente, y lintado todo el código definiremos las PropTypes con su correspondiente comentario para definirla y hacerla clara desde la documentación.
• Testear Código: Es importante que antes de pasar ningún componente a producción te asegures de que está correctamente testeado, en todos los casos de uso posibles para minimizar posibles errores en producción que no podrán ser debugados.

Assets

En la carpeta de assets podemos encontrar las fuentes y los estilos base importados de Metronic y Bootstrap 4.

Utils

En /utils podemos incluir/encontrar funciones globales, tanto para exportar como para su uso interno.

/** Creado por: Judit Sánchez @JodieHag Última revisión: 25/04/2019 **/