crear un componente REACT con node y nvm

esto es un tutorial para crear un proyecto react y correrlo

instalar nvm

 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

hacer:

source ~/.zshrc

recargar .zshrc, para que se entere que existe el comando nvm

nvm: node version manager

es para manejar las versiones de node

listar las versiones de node que tengo instaladas:

nvm ls

instalar una version de node: (22)

nvm install 22

usar una versión especifica de node (22):

nvm use 22

en un directorio para el proyecto, crear un directorio para el componente:

mkdir ejemplonode

acceder al directorio:

cd ejemplonode

esta es la parte fundamental, crear el scaffolding REACT para el componente:

npm create vite@latest mi-componente-app -- --template react

vite es el scaffolding, es instalación bajo demanda (on-the-fly), la idea es dejar a Vite guardado únicamente dentro de la carpeta de ese proyecto específico.

El comando de arranque:

npm create vite@latest

El comando npm create es un alias de npm init (que a su vez usa npx por detrás)

no hay que hacer:

npm install -g vite

ya que npm create vite lo hace indirectamente en un directorio temporal

¿Se instala en tu proyecto? Sí, vive exclusivamente dentro de la carpeta node_modules de cada app que crees. Cada proyecto puede tener una versión de Vite distinta y jamás van a romper el resto de tu máquina

vite sería un comando que funciona solo en tu proyecto

nvm, node, npm y javascript ya vienen todos instalados en nvm

entrar al directorio del componente creado:

 cd mi-componente-app

adentro del directorio hacer (acá está la magia):

npm install

node se descarga el ejecutable de Vite y lo guardó adentro de la carpeta oculta node_modules/vite de tu proyecto

levantar el componente REACT:

npm run dev

imagen de correr el proyecto REACT:

ahí se especifica una URL

ver la web de la URL que dice ahí:

localhost:5173

crear el nuevo componente

debe estar ubicado en la raíz de /src y llamarse xxxx.jsx (Contador.jsx)

contenido:

import { useState } from 'react';

// Este es tu componente básico de React
export function Contador() {
  // Definimos un estado llamado 'count' que arranca en 0
  const [count, setCount] = useState(0);

  return (
    <div style={{ padding: '20px', textAlign: 'center', border: '1px solid #646cff', borderRadius: '8px' }}>
      <h2>Mi Componente Contador</h2>
      <p>Le diste click {count} veces</p>
      
      {/* Al hacer click, actualizamos el estado sumando 1 */}
      <button onClick={() => setCount(count + 1)}>
        Incrementar
      </button>
    </div>
  );
}

luego en el App.jsx creado debes importar el componente (Contador.jsx) y mostrarlo:

código:

import { Contador } from './Contador';

function App() {
  return (
    <main style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      {/* Invocamos tu componente como si fuera una etiqueta HTML */}
      <Contador />
    </main>
  );
}

export default App;

imagen:

luego en localhost podés ver el componente renderizado (lo que está en App.jsx)::

el componente se renderiza automáticamente (los cambios), no hace falta tirar comandos por consola

que tiene “main.jsx”:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

main.jsx (El punto de entrada): Es el encargado de ir a buscar ese div#root en el HTML y decirle a React: “Tomá, acá adentro clava toda nuestra aplicación”. Adentro de main.jsx se importa y se renderiza <App />

App.jsx (El contenedor principal): Actúa como la raíz de tus componentes visuales. Adentro de él es donde importaste e invocaste a <Contador />

el orden de invocación de archivos es:

index.html -> main.jsx -> App.jsx -> Contador.jsx

por que el componente Contador se renderiza centrado:

justifyContent: 'center': Centra tu componente Contador de forma horizontal (de izquierda a derecha)
alignItems: 'center': Centra tu componente de forma vertical (de arriba a abajo)

en package-lock están los módulos de “vite”:

diferemcia entre package.json y package-lock.json

Quién lo escribe:

package,json (vos)
package-lock.json (automático, npm)

versiones de las dependencias:

package.json (permite rangos de versiones)
package-lock.json (estricto. Guarda la versión exacta (ej: 19.0.2))

La carpeta node_modules no se sube a Git porque es pesadísima y se puede volver a generar.

NPM lo lee primero y dice: “Pará… el package.json me da permiso de bajar algo nuevo, pero el package-lock.json me exige que para este proyecto use la 19.0.1 exacta

El package.json es de NPM (Node Package Manager)

NPM es el dueño del archivo: package.json es, literalmente, el inventario de NPM. Cada vez que vos tirás comandos como npm install o npm run dev, NPM viene a leer este archivo para saber qué descargar o qué script ejecutar.

