Capitulo 7 ➜ Node.js, JSX, Vite y primeros pasos

Creando un proyecto desde cero

A lo largo de la unidad anterior hicimos un carrito de compras en Js vanilla lo que consideraba necesario antes de adentrarnos en React, puesto que es mejor trabajar directamente con proyectos que adentrarse solo en la teoría, por ello esta unidad retomaremos la idea de ese carrito hecho en javascript, pero mejorandolo con más funcionalidades en React, ya que este curso va de eso justamente, react. Para empezar ¿Cómo creamos un proyecto de react? De eso va esta lección y hay muchas cosas que ver para entender cómo trabajar con react si no lo has hecho antes, primero, debes tener instalado nodejs.

Node.Js

En la unidad anterior no instalamos nada para trabajar con javascript, la razón es simple, al crear un archivo con extensión .html Windows entiende que es un navegador el que puede abrir ese archivo porque los navegadores son programas que tienen un motor de renderizado (gecko, webkit o blink) con el que pueden entender el html, pero la web de hoy en dia ya no es solo html, ni solo css, por lo que ahora también tienen un motor de javascript, para crear interacción con el usuario, en el caso de Chrome se usa el motor de javascript v8, que nos permite trabajar con javascript dentro del navegador.

¿Y si quiero usar javascript en la consola de Windows?, como si fuera un lenguaje de programación que instalamos en el PATH ¿Como haríamos eso? pues la respuesta a eso es justamente node.js; porque node.js es completamente ajeno al navegador, no es un servidor, no es un lenguaje, no es javascript, ni mucho menos un framework, es en palabras más exactas un entorno de ejecución para javascript, ¿y para que lo necesitamos? si lo que vamos a hacer es una aplicación frontend, no un programa de consola; bueno pasa que si bien los navegadores corren javascript, react no usa exactamente javascript usa la sintaxis JSX, y por supuesto los navegadores no pueden leer JSX sin ayuda.

JSX y NPM

¿Y qué es JSX? en resumen, es escribir etiquetas html directamente en el código Javascript; la ayuda que necesita el navegador, para poder leer JSX es una herramienta llamada Babel, y aunque es cierto que también puedes usar babel fuera de node.js, es pertinente hacer la aclaración que puedes agregar React a tu website sin instalar node, simplemente copiando algunas etiquetas script en un archivo HTML, pero eso quedó en el pasado, hoy en día para tener una aplicación estandarizada de React, con todos los beneficios que eso conlleva debes usar un gestor de paquetes que te de el versionado adecuado de todas las herramientas que necesitas, hace un momento mencione a Babel, esa es una de las herramientas necesarias de React pero no la única hay muchas más, y para poder administrarlas todas usamos NPM ¿y que es npm? pues es el manejador de paquetes oficial de node.js. Cuando creemos nuestro primer proyecto en React, nos aparecerá un archivo llamado “package.json” que tiene en su interior todas las dependencias que requiere React, para que tales dependencias se instalen, solo tienes que correr un comando de npm que descarga todo por ti, haciendo facil la instalacion de cualquier proyecto.

En conclusión, necesitas los paquetes de npm y npm trabaja con node; por lo que una vez que tengas el instalador de la versión LTS (soporte de término largo, o versión estable) de Node.js (descargala del sitio oficial de node.js) debes seguir los pasos a continuación para proceder con la instalación en Windows:

Abre el asistente de instalación de node.js ejecutandolo como administrador

Acepta los términos y condiciones.

Elige la ruta de instalación, como recomendación déjala por defecto.

Elige cómo quieres que se instalen las características, también dejalo por defecto.

Marca la casilla para instalar los compiladores necesarios.

Dale a instalar y espera que termine el proceso.

¿Qué es Vite?

Perfecto, con node.js y npm instalados ya tenemos lo necesario para crear un proyecto en React, pero algo de lo que no he hablado nada es del propio React, ¿que es React? pues es un librería, no se si llegaste a usar jquery, bueno jquery también era una librería y solo bastaba bajar un fichero o colocar un script en tu html para usarlo, pues React es lo mismo, pero recuerda lo que dije antes, eso de poner un scripts es cosa ya del pasado, ya que lo de hoy es usar estándares para desarrollar todos con la misma aplicación base, esto es así y es lo mejor, por lo mismo entonces tenemos 2 opciones para empezar una aplicación vanilla en React (vanilla porque las dos opciones crean aplicaciones react usando las mínimas herramientas necesarias, sin llegar a ser frameworks como next o gatsbi)

Esas dos opciones son Parcel y Vite, y como habrás notado por el nombre de la lección usaremos Vite, Vite es una herramienta de desarrollo para crear proyectos frontend, que por debajo usa una tecnología de empaquetado (bundler) encargada de darnos el entregable, es decir compilar nuestra aplicación y darnos el built listo para producción, esa por ejemplo es una de la ventajas, que mencionaba antes, que no tendrías si solo usaras react como script en tu html, llegado a un nivel de complejidad, necesitas hacer build de tu aplicación; y además otra de las ventajas es que vite te proporcionan el auto recargado, es decir no necesitas darle al F5 tantas veces a tu proyecto porque Vite lo hara por ti; por último, antes existía otra alternativa recomendada por el propio equipo de React: que era create-react-app pero ha caído en notable desuso por lo que descartamos y no recomendamos su uso, esta alternativa usaba un empaquetador llamado “webpack” algo lenta si la comparamos con vite, entonces vite viene a ser un reemplazo a webpack o a las herramientas que crean proyectos basados en webpack.

