Qué hay en un proyecto de React creado con Create React App
Tags: react, beginners, javascript, tutorial
Published: 2021-11-01 16:11:29

En mi anterior [articulo](https://dev.to/adriangube/como-crear-tu-primer-proyecto-de-react-113h) expliqué las diferentes formas que existen para crear un proyecto de React, siendo [Create React App]( https://reactjs.org/docs/create-a-new-react-app.html) 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](https://nodejs.org/en/) 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:

``` terminal
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:

![Archivos generados por Create React App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jywgfdtr6iloh78ora7w.png)
 
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. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tcb6xyzde2nvocwslwe.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkk3xabant3xkklyhdg0.png)

La mayoría de las aplicaciones profesionales se suben a algún repositorio de [git](https://git-scm.com/), como por ejemplo [Github](https://github.com/) o [Gitlab](https://about.gitlab.com/). 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**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnwnojaxr4wxc0kwxwce.png)

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é.