NPM para empezar un con ReactJS

Introducción

Hola 👋, en esta oportunidad quiero compartir con ustedes los comandos de NPM que aprendí y que te pueden ser de ayuda para empezar a trabajar con React, así que sin mas explicación prepárate un café, abre tu consola y empecemos.

Qué es NPM?

NPM es la abreviación de node package manager o sea un sistema/herramienta para manejar los paquetes de Node. Esta herramienta nos sirve para descargar, manejar y compartir paquetes de una forma más automática y rápida. Por ello existe algunos comando que debemos conocer para utilizar NPM de la mejor manera.

Dicho esto para poder utilizar NPM se debe descargar Node.

Ver que versión de NPM tenemos instalada

Para ello utilizamos el comando npm -v

A la hora de escribir esto tengo la versión 9.8.0, si a ti no te funciona vuelves a instalar NodeJS fíjate bien los pasos o si no tienes NodeJS lo instalas

Iniciar un proyecto con NPM

Primero iniciamos NPM para que nos cree el package.json que contendrá la info. del proyecto.

Utilizamos el comando npm init -y

Ahora ya podemos pasar a la instalación

Instalación de paquetes

Para ello utilizamos el sgte. comando:

npm install o npm i

Instale un paquete que se llama colors, ahora lo voy a usar:

Creo un archivo que se llama index.js y pongo en sgte. código:

//index.js
const color = require('colors');
//Si se tiene node se puede utilizar require() como modo de exportación
//En otro articulo hablaré sobre los tipos de importación y como se puede
//cambiar par que node los entienda.

console.log(color.green("Hola perri"));

Ejecuto ese archivo con node:

Funciono!!!, si seguiste estos paso instalaste tu primer paquete y lo utilizaste, bien por ti 👍.

Distintos tipos de instalaciones

Lo anterior funciona correctamente pero hay algunos detalles que debemos cubrir. El proceso anterior instaló el paquete pero para producción(modo producción): y aquí surgen los distintos tipos de instalación:

• Instalación global: npm install -g o --global <namePackage>
• Instalación en modo desarrollo: npm install -D o --save-dev <namePackage>
• Instalación en modo de producción: npm install o --save-prod <namePackage>

La instalación global te permite tener esa dependencia disponible el cualquier parte del sistema.

La instalación en modo de desarrollo solo te permite usar esa dependencia dentro del proyecto y de manera local solo funciona en tu maquina.

Y el modo de producción es igual que la anterior pero esta disponible para que sea usada cuando tu aplicación web este funcionando en un servidor o en otras máquinas externa a la tuya

Estos últimos 2 se acomodan en distintas secciones del package.json

El archivo package.json

Este archivo guarda información sobre el proyecto como el nombre, la ruta de entrada, repositorio, etc. pero en los que me quiero centrar son en el apartado de dependencies, devDependencies y scripts

• depndencies: Aquí se guardan los paquetes que están en modo de producción
• devDependencies: Aquí se almacenan los paquetes que están en modo de desarrollo
• scripts: Aquí se atajos de comandos

Este es un ejemplo de package.json:

{
  "name": "colores",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "colors": "^1.4.0"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

Esto sirve por ej. cuando subes tu proyecto a remoto cuando alguien descargue tu proyecto, como las dependencias no se instalan por defecto tendrá que hacer un npm install y NPM buscará en este archivo para ver cuales son las dependencias que necesita para funcionar.

Los scripts

Los scripts son como un apodo para llamar a una secuencia de comandos, para no tener que recordar todo el comando entero y acelerar el proceso. Estos comando se pueden modificar y crear, pero alguno de los más comunes son:

• start:Tareas de inicio del proyecto
• build:Crea el fichero para poner al proyecto en producción
• dev: Inicia el proyecto en modo de desarrolo
• test: Para realizar tareas de tesing del proyecto
• deploy: Despliega la web web producción

Este sería el ejemplo de unos scripts en Next.JS:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Para correr estos scripts lo hacemos de la sgte. manera: npm run <script>.

Pero hay algunos script que no necesitan que usemos run, por ej. test y start simplemente podemos hacer npm <script>

Iniciar un proyecto de React

No hace mucho tiempo la forma más popular de iniciar un proyecto con React era de la sgte manera: npm/npx create-react-app <nameProyect> donde te creaba una carpeta con el “nameProyect” y adentro todo lo necesario para crear un proyecto con React

Pero hoy en día hasta el propio React no te recomienda usar esto y por ello ahora lo recomendable es usar un framework de Reac como Next.JS o de última un automatizador como vite

• Para iniciar con Next.JS podemos hacer los sgte: npm/npx create-next-app@latest
• Para iniciar con vite: npm create vit@latest <nameProyect> y adicionalmente le podemos poner la flag -- --template <nameTemplate> para saltearnos la ronda de preguntas.

Para más info. visita los sgtes. enlaces:

• Video de midudev que hable sobre la muerte de create-react-app: https://www.youtube.com/watch?v=h1WLN9Gzbwc
• Documentación de vite para iniciar proyectos: https://vitejs.dev/guide/
• Documentación de React de como iniciar proyectos con framework propios: https://react.dev/learn/start-a-new-react-project

Como adicional vamos a desplegar un proyecto de React usando Vite

Desplegar proyecto con Vite

Primero entramos a la consola y nos movemos a la carpeta donde queremos crear el proyecto. una vez posicionados en la ruta desead ejecutamos el comando npm cretae vite@latest <nameProyect>

Primero nos preguntará por el framework que queremos utilizar, en este caso React, y después nos preguntará el leguaje en el que los queremos hacer puede elegir entre JavaScript y TypeScript, adicionalmente puede escoger la opción de que utilices el compilador SWC.

Luego nos da unas indicaciones para poner en marcha el proyecto:

1. Primero nos movemos a la carpeta del proyecto con el nombre que elegiste nameProyect
2. Después haces un npm install, ya que por defecto Vite no instala las dependencias que necesita de manera automática
3. Y por último ponemos el proyecto en modo desarrollo, lo que pondrá a nuestra aplicación a funcionar en un servidor remoto

Y si abrimos el navegador y accedemos a localhost a taves del puerto 5173deberimos ver nuestro proyecto que se actualiza automaticamenta según los cambios que se vayan efectuando.

Bueno eso sería todo por hoy, espero te sirva, ya sabes cualquier error, recomedación o duda ponlo en los comentarios para que sigamos hacia un mejor desarrollo. Bye 👋.