Una vez en el artículo anterior Creando nuestra primera App Web con create-react-app (ReactJS), hemos creado nuestra primera aplicación web mediante a la instrucción create-react-app. En este artículo vamos a familiarizarnos con la estructura inicial de un proyecto.

Desmenuzando el proyecto creado con la instrucción create-react-app

Si analizamos el proyecto inicial de ReactJS contiene:

Vamos a analizar las diferentes partes del proyecto y vamos a explicar que tiene cada una de ellas/que utilidad tienen.

File .gitignore:

En la mayoría de proyectos tenemos archivos o directorios que no queremos que se añadan al repositorio de Git/GitLab/BitBucket. Para ello se crea este fichero. Algunos motivos para que esto sea así son: el no subir todas las dependencias evitando así que se vuelva un proyecto pesados, que sean archivos confidenciales que queremos ocultar como contraseñas para otorgar cierta seguridad de que nadie pueda acceder sin permiso, etc.

File package.json:

El fichero package.json nos sirve para almacenar varios metadatos sobre aspectos importantes para nuestro el proyecto. Además nos permite almacenar una lista de paquetes de dependencias.

Su contenido a destacar es:

  • Name: Contiene el nombre del proyecto que anteriormente le hemos especificado nosotros mediante a la instrucción create-react-app. El nombre, tiene que ser en minúsculas, se recomienda que sin acentos, no puede empezar por punto o barra bajas y también se nos permite usar las barras bajas y los guiones.
  • Version: define la versión actual del proyecto. Debe tener el formato x.x.x . Al crear una aplicación, por defecto se inicializa bajo la versión 0.1.0
  • Private: Este parámetro nos permite seleccionar si el repositorio se publicará o no dentro del ecosistema de npm. Si está a true, npm se negará a publicarlo. Si está a false, npm lo publicará. Por tanto, este metadato es un mecanismo para proteger los repositorios privados de una publicación accidental.
  • Dependencies: contiene los nombres y las versiones de las dependencias necesarias para poder llevar a cabo el proyecto. Estás dependencias no se descargan desde los links que os he adjuntado en cada una de ellas. Sino que se instalan y se guardan en el directorio node_modules. Veremos la instalación de dependencias en próximas lecciones. En la creación inicial del proyecto con create-react-app se definen 3 dependencias:
    • React: contiene la funcionalidad necesaria para definir los componentes de React. Por tanto es el núcleo, es la biblioteca que nos permite dibujar las interfaces.
    • React-dom: la librería anterior de React, trabaja conjuntamente con esta. Están separadas debido a que este proyecto está configurado para trabajar con ReactJS. Si queremos trabajar con otro React como puede ser ReactNative, deberíamos de cambiar está librería por la de ReactNative. Por eso mismo está separado en dos partes. La parte común para todos los Reacts y la parte específica para cada React. En este caso, react-dom, nos sirve para «atacar» al DOM. Con atacar nos referimos a acceder y modificar el DOM.
    • React-scripts: nos proporciona un conjunto de scripts que nos serán útiles a la hora de trabajar con React. Además se complementa con otras tecnologías como Web Pack, Babel, etc. Que necesitan configurarse pero que ya nos vienen automáticamente configuradas por defecto. Esta dependencia nos proporciona un conjunto de scripts además de la configuración necesaria que nos servirán para realizar la creación de nuestra aplicación con Create React.
    • Si no podemos nada delante de la versión, por ejemplo 11.5.4 instalamos la versión que le detallamos sin más. Pero además de existir esta posibilidad, tenemos lo que conocemos como parámetros opcionales. Algunos de ellos son:
      • La dependencia empieza con un ^ justo delante de la versión: se buscará una versión compatible con la que está definida ahí. Por ejemplo ^11.5.4 significa que npm instalará la versión más reciente dentro de ^11.x.x como puede ser 11.5.7 que pertenece a la misma versión.
      • La dependencia empieza con un ~ justo delante de la versión: buscará una versión aproximadamente equivalente a la versión.
      • La dependencia empieza con un < justo delante de la versión: debe ser mayor que la versión.
      • La dependencia empieza con un > justo delante de la versión: debe ser mayor que la versión.
      • Lastest: instalará la última versión. Es un comando bastante peligroso y que puede afectar a la estabilidad de nuestro proyecto.
  • Scripts: nos especifica que comandos podemos ejecutar dentro de nuestro proyectos. Se ejecutan mediante a la instrucción npm seguida de la instrucción que tenemos definida un ejemplo sería el ya conocido por nosotros npm start. Dentro de estos comandos existen dos grupos:
    • Scripts predefinidos: son comandos que ya vienen al crear el proyecto. Dentro de los predefinidos tenemos:
      • Start: Nos permite iniciar/arrancar el servidor de desarrollo en local.
      • Build: Representa el camino hacia la generación de nuestra producción final. Mediante a este comando realizamos la compilación (build) del proyecto de nuestra aplicación para poder subirlo a producción.
      • Test: Nos permite realizar pruebas que tendrán diferentes coberturas.
      • Eject: Copiará todos los archivos de configuración y las dependencias transitivas (Webpack, Babel, ESLint, etc.) directamente en su proyecto para que tengamos control total sobre ellos.
    • Scripts personalizados: Además de los que tenemos ya preestablecidos, podemos añadir nosotros nuestros propios comandos.
    • EslintConfig: ESLint es un mecanismo para controlar/validar el estilo de código para JavaScript. En este caso, usaremos las reglas de react-app.
    • Browserslist: lista para que el código sepa a qué navegadores vamos a dar soporte. Es necesario, debido a que cuando trabajamos con React vamos a utilizar las últimas características de JavaScript y podemos detallar a que navegadores le daremos soporte.

