Una de las primeras dudas que surgen cuando empezamos a trabajar con una librería o framework para el frontend es sin duda cómo empezar un proyecto nuevo.
Lo primero que debemos tener en cuenta es que para poder trabajar con React o cualquier otro framework como Angular, Vue, Svelte, etc primero necesitaremos tener nuestro equipo configurado con Node y npm. Una vez tenemos el entorno listo, ahora sí, ya estamos listos para empezar.
Para crear un nuevo proyecto de React, tenemos 3 alternativas:
1 - Crear un proyecto desde 0.
2 – Utilizar un proyecto existente como plantilla.
3- Utilizar alguna herramienta que genere el proyecto por ti.
1 Crear un proyecto desde 0
La primera opción es quizá la más básica y costosa, ya que si creas un proyecto manualmente desde cero, deberás crear todos los directorios y archivos que necesites, pero también deberás configurar las diferentes herramientas necesarias para compilar el código, realizar test, hacer linting del código y generar el código para producción entre otras cosas.
No te preocupes si alguno de los términos que he utilizado más arriba no te suenan, tengo pensado explicar todos estos conceptos en post sucesivos.
En resumen, crear un proyecto desde cero, te permite personalizar mejor que incluyes y que no incluyes en el proyecto, pero requiere mucho trabajo y conocimientos previos. Yo recomendaría esta primera opción para gente con experiencia y/o que quiera aprender a configurar desde cero un proyecto.
2 Utilizar un proyecto existente como plantilla
La segunda opción es quizá una solución más sencilla que la anterior, ya que en Github existen repositorios de plantillas que explican paso a paso como utilizar la plantilla. Lo más habitual suele ser que debas clonar el repositorio, para lo cual solo necesitas tener una cuenta gratuita de Github. Una vez clonado el repositorio deberás seguir los pasos que aparezcan en el Readme y en apenas 5 minutos ya tendrás un proyecto de React arrancado y funcionando.
Una de las plantillas más utilizadas con este propósito es React-boilerplate ,ya que es una plantilla de React para aplicaciones de uso general. Si buscas una plantilla más especifica existen otros templates de proyectos React para casi cualquier tipo de aplicación.
En conclusión, es una opción mucho más sencilla de crear un proyecto React, ya que en apenas 5 minutos se tiene un proyecto perfectamente configurado y funcionando sobre el que empezar a trabajar, aunque no tienes tanto control sobre el tipo de librerías y herramientas incorpora la plantilla.
3 Utilizar alguna herramienta que genere el proyecto por ti
Las dos opciones mencionadas están muy bien, pero ¿no seria mejor si pudieses utilizar alguna herramienta a la que le digas algo del estilo “genérame un proyecto React, perfectamente configurado, y que tenga X e Y configuraciones” y automáticamente haga todo el trabajo por ti?
Pues exactamente eso es Create React App , es un cliente (CLI a partir de ahora), que te permite crear un proyecto de React customizado, pudiendo elegir entre diferentes opciones de configuración para que elijas la que se adapte mejor al proyecto que deseas empezar. Esta opción es sin duda la favorita de la mayor parte de la comunidad, porque genera de forma sencilla el proyecto, y tiene detrás una gran comunidad que actualiza el CLI constantemente por lo que siempre que quieras crear un proyecto nuevo de React, estará actualizado a la ultima versión de la librería.
¿Y como se utiliza Create React App? Pues es muy sencillo, tan solo necesitas tener Node y npm instalados en tu maquina, abrir una terminal y lanzar los siguientes comandos, uno a uno, en el directorio donde quieres crear el proyecto:
npx create-react-app my-app
cd my-app
npm start
El primer comando crea el proyecto de React con el nombre “my-app” (deberías cambiar el “my-app” por el nombre de tu proyecto), el segundo comando sirve para cambiar del directorio actual al directorio del proyecto, y por ultimo, el tercer comando arranca el proyecto de React para que puedas empezar a trabajar con él y ver los resultados en tu navegador.
Hay que tener en cuenta que los 3 comandos anteriores están pensados para dispositivos MAC OS o Linux, para Windows el segundo comando cambia un poco:
npx create-react-app my-app
dir my-app
npm start
En conclusión, Create React App es sin duda la mejor herramienta para crear tu primer proyecto de React por la simplicidad que tiene y por la posibilidad de customizar la configuración de tu proyecto.
En próximos artículos explicaré en profundidad la estructura de archivos y carpetas que genera Create React App, y como empezar a desarrollar a partir de ellas.
Por último preguntar ¿que utilizáis para crear nuevos proyectos de React? ¿Utilizáis alguna herramienta que no haya mencionado? Dejadme vuestras opiniones en los comentarios.
Top comments (0)