ms-commons-react-create-app-self v1.0.0

Prerrequisitos

Se deben instalar las siguientes dependencias como prerrequisito:

• node: 10.16.0+

ms-commons-react-create-app

Proyecto para la creación de un proyecto con la configuración básica con React para los proyectos web desarrollados por Modusoftware.

Guía

• Instalación
• Creación Proyecto

Instalación

npm install -g ms-commons-react-create-app

Se realiza la verificación de la instalación de la dependencia:

ms-commons-react-create-app -V

Creación Proyecto

Después de realizar la instalación ya se puede realizar la creación de un nuevo proyecto con el siguiente comando:

ms-commons-react-create-app <directorio-proyecto> [opciones]

<directorio-proyecto> Es el nombre del directorio y proyecto que desea crear.

[opciones] El comando dispone de las siguientes opciones:

• -L, --without-login: Crea un proyecto sin la configuración básica para la seguridad de acceso a páginas y servicios.
• -V, --version: Muestra la versión que se encuentra instalada del comando ms-commons-react-create-app.
• -h, --help: Despliega información de ayuda para el uso del comando ms-commons-react-create-app.

Estructura Proyecto

Se crearán dos diferentes estructuras según las opciones ingresadas en la ejecución del comando:

Si se ejecuta el comando:

ms-commons-react-create-app <project-directory>

se creará la siguiente estructura:

my-app
├── node_modules
├── package.json
├── .gitignore
├── README.md
├── middleware-api.js
├── middleware-page.js
├── server.js
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── locales
│       ├── en
│       │   └── translation.json
│       └── es
│           └── translation.json
└── src
 ├── App.js
 ├── i18n.properties.json
 ├── i18nConfig.js
 ├── index.css
 ├── index.js
 ├── serviceWorker.js
 ├── containers
 ├── components
 │   └── styles
 ├── images
 │   └── logo.svg
 ├── pages
 │   ├── Home.jsx
 │   ├── Login.jsx
 │   └── styles
 │       ├── Home.css
 │       └── Login.css
 └── tests
     └── App.test.js

Si se ejecuta alguno de los siguientes comandos:

ms-commons-react-create-app <project-directory> -L
-------------------------------------------------------
ms-commons-react-create-app <project-directory> --without-login

se creará la siguiente estructura:

my-app
├── node_modules
├── package.json
├── .gitignore
├── README.md
├── server.js
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── locales
│       ├── en
│       │   └── translation.json
│       └── es
│           └── translation.json
└── src
 ├── App.css
 ├── App.js
 ├── i18n.properties.json
 ├── i18nConfig.js
 ├── index.css
 ├── index.js
 ├── logo.svg
 ├── serviceWorker.js
 ├── containers
 ├── images
 ├── components
 │   └── styles
 ├── pages
 │   └── styles
 └── tests
     └── App.test.js

En la carpeta public se deben alojar los archivos que se utilizarán para el desarrollo y que son recursos públicos, no confundir con imágenes utilizadas en los componentes o páginas creadas en React.

En la carpeta public/locales se deben alojar los archivos utilizados para los textos utilizados en el proyecto en sus diferentes idiomas, se debe crear una carpeta con el alias para cada idioma la cual debe contener un archivo con el nombre translation.json, por ejemplo para los textos en idioma francés se vería la siguiente estructura public/locales/fr/translation.json. Por defecto se crearon archivos para el idioma Español e Inglés (en, es).

En la carpeta src se deben alojar todos los archivos que se utilizarán para el desarrollo de la aplicación en React. La estructura de las carpetas internas creadas debe respetarse, todo para poder tener una arquitectura y orden genérico.

En la carpeta src/containers se deben alojar los fuentes de la lógica de los componentes, solo se debe crear un contenedor cuando la lógica de comportamiento del componente sea lo bastante compleja para que se tenga que manejar en un archivo externo.

En la carpeta src/components se deben alojar los fuentes de los componentes que son utilizados en las páginas del proyecto. Internamente se manejará los estilos de los componentes en la carpeta styles se recomienda utilizar una hoja de estilos por componente si este lo requiere.

En la carpeta src/pages se deben alojar los fuentes de las páginas las cuales se recomienda que la lógica de comportamiento sea mínima. Internamente se manejará los estilos de las páginas en la carpeta styles se recomienda utilizar una hoja de estilos por página si esta lo requiere.

En la carpeta src/images se deben alojar las imágenes utilizadas en los componentes y páginas del proyecto.

En la carpeta src/tests se deben alojar todos los archivos de las pruebas del código (Unitarias, Integración, etc.).

Dependencias Proyecto

El proyecto se creará por defecto con las siguientes dependencias:

• ms-react-commons: https://git.modusoftware.com/products/modusoftware_react_commons#readme
• react-bootstrap: https://react-bootstrap.github.io
• react-bootstrap-table: http://allenfang.github.io/react-bootstrap-table/
• react-bootstrap-typeahead: https://ericgio.github.io/react-bootstrap-typeahead/
• react-bootstrap-date-picker: https://pujstell.github.io/react-bootstrap-date-picker/
• @fortawesome/fontawesome-free: https://fontawesome.com
• react-i18next: https://react.i18next.com/
• react-router-dom: https://reacttraining.com/react-router/web/
• moment: https://momentjs.com/
• axios: https://github.com/axios/axios#readme
• express: https://expressjs.com/es/
• cors: https://github.com/expressjs/cors#readme
• body-parser: https://github.com/expressjs/body-parser#readme
• convict: https://github.com/mozilla/node-convict#readme
• express-session: https://github.com/expressjs/session#readme Se incluye solo si el comando se ejecuta con la opción -L|--without-login
• cookie-parser: https://github.com/expressjs/cookie-parser#readme Se incluye solo si el comando se ejecuta con la opción -L|--without-login
• nodemon: https://nodemon.io/ Se encuentra disponible solo para ambiente de desarrollo
• standard: https://standardjs.com/ Se encuentra disponible solo para ambiente de desarrollo

License

Create React App is open source software licensed as MIT.