En mi anterior articulo expliqué las diferentes formas que existen para crear un proyecto de React, siendo Create React App la mejor opción casi para cualquier tipo de aplicación web.
En este articulo se creará un nuevo proyecto con Create React App y se explicará en profundidad, archivo por archivo, que es lo que genera por nosotros esta increíble herramienta.
En primer lugar, necesitamos tener instalado Node y npm en nuestra maquina y abrir un terminal de comandos. Si no tienes Node y npm instalados te recomiendo que sigas los pasos desde la web de Node y continúes cuando lo tengas correctamente instalado.
Para crear un proyecto de React con Create React App tan solo es necesario en la terminal navegar al directorio donde queremos crear nuestro proyecto y escribir uno a uno los siguientes comandos:
npx create-react-app my-app
cd my-app
npm start
El primer comando es el que crea todo el proyecto, deberías cambiar my-app por el nombre de tu proyecto. Este comando puede tardar unos cuantos minutos en terminar, esto es completamente normal ya que necesita crear todos los archivos y carpetas, así como instalar todas las dependencias iniciales para que el proyecto pueda funcionar correctamente.
El segundo comando sirve para acceder desde la terminal al directorio del proyecto que ha creado Create React App.
El ultimo comando sirve para arrancar el proyecto con un servidor local al que puedes acceder desde cualquier navegador, escribiendo en la ruta la dirección localhost:3000. Una vez tienes arrancado el proyecto con npm start, cualquier cambio que realices dentro del proyecto se verá reflejado en el navegador, prácticamente en tiempo real.
A continuación, para poder trabajar en el proyecto es necesario que utilices algún editor de código, o IDE, como por ejemplo Visual Studio Code, que es una herramienta Open Source, gratuita, de las más utilizada dentro del sector profesional. Si te interesa como configurar y personalizar Visual Studio Code, en futuros artículos explicaré como configurarlo y cuales son las mejores extensiones para desarrolladores React.
Para la ocasión, he creado un proyecto llamado article-cra y este es el resultado de lo que ha generado Create React App:
A continuación voy a explicar para que sirven cada uno de los archivos y carpetas que ha generado por nosotros Create React App.
Directorio node_modules
El primer directorio que vemos en el proyecto es la carpeta node_modules. Esta carpeta incluye todas las dependencias de nuestro proyecto, es decir, que se encuentran todas las librerías, utilidades, frameworks, etc que utiliza nuestro proyecto. Por ejemplo, la librería de React es una dependencia de nuestra app, y por lo tanto, el código fuente de React se encuentra dentro de la carpeta node_modules.
Directorio public
El siguiente directorio que se puede apreciar es el public. Dentro de este directorio se encuentran todos los archivos estáticos, es decir, que no necesitan ser compilados, ni forman parte del código fuente de nuestra aplicación.
En este directorio se encuentra el favicon.ico, que es el archivo de imagen que permite que aparezca el logo de React en la pestaña del navegador. Si cambiamos este icono por un icono diferente y refrescamos el navegador, deberíamos de ver el nuevo icono en el browser.
El index.html es el archivo de html principal de nuestro proyecto, y será el archivo que servirá nuestro servidor web cuando publiquemos en un servidor nuestra aplicación.
Como mención especial, en este archivo se encuentra el div que utiliza react para inyectar el código de toda la aplicación react. Esto lo explicaré mejor en post sucesivos.
Los archivos logo192.png y logo512.png son archivos de imagen que sirven por si queremos convertir nuestra aplicación en una Progressive Web App. Las aplicaciones PWA se pueden instalar en dispositivos Android, IOS, Windows y Mac OS, permitiendo utilizar la aplicación como si la tuviésemos instalada en nuestro dispositivo. La imagen que aparecería en nuestro listado de aplicaciones es uno de estos dos logos. Hay 2 imágenes porque dependiendo del tamaño y resolución de la pantalla del dispositivo utilizará una imagen u otra.
El siguiente archivo es el manifest.json, que es un archivo que aporta información al navegador sobre el nombre de la aplicación, los iconos que debe utilizar en función del tamaño de pantalla y también el color principal y secundario de la app, etc.
Por último tenemos el archivo robots.txt que sirve para que una vez que la aplicación está desplegada en un servidor, los buscadores como Google puedan indexar la aplicación para que aparezca en los resultados de la búsqueda. Sin este archivo nunca aparecería tu aplicación en Google a no ser que escribas toda su URL.
Archivos en la raíz del proyecto
A continuación voy a explicar los archivos que están en la raíz del proyecto.
La mayoría de las aplicaciones profesionales se suben a algún repositorio de git, como por ejemplo Github o Gitlab. Sin embargo hay archivos que no es aconsejable subir a los repositorios porque contienen tokens de seguridad, archivos o directorios autogenerados, como el node_modules o la carpeta build o dist donde se almacena el código del proyecto para producción etc. La forma de incluir excepciones sobre los archivos y carpetas que se van a subir al repositorio de git se realizan en el archivo .gitignore. Es este archivo se pueden incluir carpetas enteras, extensiones de archivos, etc. Todo lo que se incluya en este directorio será ignorado al realizar una subida al repositorio.
El archivo package.json es un archivo muy importante en todos los proyectos hechos en Javascript, ya que define el nombre del proyecto, el numero de versión, define las dependencias y dependencias de desarrollo, y también los scripts disponibles. Por ejemplo el script para arrancar el proyecto npm start, está definido en este archivo, así como también el script para hacer el build de producción.
El archivo package-lock.json sirve para guardar un registro de la ultima versión de todas las dependencias de tu proyecto, de forma que la próxima vez que instales dependencias en un proyecto se utilicen las mismas que anteriormente te funcionaron. Esto evita que la aplicación deje de funcionar porque una dependencia se ha actualizado y entra en conflicto en la nueva versión con alguna otra dependencia de tu proyecto. Si no existiese este archivo no tendríamos forma de instalar siempre las mismas versiones de nuestras dependencias en un proyecto y se producirían muchos conflictos entre dependencias.
Por último tenemos el archivo README.md que sirve para documentar tu proyecto, informar a posibles usuarios como arrancar el proyecto, hacer build de producción y en definitiva exponer cualquier información relevante sobre el proyecto. El archivo README.md es el archivo que se muestra por defecto cuando accedes a un repositorio de git, y también es el archivo que se muestra cuando se publica una librería a npm o cualquier gestor de paquetes de npm personalizado.
Directorio src
El directorio src es donde se encuentra el código fuente de la aplicación, y por tanto es directorio donde se pasa la mayor parte del tiempo programando.
Cuando se crea un proyecto con Create React App se genera un proyecto de muestra con unos archivos que en la mayoría de los casos se borrarán para empezar a construir el proyecto con los archivos y carpetas que necesites. Sin embargo para poder borrar todo su contenido es importante conocer que hace cada archivo para poder sustituirlo por el que te interese en cada caso.
A continuación voy a explicarte uno a uno para que sirven los archivos que hay dentro de la carpeta src.
El primer archivo es el App.css, dentro de este archivo se encuentran los estilos CSS del componente principal App.js . En un proyecto real, lo más recomendable es tener múltiples archivos CSS, posiblemente uno por cada componente.
El archivo App.js es uno de los archivos más importantes de la aplicación, puesto que es el primer componente que cargará React y por lo tanto es el componente que contiene toda tu aplicación de react. Esto implica que cuando vayas creando nuevos componentes en tus proyectos, todos acabaran dentro del componente App.js de una forma u otra.
En todas las aplicaciones profesionales se escriben (o deberían escribir ) test automáticos para validar que la aplicación está libre de errores (bugs) y estar seguro y confiado que no vas a subir código con errores en un entorno de producción. Por este motivo Create React App genera el archivo App.test.js, que es un archivo donde se genera un test de muestra para la aplicación. Al igual que con los archivos CSS, en un proyecto real, habrá más de un archivo de test, posiblemente uno por cada componente.
El archivo index.css recoge los estilos generales de la aplicación. En el App.css solo se encuentran los estilos del componente App.js, pero si se quisieran tener estilos compartidos a lo largo de toda la aplicación, una manera de compartirlos seria mediante el index.css, ya que los estilos que se incluyan aquí dentro se compartirán en toda la aplicación.
El archivo index.js es otro archivo de vital importancia, puesto que es el punto de entrada a la aplicación React, es decir que es el primer archivo que se va a cargar, y a partir de este, se cargarán el resto de los archivos de la carpeta src. Dentro del index.js se carga el componente App.js y se le dice a React en que elemento del html de la aplicación lo tiene que pintar. Este es por lo tanto un archivo que siempre tiene que estar en todas nuestras aplicaciones de react. En futuros artículos explicaré en más profundidad como funciona este archivo.
El archivo logo.svg se utiliza dentro del App.js para pintar el logo de react. Una vez modifiques o elimines el componente App.js puedes eliminar sin miedo este archivo porque no tiene ninguna otra función.
El archivo reportWebVitals.js se llama desde el index.js y sirve para medir el performance de la aplicación. No es imprescindible, pero es recomendable tenerlo.
Por ultimo el archivo setupTest.js sirve para importar la librería de testing por defecto de Javascript.
Como se ha visto en este articulo, Create React App genera muchos archivos y carpetas por nosotros, y nos da un proyecto listo para que podamos empezar a construir nuestra propia aplicación de React. En el próximo articulo explicaré como a partir de un proyecto hecho con Create React App podemos empezar a construir nuestro proyecto de React.
¿Os ha quedado alguna duda respecto a algún archivo? ¿Tenéis alguna duda o sugerencia?
Si es así dejadme un comentario abajo y lo responderé.
Top comments (0)