Repasemos cada una de ellas y entendamos el propósito de cada uno de los archivos/carpetas generados.
La construcción representa el camino hacia nuestra producción final. Esta carpeta se crearía después de ejecutar la construcción de npm.
Podemos ver todas las «dependencias» y «desdependencias» requeridas por nuestra aplicación React en node_modules. Estas son las especificadas o vistas en nuestro archivo package.json. Si sólo ejecutamos el comando ls -l, veremos casi 800 subdirectorios. Este directorio se añade al .gitignore por lo que no se sube/publica como tal.También, una vez que minimizamos o comprimimos nuestro código para la producción, nuestra aplicación de muestra debería tener un tamaño inferior a 100 KB.
Nuestros archivos estáticos se encuentran en el directorio público. Los archivos en este directorio conservarán el mismo nombre cuando se desplieguen en producción. Por lo tanto, pueden ser almacenados en el lado del cliente y mejorar los tiempos de descarga en general.
Todos los componentes dinámicos estarán localizados en el SRC. Para asegurar que, en el lado del cliente, sólo se descargue la versión más reciente y no la copia en caché, Webpack generalmente tendrá los archivos actualizados un nombre de archivo único en la compilación final. Por lo tanto, podemos usar nombres de archivo simples, por ejemplo header.png, en lugar de usar header-2019-01-01.png. Webpack se encargaría de renombrar header.png a header.dynamic-hash.png. Este hash único se actualizaría sólo cuando nuestro header.png cambiara. También podemos ver archivos como App.js que es una especie de nuestro principal componente JS y los estilos correspondientes van en App.css. En caso de que queramos añadir alguna prueba unitaria, podemos usar el App.test.js para ello. Además, index.js es el punto de entrada de nuestra aplicación y activa el registerServiceWorker.js. Como nota al margen, solemos añadir aquí un directorio de «componentes» para añadir nuevos componentes y sus archivos asociados, ya que eso mejora la organización de nuestra estructura.
La configuración general del proyecto React se describe en el paquete.json. A continuación se muestra lo que parece:
123456789101112131415161718{"nombre": "mi-muestra-app", "versión": "0.0.1", "privado":true, "dependencias":{"reaccionar":"^16.5.2", "react-dom":"^16.5.2",}, "devDependencias":{"reaccionar-scripts": "1". 0.7"}, "scripts":{"start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject"}}json
Podemos ver los siguientes atributos:
- nombre – Representa el nombre de la aplicación que se pasó a create-react-app.
- versión – Muestra la versión actual.
- dependencias – Lista de todos los módulos/versiones necesarios para nuestra aplicación. Por defecto, npm instalaría la versión principal más reciente.
- devDependencias – Lista de todos los módulos/versiones para ejecutar la aplicación en un entorno de desarrollo.
- scripts – Lista de todos los alias que pueden ser usados para acceder a los comandos de reaccionar-scripts de una manera eficiente. Por ejemplo, si ejecutamos npm build en la línea de comandos, ejecutaría «react-scripts build» internamente.
Las dependencias que son compartidas por nuestra aplicación pueden ir al directorio de activos. Estas pueden incluir mixins, imágenes, etc. Así, representarían una única ubicación para los archivos externos a nuestro proyecto principal.
También necesitamos tener una carpeta de utilidades. Esta contendría una lista de funciones de ayuda utilizadas globalmente en toda la aplicación. Podemos añadir la lógica común a esta carpeta de utilidades e importarla donde queramos usarla. Aunque la nomenclatura puede variar ligeramente, las convenciones de nomenclatura estándar que se ven incluyen helpers, utils, utilidades, etc.
Con eso, nuestra estructura ahora se vería algo así como abajo:
1234567891011121314151617181920212223mi-muestra-app├── build├── nodo__copia3── public│ ├── favicon.ico│ ├── index.html│ └── manifiesto.json├── src│ ├── assets│ │ └──images│ │ └── logo. svg│ ├── components│ │ └── app│ │ ├── App.css│ │ ├── App.js│ │ └── App.test.js│ ├── utilities│ ├── Index.css│ ├── Index.js│ └── trabajador de servicio.js├── .gitignore├─── paquete.json└─── README.md
manifest.jsonEste archivo se utiliza para describir nuestra aplicación, por ejemplo, en los teléfonos móviles, si se añade un atajo a la pantalla de inicio.
123456789101112131415{"short_name": "My Sample React App", "name": "My Create React App Sample", "icons":[{"src": "favicon. ico", "tamaños": "64x64 32x32 24x24 16x16", "tipo": "image/x-icon"}], "start_url":".", "display": "standalone", "theme_color": "#efefef", "background_color": "#000000"}json
Cuando nuestra aplicación web se añade a la pantalla de inicio del usuario, son estos metadatos los que determinan el icono, los colores del tema, los nombres, etc.
favicon.ico Este es el archivo de imagen de icono usado por nuestro proyecto. También está enlazado dentro de index.html y manifest.json.