antes de empezar nuestro proyecto en vite tenemos que verificar estos dos comandos:

node -v

npm -v

Ambos para verificar que la instalación ha ido bien, viendo las versiones de node y npm respectivamente; ahora estamos listos para react, este es el comando que vamos a usar para crear nuestro primer proyecto con vite:

npm create vite@latest

Una vez ejecutado, nos pedirá un nombre para el proyecto, luego elegir un framework (react es librería pero no solo se instala react sino que también muchas dependencias necesarias, por ello lo considera framework); y elegimos javascript como lenguaje, con ello ya tenemos listo el scaffolding con el ya mencionado package json, así que solo entramos en la carpeta y corremos NPM install y ya tendremos listo nuestro proyecto (si gustas puedes ir levantando el servidor de desarrollo con el comando npm run dev)

Tipos de importaciones

Dentro de la carpeta node_modules existe una gran cantidad de librerías (entre ellas react) ¿cómo llegamos a usarlas todas? antes solo usábamos una etiqueta script en el html, pero ahora acceder al enorme árbol de dependencias, es diferente, si vamos a donde empieza todo, a nuestro archivo index.html, veremos que hay esta la etiqueta script pero ojo al “type”, porque es la razón por la que tenemos una sola etiqueta script y no una por cada librería, dado lo difícil que se haría mantener eso surgió el estándar EsModules, que funciona usando la etiqueta “type”,antes, teníamos un solo archivo de javascript con toda la lógica para que funcione, pero si quisieramos mas archivos, para dividir así la lógica en módulos, bastaba con usar más de estas etiquetas script pasándole la ruta de tales archivos y así todos los archivos compartían el mismo ámbito, es decir el fichero html; pero eso justamente es lo que se vuelve difícil de mantener, y por eso “type” corrige el problema, ya que este script llamara a un solo archivo, que es el que tendrá el resto de importaciones, y estarás asumiendo que los módulos siempre se estarán sirviendo a través de la web, a través de un mismo dominio, ya no a través del protocolo file (archivo) como veníamos haciendo en la unidad 1.

Entonces, volviendo a la pregunta inicial, ¿cómo usamos todas las dependencias de node_modules?, eso se hace con import, vayan a la carpeta src, y abran el archivo main.jsx; quiero que notes como se usan los imports.

Bare import:

Como debes saber lo normal es poner la ruta y la extensión a la hora de importar, entonces ¿por qué algunos imports no colocan la ruta completa? bueno, cuando veas una importación que solo lleva un nombre significa que estás frente a una bare import, esta es una de todas las formas de importar qué tiene javascript, las bare import buscarán la dependencia siempre en la carpeta node_modules, cuando usamos un bare import nos referimos a un paquete de npm, es decir, se buscará un paquete previamente instalado con npm, y ¿por qué no pone el .jsx al final? porque react y otros frameworks usan módulos que no necesitan el .js (por ejemplo webpack usa common.js y vite Es Modules) En resumen tu no te preocupes por el por qué, ya que VITE SE PREOCUPARA POR ELLO; pero si aún asi tienes dudas, en el video de la lección encuentras más respuestas acerca de cómo funcionan las bare import. Ten en cuenta que esto no es un estándar así que no esperes ver este tipo de importación fuera de proyectos que no usen empaquetadores o grandes frameworks.

Default import:

Recuerda que después del from viene la ubicación del archivo, para la cual usa la notación relativa para describir dicha ubicación, es decir si el archivo que buscas está en la misma carpeta pones un punto, pero si tienes que retroceder a una carpeta superior pones dos puntos y así, todo con relación al archivo que quiere importar; (bare import ignora esta característica) luego, después del import va lo que queremos traer; cuando solo te traes un solo elemento después del import, significa que estás frente a una exportación por defecto, que es una por archivo, (bare import sí puede tener esta característica) por lo tanto si solo traerás un elemento (este elemento puede ser un objeto, array, constante, función, realmente lo que sea) da lo mismo el nombre que uses, porque solo importa el valor, por ello puedes cambiarle el nombre y ponerle el alias que gustes.

Named import:

En el caso anterior solo se está exportando un elemento, pero si en el archivo que exporta hubiera más de un elemento en exportación, hay tendríamos que elegir qué traer en el archivo que importa, que puede ser un elemento específico (o dos o tres) del archivo que exporta; a eso se le conoce como importación nombrada, la cual permite hacer más de una importación por defecto, usando la sintaxis de llaves y enumerando lo que necesites; del lado del archivo que exporta debes declarar los elementos a exportar con “export” o al final del archivo seleccionando todas las constantes, variables, funciones o objetos, que queremos usar en otros archivos dentro de llaves, para que asi esten disponibles en el archivo que importa.

Code import:

El último tipo de importación que es probable que veamos trabajando con Rect se le conoce como importación de código, es simplemente traerte todo el código, por eso no requiere que especifiques más, es común para traer los estilos css.