DEV Community: Máximo Nahim

NPM para empezar un con ReactJS

Máximo Nahim — Sun, 16 Jul 2023 16:03:11 +0000

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:

Primero nos movemos a la carpeta del proyecto con el nombre que elegiste nameProyect
Después haces un npm install, ya que por defecto Vite no instala las dependencias que necesita de manera automática
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 👋.

Diseñar un tooltip con HTML y CSS

Máximo Nahim — Sat, 01 Jul 2023 13:56:22 +0000

Introducción

Hola de nuevo 👋, en este post te quiero enseñar a diseñar un elemento muy común que puedes agregar a tu página web, solo con HTML y CSS, el “TOOLTIP” este elemento es un pequeño globo flotante que tiene una descripción acerca de un elemento al que por lo general se le hace un hover. Una vez entendido esto prepárate una taza de café, abre tu edito y empecemos.

HTML

Bien empecemos con el HTML:

<p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
        <span class="tooltip-container">
            <span class="tooltip-description">Add a brief description for the word.</span>
            <span class="tooltip-element">Culpa</span>
        </span>
    aliquam maxime cum dolorum facere adipisci aspernatur, laudantium ratione rem repellat? Nisi quis temporibus quisquam velit assumenda sapiente sequi quasi aspernatur.
</p>

Creamos un párrafo y dentro de este encerramos una palabra o palabras dentro de un span que tiene la clase tooltip-container luego dentro de este agregamos una descripción con un span con la clase tooltip-description y por último la palabra o elemento que al hacerle hover aparecerá el tooltip, es el span con la clase tooltip-element.

CSS

Por el momento es una página HTML cruda, sin estilo ni agregados. Ahora le pasemos a dar estilo. Acuérdense de enlazar el el HTML con el CSS.

/*Estilos generales*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

* {
    font-family: 'Josefin Sans', sans-serif;
}

body {
    background-color: #fefefe;
}

p {
    padding: 15px 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px #111;
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
}

Primero le agregue estilos generales y la página se debería estar viendo así:

Ahora si los estilos para el tooltip:

/*Estilos del tooltip*/

.tooltip-container {
    position: relative;
    display: inline;
    z-index: 300;
}

.tooltip-description {
    width: 160px; /*Puedes cambiarlo a gusto*/
    padding: 10px;
    border-radius: 10px;
    text-align: left;

    background-color: #ff6961;
    color: #fff;
    box-shadow: 0 0 17px #111;

    /*Lo posicionamos en el centro del elemento y lo ponemos por encima*/
    position: absolute;
    bottom: 160%;
    left: 50%;
    transform: translate(-50%, 0%);

    transition: all 500ms ease-in;
}

Por el momento te debería estar quedando así:

Pequeño detalle que marca la diferencia

Ahora vamos a agregar un pequeño detalle que marcara la diferencia, bueno no tanto, pero queda muy bien

/*El pequeño detalle*/
.tooltip-description::before {
    content: "";
    width: 15px;
    height: 15px;
    background-color: #ff6961;

    position: absolute;
    bottom: -7.5px;
    left: 50%;
    transform: translate(-50%, 0%) rotate(45deg);
}

El tooltip-description te debería quedar algo así:

Recta final

Por último vamos a dar estilos al tooltip-element y agregamos los efectos de hover

/*Recta final*/
.tooltip-element {
    color: #c63637;
    font-weight: 800;
}

/*Efectos hover*/
.tooltip-container:hover .tooltip-description {
    visibility: visible;
    opacity: 1;
}

.tooltip-container:hover .tooltip-element {
    text-decoration: underline;
}

/*Y al elemento .tooltip-description le agregue
 un opacity: 0; y un visibility: hidden;*/
.tooltip-description {
    visibility: hidden; /*Agregado*/
    opacity: 0; /*Agregado*/

    width: 160px; /*Puedes cambiarlo a gusto*/
    padding: 10px;
    border-radius: 10px;
    text-align: left;

    background-color: #ff6961;
    color: #fff;
    box-shadow: 0 0 17px #111;

    /*Lo posicionamos en el centro del elemento y lo ponemos por encima*/
    position: absolute;
    bottom: 160%;
    left: 50%;
    transform: translate(-50%, 0%);

    transition: all 500ms ease-in;
}

El resultado final sería este:

Pasa el cursor sobre la palabra con color o tocala si es que estas en celular

Fin

Bueno eso sería todo por hoy esepero que te haya gustado este diseño de tooltip con HTML y CSS, nos vemos en luego 👋 para otra taza de café ☕️.