Este post va a ser tanto rápido como sencillo. No hay gran cosa que explicar pero precisamente por ser sencillo creo que puede estar bien incluirlo en esta especie de guía de inicio para React que estoy haciendo. Aquí intentaré explicar primero cómo utilizar Create React App – en adelante CRA – qué es y qué diferencias tiene respecto a un proyecto «normal» con React.
Requisitos previos
Para empezar necesitamos tener algunas cosas instaladas, no sólo para poder iniciar el proyecto; también para continuar su desarrollo y poder ejecutarlo. Son varias cosas, Node.js (entorno de ejecución para JavaScript), npm (un gestor de paquetes para node) y npx (parecido a npm, pero que los ejecuta en lugar de gestionarlos). La buena noticia es que todo lo que se necesita está incluido en el mismo instalador. Para tener esas herramientas sólo hay que ir a la web de Node, descargarlo e instalarlo. En principio no hay que preocuparse ni de la versión ni de nada, cualquiera que esté disponible para descargar es válida.
Crear el proyecto
Son sólo dos comandos desde tu terminal. Para empezar ves al directorio en el que quieras crear tu proyecto, por ejemplo:
cd ~/Sites
Este sería el primer comando:
npx create-react-app nombre-de-tu-app
Eso creará la carpeta nombre-de-tu-app y unos ficheros con una base muy pequeña para poder empezar a construir desde ahí, además de descargar todas las dependencias. Es tan sencillo que parece magia.
Y para terminar, sólo tienes que entrar en esa carpeta y ejecutar un comando para ver tu proyecto en el navegador:
cd nombre-de-tu-app
npm run start
Pero bueno ¿esto es React?
Claro que sí. Lo que pasa es que no es sólo React. En realidad lo que entendemos por React se compone de muchas otras librerías. Usando CRA (que es una herramienta oficial) se simplifica esta cuestión. De hecho se simplifica muchísimo. Veamos las diferencias.
Cuando iniciamos un proyecto con CRA nos incluye las tres dependencias esenciales: react, react-dom y react-scripts. Además incluye otras tres para testing y una para Core Web Vitals. 7 dependencias son muy pocas.
Si por algún extraño motivo queremos salir de este marco que nos plantea el equipo de React y queremos ir por nuestra cuenta, nos proveen del comando npm run eject, que sirve para gestionar las dependencias directamente en lugar de encapsularlas todas ellas dentro de react-scripts.
¿Y cómo quedarían si «ejectamos»? Pues ni lo enseño porque es demasiado largo y tampoco aportaría nada interesante; sólo diré que pasa de tener 7 dependencias a 63, es decir, un 900% más. ¿Esto significa que el proyecto será más pesado? Para nada, estas dependencias ya las teníamos, pero empaquetadas dentro de una única. ¿Y cuál es la ventaja? Pues fundamentalmente que no vas a perder días actualizando dependencias y evitando conflictos entre ellas, con Create React App tienes todo lo necesario para desarrollar prácticamente cualquier tipo de proyecto.
Por dónde empezar
Tengo dos consejos: el primero es que no vayas a empezar con algún proyecto ni medio serio y mucho menos de un cliente. Te vas a frustrar y por el camino dejarás un código muy pobre. Hazlo fácil y no tengas prisa, empieza simplemente mirando qué archivos incluye, que son pocos. Intenta entender qué hace cada uno y tócalos. Tócalo todo, mira qué cambias, qué rompes, y cómo se comportan.
Y el segundo es para cuando te frustres. Lo que tienes entre manos es el resultado del esfuerzo que muchísima gente ha hecho de forma voluntaria y desinteresada para que todos tengamos una herramienta de estas características. Cuando sientas que no funciona o que no vale para nada, puede que valorar el esfuerzo de los demás te haga verlo de una forma más positiva.
Espero que tener todo este «poder» a tu alcance te resulte motivador.
Photo by Jukan Tateisi on Unsplash.