React no sabe qué es un package.json. React es simplemente una librería más de JavaScript (un paquete) que vos decidiste anotar dentro de la lista de “Dependencies” de tu package.json para que NPM te la descargue.

Antes, JavaScript solo podía correr adentro de un navegador web (como Chrome o Safari). Node.js es un entorno que agarra ese mismo motor de los navegadores y te permite ejecutar código JavaScript directamente en tu computadora, como si fuera Python, Java o C#

npm es una herramienta de consola que viene instalada automáticamente cuando bajás Node (por eso NVM te instaló ambos). Es, básicamente, la tienda de repuestos y librerías más grande del mundo. Si alguien en el planeta programó algo útil, lo sube a NPM para que vos lo uses con un comando.

Cada vez que tirás npm install, le estás pidiendo a este proveedor que te traiga cajas con mercadería y las deje en el depósito (la carpeta node_modules)

package.json es un archivo de texto en formato JSON que vive en la raíz de tu proyecto. Es el documento de identidad de tu aplicación. Ahí anotás el nombre de tu proyecto, los comandos rápidos (npm run dev) y la lista de paquetes de NPM que tu proyecto necesita para poder vivir.

NPM lee tu package.json y sabe que tiene que despertar a Vite.
Vite corre sobre el motor de Node.js en tu Mac para procesar todo a la velocidad de la luz.
Node compila tus archivos de React y traduce el código JSX (que los navegadores no entienden nativamente) a JavaScript puro y HTML tradicional.
El servidor te lo escupe en localhost:5173 para que veas tu componente andando

React no es un lenguaje ni un programa: es una librería de JavaScript creada por Facebook. Sirve exclusivamente para construir interfaces de usuario (lo que la gente ve en la pantalla) dividiendo la web en “bloques” o piezas llamadas Componentes

jsx: Significa JavaScript XML

Es una extensión de la sintaxis de JavaScript que te permite escribir código que se ve exactamente igual a HTML, pero adentro de tus archivos de JavaScript. En lugar de usar códigos raros para crear un botón desde JS, con JSX simplemente escribís <button>Incrementar</button> adentro de una función

Tu carpeta src es tu espacio de trabajo (tu caja de bloques de Lego). Ahí es donde vas a crear tus componentes separados (como Contador.jsx, Boton.jsx, Navbar.jsx, etc.) y los vas a ir llamando y ordenando dentro de App.jsx

App.jsx es tu pantalla principal, el “bloque madre”. Todo lo que vos quieras que se vea en tu página web lo vas a ir metiendo y acomodando adentro de App.jsx

main.jsx (o index.js en proyectos más viejos) es el “enchufe” que conecta a React con tu navegador. Su única función es agarrar a App.jsx y renderizarlo. No tenés que ensuciarlo metiendo tus componentes ahí.

Si mañana querés hacer una página web completa, tu App.jsx se vería más o menos así de limpio y ordenado:

import { Navbar } from './Navbar';
import { Contador } from './Contador';
import { Footer } from './Footer';

function App() {
  return (
    <div>
      <Navbar />      {/* Tu barra de navegación arriba */}
      <Contador />    {/* Tu contador en el medio */}
      <Footer />      {/* Tu pie de página abajo */}
    </div>
  );
}

Para el 95% de los proyectos que hagas en React, a main.jsx y a index.html no los tocás nunca más una vez que están creados. Ya hacen su magia de fondo y se quedan ahí fijos

Los únicos motivos para tocar index.html:

Cambiar el título de la pestaña: Modificar la etiqueta <title>Vite + React</title> por el nombre real de tu proyecto.
Cambiar el favicon: Cambiar el ícono chiquito que se ve en la pestaña del navegador.
Meter fuentes de Google Fonts: Pegar los enlaces (<link>) de tipografías externas o scripts globales de analítica (como Google Analytics)

Los únicos motivos para tocar main.jsx:

Configurar un enrutador (React Router): Si tu web va a tener varias páginas (ej: /contacto, /tienda), vas a necesitar envolver a <App /> con un componente proveedor de rutas
Manejo de estados globales o telemetría: Si usás librerías pesadas para manejar datos en toda la app o querés meter herramientas de monitoreo/observabilidad que controlen si la app tira errores en producción

Tu flujo de trabajo real, el de todos los días, va a ser un loop constante entre crear archivos .jsx dentro de src y ordenarlos en App.jsx

Post Views: 4

Tags: component, componente, macos, node, nvm, react