File package-lock.json:

Es un archivo que internamente se auto genera al realizar cualquier modificación en node_modules o en el package.json. Dentro de este archivo se describe un árbol con las dependencias.

File readme.md

El fichero readme.md es un fichero en lenguaje Markdown (un lenguaje de marcado similar a HTML aunque más sencillo). Este fichero, es donde se suele definir la documentación del proyecto. Esta documentación tiene la finalidad de declarar infinidad de detalles. Algunos de estos detalles, podrían ser:

  • Requisitos que debemos cumplir para poder utilizarlo
  • Si tenemos que declarar variables de entorno.
  • Si necesitamos instalar software como podrían ser: NodeJS o alguna versión de Java, algún sistema operativo en particular, etc.
  • Comandos para inicializar/arrancar el proyecto en local.

Es decir, contiene todo lo que creamos que es relevante conocer o que queramos compartir sobre el proyecto. Si le damos al icono con forma de libro abierto, podemos ver como se verá realmente el fichero. El readme.md, además, es el fichero que una vez subimos el proyecto al repositorio de GitHub por ejemplo, se visualiza por defecto al abrir inicial el enlace del repositorio. Sería similar al LEEME.txt que se encontraba antiguamente en los juegos. El primer fichero a leer donde se detallan los pasos a seguir.

Carpeta node_modules

Almacena los paquetes de las dependencias que hemos definido en el archivo package.json. También hay que destacar que este directorio se encuentra definido dentro de .gitignore para que no se suba todo el sin fin de dependencias al repositorio de Git. Por tanto, la persona que descargue el proyecto instalará las dependencias directamente de la web ya conocida por nosotros de https://www.npmjs.com/

Carpeta public:

Contiene los archivos (estáticos, los que no cambian) que nos va a permitir montar la aplicación. Si nos fijamos en el interior de esta carpeta, tenemos el archivo index.html que es un HTML de toda la vida. Y un conjunto de ficheros que van relacionados con index.html.

Si abrimos el index.html, podemos ver que es una estructura tradicional de un HTML. Pero que es bastante simplón, si analizamos su estructura podemos ver que:

  • De la línea 3 a la 28 encontramos el header. Dentro del header tenemos:
    • En la línea 12 la definición del icono de React.
    • En la línea 17 la definición del manifest.json.
    • En la línea 27 el título de la Web.
  • De la línea 29 a las 42 encontramos el body. Y es donde encontramos lo interesante para poder empezar a conocer cómo funciona ReactJS. Si nos fijamos en la estructura del body podemos ver que solamente tenemos dos etiquetas. Una de noscript con el mensaje «You need to enable JavaScript to run this app.» y un div con el tag root. Si no tenemos nada más en el HTML ¿Cómo es que cuando arrancamos la aplicación (npm start desde el terminal) vemos lo siguiente?

De hecho si nos metemos en el inspector desde nuestra aplicación arrancada podemos ver ahora dentro de nuestro div con el tag root tenemos varios elementos.

¿Qué está pasando? Pues que todo esto no está generado en HTML sino que es generado por JavaScript y por tanto, vamos a tener que utilizar JavaScript para generarlo para posteriormente inyectarlo dentro del div mediante a su id root. Por ello, tenemos en el documento html el tag de noscript con el mensaje «You need to enable JavaScript to run this app.» ya que si desactivamos JavaScript de nuestro navegador no podremos cargar la aplicación y solo se nos cargaría el html del documento.

