NPM para empezar un con ReactJS
Tags: npm, react, beginners, webdev
Published: 2023-07-16 16:03:11

### 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`


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

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`


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

Ahora ya podemos pasar a la instalación

### Instalación de paquetes

Para ello utilizamos el sgte. comando: 

`npm install` o `npm i`


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

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:

```jsx
//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:


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

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

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

```json
{
  "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>`


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

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


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

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


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

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