Tu primera app de React con Vite

Te lo muestro: montar el proyecto

Vite (se pronuncia “veet”, francés por “rápido”) es una herramienta que te prepara un esqueleto de proyecto React listo para usar. Abre la terminal y ve al sitio donde quieres el proyecto (como el Escritorio):

cd Desktop
npm create vite@latest my-react-web -- --template react

Vite puede preguntarte algo – confirma con Enter. Luego:

cd my-react-web
npm install
npm run dev -- --port 3901

• npm install descarga todo lo que necesita el proyecto (tarda un momento – React y sus ayudantes se descargan en la carpeta node_modules).
• npm run dev -- --port 3901 arranca el servidor de desarrollo. La terminal mostrará la dirección http://localhost:3901. Ábrela en el navegador.

¿Ves un logo girando y el título “Vite + React”? ¡Enhorabuena – tu primera app de React está funcionando! 🎉

Un tour por el proyecto

Abre la carpeta my-react-web en VS Code (File → Open Folder). Parecen muchos archivos, pero solo tres importan ahora mismo:

Ignora el resto por ahora (nunca abras ni borres node_modules, package.json es la lista de paquetes del proyecto).

Tu primer cambio en el código

Abre src/App.jsx. Borra todo y escribe:

function App() {
  const name = "Jake";

  return (
    <div>
      <h1>Hi, this is {name}!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

Guarda – y la página del navegador cambió sola. Esto es lo que estás viendo:

• El componente App es una función que devuelve HTML (esta notación se llama JSX).
• {name} – las llaves insertan JavaScript en HTML. Cualquier cosa: una variable, un cálculo {2 + 3}, incluso una condición.
• export default App – “ofrezco este componente a otros archivos” (main.jsx es quien lo coge).

JSX tiene dos rarezas a las que te acostumbrarás: en lugar de class, escribes className (class es palabra reservada en JavaScript), y un componente debe devolver un elemento contenedor (por eso hay un <div> alrededor de todo).

Ahora tú 💪

1. Monta el proyecto siguiendo la guía y hazlo funcionar.
2. Edita App.jsx: un título con tu nombre, un párrafo sobre lo que estás construyendo, y una variable age que muestres en la frase I am {age} years old.
3. Borra a propósito una etiqueta de cierre y mira cómo es el error – Vite lo muestra en el navegador, con el número de línea. Luego arréglalo.
4. Para el servidor (Ctrl+C en la terminal) y arráncalo otra vez (npm run dev -- --port 3901) – para tener todo el ciclo en la punta de los dedos.

Lo que te llevas de esta lección

• npm create vite@latest monta un proyecto, npm install descarga paquetes, npm run dev arranca localhost.
• Escribes código en src/App.jsx: un componente es una función que devuelve JSX, {} inserta JavaScript en HTML.
• En JSX: className en lugar de class, siempre un elemento contenedor.

© 2026 Ing. Martin Polak / AlgoRhino · Condiciones de uso del contenido