En este caso en particular, al utilizar el comando create-react-app el div tiene el id root aunque podemos darle el nombre que deseemos sin problema alguno. Eso sí, es importante tener detectado el nombre ya que le atacaremos desde algún fichero del directorio src (lo vemos más abajo).

Una vez desactivado ya podemos ver lo que pasa cuando falla la aplicación. Y que muestra el mensaje de la etiqueta noscript avisándole de que necesita tener JavaScript para ejecutar esta aplicación.

Una vez visto el funcionamiento es importante el volver a activar JavaScript para tener un funcionamiento correcto de todas las páginas web.

Si nos fijamos todo el código de nuestra aplicación todo el código que se ha añadido recae sobre el div root. Y vemos que tenemos nuestro div con la clase App, un header, un párrafo y un enlace.

Lo que hacemos es seleccionar este DIV y alterarlo con JavaScript mediante a React. Es decir, tenemos una estructura básica de HTML y sobre esa estructura añadimos componentes mediante a JavaScript utilizando React.

Pero ¿Si aquí no está la aplicación dónde está? para ello tendremos que ir al directorio SRC.

Carpeta src (source)

La carpeta src, es la carpeta sobre la que se encuentra nuestro código de React, y por tanto, la carpeta donde trabajaremos.

Index.js

Si abrimos el fichero index.js. Vamos a analizar el contenido del fichero:

  • Línea 1: importa el módulo de React que como ya vimos lo tenemos dentro de las dependencias del fichero package.json y nos permitirá crear interfaces.
  • Línea 2: importa el módulo de React-dom que como ya vimos lo tenemos dentro de las dependencias del fichero package.json y nos permitirá crear interfaces para el navegador/web.
  • Línea 3: importamos un CSS debido a que React utiliza Web Pack para importa archivos CSS dentro de JS. También podemos importar otros archivos como fuentes, imágenes, logos, etc. El archivo index.css encuentra dentro del directorio src también.
  • Línea 5: serviceWorker que está relacionado con el concepto de ProgresiveWebApp un concepto que nos permite enviar notificaciones, ejecutar procesos en segundo plano, etc. Otorgándole un comportamiento muy similar al de las aplicaciones de escritorio/móvil.
  • Línea 7: es la que hace el uso de React y la que le añade el código que falta al documento HTML (la imagen, el párrafo y el enlace). Lo que realmente hace ReactDOM.render(que quiero pintar, donde lo quiero pintar) es añadir un componente dentro del elemento del elemento con id «root» del index.html mediante a la instrucción de JavaScript document.getElementById(«root»).
  • Línea 4: tenemos el import a App que está llamando al fichero App.js del directorio src.

Analizando App.js

Si analizamos el fichero App podemos ver que primeramente realizamos el import de React debido a que es el encargado de dibujar las interfaces.

Si por ejemplo comentamos el import del logo con //

Podemos ver como Web Pack tras cada modificación automáticamente nos intenta compilar el proyecto para posteriormente tratar de arrancarlo sin tener ni que recargar el navegador, pero debido a que la compilación falla nos aparece un error indicándonos que en la línea 9 se está llamando a logo que no está definido.

Y si nos metemos en la web nos aparece lo mismo fallo al compilar:

Si descomentamos el import del logo, podemos ver como Web Pack nos recompila el proyecto automáticamente. Ya podemos ver cómo funciona correctamente y automáticamente se nos carga la página sin ni siquiera recargar el navegador.

Otra opción sería eliminar la llamada al logo.

En este caso nos muestra que tenemos imports declarados que no estamos usando:

Si comentamos el import también, aunque tiene una manera un poco particular en React (os pongo un ejemplo) vemos como desaparece la advertencia:

Y podemos ver que la imagen ha desaparecido:

Si seguimos analizando el proyecto, vemos que tiene un archivo CSS, que afectará al documento.

Por ejemplo vamos a cambiar el color del background de App-header:

Si nos fijamos en esta parte de App.js podemos ver que tenemos un componente en JSX. Veremos que es JSX en otro artículo más detalladamente, pero pero el momento podríamos hacer una introducción diciendo que es un código que se asemeja mucho a un HTML este código se a añadido mediante a la introducción ReactDOM.render del fichero index.js al documento index.html.

Bueno, esto es todo por esta lección. Espero que ahora entendáis un poco más sobre la estructura de un proyecto en ReactJS ¡Un saludo Reacter@s!