PLANTA 1 · Sessió 1 · L'entorn: React + TypeScript amb Vite

La sala de màquines

Sistema a restaurar: Generador i servidor de desenvolupament

Alerta
Manual
Reptes
Mòdul

pratshop://planta-1

Manual de la planta

0 / 4

Desbloqueja les 4 pàgines del manual per obrir els reptes. Llegeix-les bé: els reptes en pregunten els detalls.

PÀGINA 01

L'entorn de treball i les ordres de npm

Per treballar amb React necessitem Node.js (que porta npm, el gestor de paquets), un editor com VS Code i Git. El projecte el crea Vite, que és alhora l'eina que crea l'esquelet, el servidor de desenvolupament i l'empaquetador.

node -v
npm create vite@latest pratshop -- --template react-ts
cd pratshop
npm install
npm run dev
npm run build
npm run preview

Fragment	Què fa
`node -v`	Mostra la versió de Node instal·lada. Si l'ordre no es reconeix, Node no està instal·lat o no és al PATH.
`npm create vite@latest pratshop -- --template react-ts`	Crea la carpeta pratshop amb l'esquelet d'un projecte React + TypeScript. El -- separa les opcions de npm de les de Vite.
`npm install`	Llegeix el package.json i descarrega totes les dependències a la carpeta node_modules.
`npm run dev`	Arrenca el servidor de desenvolupament a http://localhost:5173. Cada cop que deses, la pàgina s'actualitza sola.
`npm run build`	Comprova els tipus i genera la versió de producció, optimitzada, a la carpeta dist/.
`npm run preview`	Serveix la carpeta dist/ per provar la versió de producció abans de publicar-la.

PÀGINA 02

L'esquelet d'un projecte Vite

index.html: l'única pàgina HTML de l'aplicació. Té un <div id="root"> buit i carrega /src/main.tsx.
src/main.tsx: el punt d'entrada. Munta React dins del div#root.
src/App.tsx: el component arrel; d'aquí pengen tots els altres.
package.json: nom del projecte, scripts (dev, build, preview) i dependències.
node_modules/: les dependències descarregades. No es puja mai a GitHub (és al .gitignore): es regenera amb npm install.

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

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

Fragment	Què fa
`import App from './App';`	Importa el component arrel. No cal posar l'extensió .tsx.
`document.getElementById('root')!`	Busca el div buit de l'index.html. El ! diu a TypeScript que segur que existeix.
`createRoot(...).render(...)`	Crea l'arrel de React en aquell div i hi dibuixa l'aplicació.
`<StrictMode>`	Mode estricte de desenvolupament: fa comprovacions extra i avisa de males pràctiques. No es veu a la pantalla.

PÀGINA 03

Un component és una funció que retorna JSX

Un component és una funció que comença amb majúscula i retorna JSX, una sintaxi que s'assembla a l'HTML però que és JavaScript. Les regles que més es despisten:

Un sol element arrel. Si en necessites dos, embolcalla'ls amb un <div> o amb un fragment <>…</>.
className en lloc de class, i htmlFor en lloc de for.
Totes les etiquetes es tanquen: <img />, <input />, <br />.
Les claus { } obren una finestra a JavaScript: variables, càlculs, crides.
style rep un objecte, no un text: style={{ color: 'red' }}.
Els esdeveniments van en camelCase: onClick, onChange.

type Props = { nom: string; punts?: number };

export default function Salutacio({ nom, punts = 0 }: Props) {
  return (
    <>
      <h2 className="titol">Hola, {nom}!</h2>
      <p>Tens {punts} punts.</p>
    </>
  );
}

Fragment	Què fa
`type Props = { nom: string; punts?: number };`	Les props tipades amb TypeScript. El ? vol dir que punts es pot ometre.
`export default function Salutacio(...)`	El component: una funció amb nom en majúscula que s'exporta per poder-la importar.
`{ nom, punts = 0 }: Props`	Desestructura les props i dona un valor per defecte a punts.
`<> … </>`	Fragment: agrupa dos elements sense afegir cap etiqueta extra al DOM.
`{nom}`	Les claus insereixen el valor de la variable dins del JSX.

PÀGINA 04

TypeScript t'avisa abans d'executar

Els fitxers de components són .tsx (TypeScript + JSX). Si les props tenen tipus, l'editor marca l'error abans d'arrencar l'aplicació, i npm run build no deixa generar la versió de producció mentre hi hagi errors de tipus.

variant?: 'primari' | 'secundari': unió de literals; qualsevol altre text és un error.
onClick?: () => void: una funció que no rep res i no retorna res.
children: ReactNode: qualsevol cosa que React pugui dibuixar.

PLANTA A LES FOSQUES

Manual de la planta