El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Què és React?

Següent ►
►

React és avui la biblioteca més utilitzada per construir interfícies d'usuari a la web, i entendre quin problema resol és molt més important que memoritzar-ne l'API. Abans d'escriure ni una sola línia de codi convé tenir clar per què milers d'equips van abandonar la manipulació manual del DOM i van adoptar un model declaratiu basat en components. En aquesta lliçó veuràs aquest contrast amb un exemple real, coneixeràs el vocabulari bàsic de React i descobriràs CicloUrbano, l'aplicació de lloguer de bicicletes que construiràs al llarg de tot el curs.

Contingut

  1. El problema: manipular el DOM a mà
  2. La mateixa pantalla amb React: l'enfocament declaratiu
  3. Què és exactament React (i què no és)
  4. La interfície com a funció de l'estat
  5. Història mínima i estat actual
  6. El vocabulari que veuràs a partir d'ara
  7. Quan encaixa React i quan no
  8. Presentació del projecte: CicloUrbano

  1. El problema: manipular el DOM a mà

Imagina una pantalla molt senzilla de CicloUrbano: un llistat de bicicletes amb el seu model, el seu estat i el seu preu per hora, i un filtre que permeti veure només les disponibles. Amb JavaScript pur i manipulació directa del DOM, el codi s'assembla a això.

// cataleg.js — versió amb JavaScript pur i manipulació directa del DOM
const bicicletes = [
  { id: 'bici-001', model: 'Urbana Clàssica', tipus: 'urbana', estat: 'disponible', preuHora: 2.5 },
  { id: 'bici-002', model: 'Elèctrica Pro', tipus: 'electrica', estat: 'alquilada', preuHora: 4 },
  { id: 'bici-003', model: 'Càrrega Max', tipus: 'carga', estat: 'mantenimiento', preuHora: 5.5 }
];

let nomesDisponibles = false;

const contenidor = document.getElementById('catalog');
const boto = document.getElementById('filtre');
const comptador = document.getElementById('comptador');

function pintarCataleg() {
  // 1. Cal buidar a mà el que ja s'havia pintat
  contenidor.innerHTML = '';

  // 2. Cal decidir a mà què es mostra
  const visibles = nomesDisponibles
    ? bicicletes.filter((b) => b.estat === 'disponible')
    : bicicletes;

  // 3. Cal construir cada node del DOM pas a pas
  visibles.forEach((bicicleta) => {
    const targeta = document.createElement('article');
    targeta.className = 'targeta-bicicleta';

    const titol = document.createElement('h3');
    titol.textContent = bicicleta.model;

    const estat = document.createElement('span');
    estat.className = 'estat estat--' + bicicleta.estat;
    estat.textContent = bicicleta.estat;

    const preu = document.createElement('p');
    preu.textContent = bicicleta.preuHora.toFixed(2) + ' €/h';

    targeta.append(titol, estat, preu);
    contenidor.append(targeta);
  });

  // 4. I cal recordar-se d'actualitzar tota la resta que depengui de les dades
  comptador.textContent = visibles.length + ' bicicletes';
}

boto.addEventListener('click', () => {
  nomesDisponibles = !nomesDisponibles;
  boto.textContent = nomesDisponibles ? 'Veure-les totes' : 'Només disponibles';
  pintarCataleg();
});

pintarCataleg();

Aquest codi funciona. El problema no és que sigui llarg, sinó què li passa quan l'aplicació creix:

  • Sincronització manual. Les dades viuen a bicicletes i nomesDisponibles, però la pantalla viu al DOM. Res no garanteix que coincideixin: ets tu qui ha de cridar pintarCataleg() en el moment exacte. El dia que un company afegeixi una acció nova i s'oblidi d'aquesta crida, la pantalla mostrarà informació desactualitzada.
  • Instruccions, no descripcions. El codi no diu com s'ha de veure la pantalla; diu quins passos cal seguir per arribar-hi (createElement, append, textContent...). Llegir-lo obliga a simular mentalment la seva execució.
  • L'esborrat i repintat complet és tosc. contenidor.innerHTML = '' destrueix i recrea tot: es perd el focus del teclat, la posició del desplaçament i l'estat de qualsevol camp de formulari que hi hagués a dins.
  • Complexitat multiplicativa. Amb un filtre és assumible. Amb un filtre, un cercador, una ordenació, un comptador, un distintiu d'estació i un botó de reserva, el nombre de combinacions que cal mantenir coherents creix molt més ràpid que el nombre de funcionalitats.

  1. La mateixa pantalla amb React: l'enfocament declaratiu

Ara la mateixa funcionalitat escrita amb React. No cal que ho entenguis tot encara: fixa't només en la forma del codi.

// CatalegBicicletes.jsx — versió amb React
import { useState } from 'react';

const bicicletes = [
  { id: 'bici-001', model: 'Urbana Clàssica', tipus: 'urbana', estat: 'disponible', preuHora: 2.5 },
  { id: 'bici-002', model: 'Elèctrica Pro', tipus: 'electrica', estat: 'alquilada', preuHora: 4 },
  { id: 'bici-003', model: 'Càrrega Max', tipus: 'carga', estat: 'mantenimiento', preuHora: 5.5 }
];

function CatalegBicicletes() {
  const [nomesDisponibles, setNomesDisponibles] = useState(false);

  const visibles = nomesDisponibles
    ? bicicletes.filter((b) => b.estat === 'disponible')
    : bicicletes;

  return (
    <section>
      <button onClick={() => setNomesDisponibles(!nomesDisponibles)}>
        {nomesDisponibles ? 'Veure-les totes' : 'Només disponibles'}
      </button>

      <p>{visibles.length} bicicletes</p>

      {visibles.map((bicicleta) => (
        <article className="targeta-bicicleta" key={bicicleta.id}>
          <h3>{bicicleta.model}</h3>
          <span className={`estat estat--${bicicleta.estat}`}>{bicicleta.estat}</span>
          <p>{bicicleta.preuHora.toFixed(2)} €/h</p>
        </article>
      ))}
    </section>
  );
}

export default CatalegBicicletes;

Compara les dues versions apartat per apartat:

Aspecte JavaScript pur (imperatiu) React (declaratiu)
Què escrius Els passos per modificar la pantalla Com s'ha de veure la pantalla per a unes dades donades
Qui actualitza el DOM Tu, amb createElement, append, innerHTML React, comparant el nou amb l'anterior
On viu la veritat Repartida entre variables i el DOM En l'estat del component, i només allà
En canviar una dada Cal recordar de cridar la funció de repintat React torna a executar el component automàticament
Risc de desincronització Alt i creixent Pràcticament eliminat per disseny
Reutilitzar la targeta en una altra pantalla Copiar i enganxar la funció que la construeix Extreure un component i usar-lo on calgui

La diferència clau està en una sola frase: en la versió imperativa descrius transicions; en la declarativa descrius destinacions. Tu declares «amb aquestes dades, la pantalla és així», i React s'encarrega d'esbrinar què cal tocar del DOM per arribar-hi. Com ho esbrina exactament és el tema de la lliçó Com renderitza React: Virtual DOM i reconciliació.

  1. Què és exactament React (i què no és)

React és una biblioteca de JavaScript per construir interfícies d'usuari mitjançant components. Convé desglossar aquesta definició:

  • Biblioteca, no framework. React s'ocupa d'una cosa: produir i mantenir actualitzada la interfície. No porta enrutador, ni client HTTP, ni sistema de formularis, ni gestor d'estat global, ni convenció de carpetes. Aquestes peces les tries tu de l'ecosistema (veuràs React Router al Mòdul 6 i Redux al Mòdul 7). És més llibertat i també més decisions.
  • Declarativa. Descrius el resultat, no el procediment, tal com acabes de veure.
  • Basada en components. La unitat de construcció és el component: una funció que retorna un tros d'interfície. Els components s'imbriquen uns dins dels altres formant un arbre, igual que les etiquetes HTML, però amb l'avantatge que són peces teves, amb nom propi, reutilitzables i comprovables per separat.
  • Agnòstica de la destinació. React descriu la interfície; qui la pinta és un renderitzador. react-dom la pinta al navegador, React Native la pinta amb components natius d'iOS i Android (ho veuràs a 10-05) i hi ha renderitzadors per a terminal o PDF. Per això el paquet react i el paquet react-dom estan separats.

Allò que React no és: no és un llenguatge nou (és JavaScript), no és un substitut d'HTML i CSS (els necessites igualment), i no és una solució màgica de rendiment (una aplicació React mal escrita pot anar més lenta que una pàgina estàtica ben feta).

  1. La interfície com a funció de l'estat

La idea que sosté tot React cap en una expressió conceptual:

interficie = f(estat)

És a dir: la pantalla és el resultat d'aplicar els teus components a les dades actuals. Si l'estat és «el filtre està desactivat i hi ha tres bicicletes», la pantalla és una i només una. Si l'estat canvia a «filtre activat», React torna a calcular la pantalla des de zero conceptualment i actualitza el DOM real amb les diferències.

flowchart LR
    A[Estat<br/>dades de l'aplicació] --> B[Components<br/>funcions que descriuen la interfície]
    B --> C[Descripció de la interfície]
    C --> D[React actualitza el DOM real]
    E[Interacció de l'usuari] --> F[Canvi d'estat]
    F --> A

Les conseqüències pràctiques d'aquest model són enormes:

  • Només hi ha una font de veritat. Si vols saber per què la pantalla es veu així, mires l'estat. No hi ha un tercer lloc on algú hagi modificat un textContent pel seu compte.
  • Depurar és més fàcil. Reproduir una fallada es converteix en reproduir un estat.
  • El flux és predictible. Interacció → canvi d'estat → nou render. Sempre en aquest ordre i sempre en aquesta direcció.

  1. Història mínima i estat actual

Any Fita
2011-2012 Jordan Walke crea un prototip intern a Facebook per resoldre problemes de sincronització d'interfície al feed i als anuncis
2013 Publicació com a programari lliure. JSX i el Virtual DOM generen escepticisme inicial
2015 React Native porta el model als mòbils natius
2016 React 15: consolidació i adopció massiva a la indústria
2017 React 16 («Fiber»): reescriptura completa del motor intern, límits d'error, fragments
2019 React 16.8 introdueix els hooks: els components de funció poden tenir estat i el model de classes queda relegat
2022 React 18: renderitzat concurrent, createRoot, transicions, Suspense al servidor
2024-2025 React 19: Server Components estables, noves API d'accions i formularis, compilador optimitzador

Dades que convé tenir presents:

  • El manté Meta juntament amb un ampli grup de col·laboradors externs, i es publica sota llicència MIT.
  • És la tecnologia d'interfície més demandada del mercat laboral web, la qual cosa es tradueix en abundància de documentació, cursos, biblioteques de components i respostes a problemes concrets.
  • La documentació oficial (react.dev) va ser reescrita completament al voltant dels hooks: si trobes un tutorial ple de class ... extends React.Component, gairebé segur que està desactualitzat. En aquest curs els components de classe apareixen únicament com a codi heretat que cal saber llegir (lliçó 02-02).

  1. El vocabulari que veuràs a partir d'ara

Aquests quatre termes vertebren el curs. Aquí només els anomenem; cadascun té la seva lliçó.

Concepte En una frase On s'estudia
Component Funció que retorna un tros d'interfície i es reutilitza com una etiqueta pròpia Mòdul 2
JSX Sintaxi semblant a l'HTML que s'escriu dins de JavaScript per descriure la interfície Lliçó 01-04
Props Dades que un component pare passa a un fill; són de només lectura Lliçó 02-03
Estat Dades que un component guarda entre renders i que, en canviar, provoquen un nou render Lliçó 02-04
Virtual DOM Representació lleugera de la interfície en memòria que React compara per saber què cal tocar del DOM real Lliçó 01-05

  1. Quan encaixa React i quan no

React brilla quan la interfície és rica en estat: moltes dades que canvien, moltes vistes que en depenen i molta interacció. Un panell d'operari de CicloUrbano que mostri en temps real quines bicicletes estan llogades és un cas de llibre. Un fullet informatiu de tres pàgines estàtiques, no.

Opció Model Punt fort A tenir en compte
React Biblioteca de components, declarativa Ecosistema i comunitat enormes, ocupabilitat, React Native Cal muntar la resta de l'stack triant biblioteques
Vue Framework progressiu amb plantilles Corba d'entrada suau, molt bona documentació Comunitat menor que la de React
Angular Framework complet i opinat, amb TypeScript Tot ve inclòs i estandarditzat; ideal en organitzacions grans Molt més per aprendre abans de ser productiu
Svelte Compilador, sense runtime de Virtual DOM Menys codi i paquets molt lleugers Ecosistema i oferta laboral més reduïts
Sense framework DOM + JavaScript estàndard Zero dependències, màxim control, càrrega mínima La complexitat de sincronització recau tota sobre tu

Senyals que no necessites React:

  • La pàgina és fonamentalment contingut amb poca o cap interacció.
  • El SEO i el temps de primera càrrega són crítics i no muntaràs renderitzat en servidor.
  • L'equip és molt petit i la funcionalitat cap en uns quants gestors d'esdeveniments.
  • Ja existeix una solució de servidor (plantilles) que resol el problema amb menys peces mòbils.

Senyals que sí:

  • Hi ha estat compartit entre diverses zones de la pantalla que s'ha de mantenir coherent.
  • La interfície es compon de peces que es repeteixen amb dades diferents (targetes, files, filtres, modals).
  • Preveus que l'aplicació creixerà i diverses persones tocaran el mateix codi.
  • Necessites actualitzacions freqüents sense recarregar la pàgina.

  1. Presentació del projecte: CicloUrbano

Durant tot el curs construiràs CicloUrbano, una aplicació fictícia de lloguer de bicicletes urbanes per estacions. Cada lliçó afegeix una peça, de manera que en arribar al Mòdul 11 tindràs una aplicació completa i no una col·lecció d'exemples solts.

El domini

// src/dades/domini.js — la forma de les dades que farem servir durant tot el curs

// Bicicleta: { id, model, tipus, estat, estacioId, preuHora }
//   tipus: 'urbana' | 'electrica' | 'carga'
//   estat: 'disponible' | 'alquilada' | 'mantenimiento'
export const bicicletes = [
  { id: 'bici-001', model: 'Urbana Clàssica', tipus: 'urbana',    estat: 'disponible',    estacioId: 'est-01', preuHora: 2.5 },
  { id: 'bici-002', model: 'Elèctrica Pro',   tipus: 'electrica', estat: 'alquilada',     estacioId: 'est-01', preuHora: 4.0 },
  { id: 'bici-003', model: 'Càrrega Max',     tipus: 'carga',     estat: 'mantenimiento', estacioId: 'est-02', preuHora: 5.5 },
  { id: 'bici-004', model: 'Urbana Clàssica', tipus: 'urbana',    estat: 'disponible',    estacioId: 'est-03', preuHora: 2.5 },
  { id: 'bici-005', model: 'Elèctrica Pro',   tipus: 'electrica', estat: 'disponible',    estacioId: 'est-02', preuHora: 4.0 }
];

// Estacio: { id, nom, barri, places }
export const estacions = [
  { id: 'est-01', nom: 'Plaça Major',     barri: 'Centre',   places: 20 },
  { id: 'est-02', nom: 'Parc Nord',       barri: 'Nord',     places: 15 },
  { id: 'est-03', nom: 'Estació Central', barri: 'Eixample', places: 30 }
];

// Usuari: { id, nom, email, rol }  ->  rol: 'client' | 'operari'
export const usuaris = [
  { id: 'usr-01', nom: 'Ana Ribera', email: '[email protected]', rol: 'client' },
  { id: 'usr-02', nom: 'Marc Solé',  email: '[email protected]',  rol: 'operari' }
];

// Reserva: { id, bicicletaId, usuari, dataInici, hores, estat }
export const reserves = [
  { id: 'res-01', bicicletaId: 'bici-002', usuari: 'usr-01', dataInici: '2026-05-04T09:00', hores: 2, estat: 'activa' }
];

Totes les dades són fictícies: noms, correus i estacions estan inventats per al curs. No facis servir mai dades reals de persones quan practiquis.

Abast funcional que anirem construint

flowchart TD
    A[CicloUrbano] --> B[Catàleg de bicicletes<br/>Mòduls 1-3]
    A --> C[Filtres, cerca i formularis<br/>Mòdul 3]
    A --> D[Estat compartit i hooks<br/>Mòduls 4-5]
    A --> E[Navegació entre pàgines<br/>Mòdul 6]
    A --> F[Estat global i dades del servidor<br/>Mòdul 7]
    A --> G[Rendiment i proves<br/>Mòduls 8-9]
    A --> H[Aplicació completa desplegada<br/>Mòduls 10-11]

En termes de producte, CicloUrbano permetrà:

  1. Consultar el catàleg de bicicletes amb el seu model, tipus, estat i preu per hora.
  2. Filtrar per tipus, estat i estació, i cercar per model.
  3. Veure el detall d'una estació amb les seves bicicletes i les seves places lliures.
  4. Crear una reserva mitjançant un formulari validat.
  5. Consultar el llistat de reserves de l'usuari i cancel·lar-les.
  6. Oferir un panell d'operari amb accés restringit per rol.

Errors habituals i consells

  • Creure que React substitueix HTML, CSS o JavaScript. No ho fa. Com millor dominis el DOM, la cascada CSS i les promeses, millor React escriuràs. Si alguna cosa d'ES6+ se't resisteix, reforça-la ara: destructuring, spread, map/filter i funcions fletxa apareixen literalment a totes les lliçons.
  • Intentar tocar el DOM «a mà» dins d'un component. Un document.getElementById(...).innerHTML = ... dins de React entra en conflicte directe amb el que React creu que hi ha pintat. Existeixen vies legítimes per accedir al DOM quan realment cal (useRef, lliçó 05-03), però són l'excepció.
  • Triar React per moda. Justifica la decisió: hi ha estat ric? La interfície canvia molt? L'equip creixerà? Si les tres respostes són no, potser no el necessites.
  • Aprendre copiant sense escriure. Escriu els exemples d'aquest curs al teu propi projecte. La memòria muscular sobre la sintaxi JSX es construeix escrivint-la, no llegint-la.
  • Confondre «declaratiu» amb «automàtic». React automatitza l'actualització del DOM, no el disseny del teu estat. Modelar bé les dades continua sent la teva feina i és la decisió que més impacte tindrà en la qualitat del codi.

Exercicis

Exercici 1

Identifica, en el fragment imperatiu de l'apartat 1, les quatre responsabilitats diferents que assumeix el programador i que en la versió React desapareixen o passa a assumir la biblioteca. Escriu-les amb les teves paraules.

Exercici 2

Per a cadascun d'aquests quatre projectes, decideix si faries servir React o no i justifica la resposta en dues o tres línies:

  1. La pàgina d'avís legal de CicloUrbano: text estàtic, sense interacció.
  2. Un panell per a operaris que mostra l'estat de 200 bicicletes i es refresca cada 10 segons.
  3. Un formulari de contacte de quatre camps en una web corporativa feta amb plantilles de servidor.
  4. L'aplicació de client de CicloUrbano: catàleg, filtres, reserves i àrea personal.

Exercici 3

Escriu l'objecte JavaScript corresponent a una nova bicicleta de CicloUrbano que compleixi totes aquestes condicions, respectant exactament la forma del domini definida a l'apartat 8: és del model «Càrrega Max», està disponible, es troba a l'estació «Estació Central» i costa 5,50 € l'hora. Després escriu l'expressió que, partint de l'array bicicletes, retorna només les bicicletes disponibles de l'estació est-01.

Solucions

Solució 1.

  1. Construir el DOM node a node: crear cada element, assignar classes i textos, i penjar-los del contenidor. En React descrius el resultat amb JSX i la biblioteca crea els nodes.
  2. Esborrar l'anterior abans de repintar (innerHTML = ''). React calcula les diferències i només modifica el que ha canviat, sense destruir la resta.
  3. Decidir quan repintar: recordar de cridar pintarCataleg() després de cada canvi. A React, canviar l'estat dispara el nou render automàticament.
  4. Mantenir sincronitzats els elements secundaris (el comptador i el text del botó). A React tots dos són expressions derivades de l'estat, així que no poden quedar desactualitzats.

Solució 2.

  1. No. Contingut estàtic sense estat: HTML i CSS n'hi ha prou. Afegir React encareix la càrrega i el manteniment sense aportar res.
  2. Sí. Estat abundant, canviant i compartit entre diverses zones de pantalla: és exactament l'escenari per al qual React va ser dissenyat.
  3. Probablement no. Un formulari aïllat dins d'una web de servidor es resol amb JavaScript estàndard. Introduir React implicaria tot un procés de construcció per a molt poc guany. Si en el futur hi hagués molts formularis amb validació complexa, la decisió podria canviar.
  4. Sí. Moltes vistes que comparteixen dades, navegació entre pàgines, interacció constant i un equip que creixerà: React aporta estructura, reutilització i ecosistema.

Solució 3.

// Nova bicicleta respectant la forma del domini
const novaBicicleta = {
  id: 'bici-006',
  model: 'Càrrega Max',
  tipus: 'carga',
  estat: 'disponible',
  estacioId: 'est-03', // 'Estació Central'
  preuHora: 5.5
};

// Bicicletes disponibles de l'estació est-01 ('Plaça Major')
const disponiblesPlacaMajor = bicicletes.filter(
  (b) => b.estat === 'disponible' && b.estacioId === 'est-01'
);
// -> [{ id: 'bici-001', model: 'Urbana Clàssica', ... }]

Fixa't que tipus es dedueix del model («Càrrega Max» és de tipus 'carga') i que l'estació es referencia pel seu id, mai pel seu nom: els identificadors són estables i els noms podrien canviar.

Conclusió

React resol un problema molt concret: mantenir la interfície sincronitzada amb les dades sense que tu hagis d'orquestrar cada actualització del DOM. Ho aconsegueix amb un model declaratiu («així es veu la pantalla amb aquestes dades») i basat en components (peces amb nom propi que es combinen i es reutilitzen), resumit en la idea que la interfície és una funció de l'estat. És una biblioteca, no un framework: et dona la capa d'interfície i et deixa triar la resta. Encaixa quan hi ha estat ric i interacció constant, i sobra quan la pàgina és essencialment contingut estàtic.

També coneixes ja CicloUrbano, el seu domini i les dades d'exemple que reapareixeran a cada lliçó del curs.

A la lliçó següent, Configuració de l'entorn de desenvolupament, passaràs de la teoria a la pràctica: instal·laràs Node.js, crearàs el projecte de CicloUrbano amb Vite, entendràs per a què serveix cada carpeta generada i deixaràs el servidor de desenvolupament funcionant amb recàrrega en calent.

◄ Anterior
◄
Següent ►
►

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb Esdeveniments

Mòdul 4: Conceptes Avançats de Components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament a React

Mòdul 7: Gestió de l'Estat

Mòdul 8: Optimització del Rendiment

Mòdul 9: Proves a React

Mòdul 10: Temes Avançats

Mòdul 11: Projecte: Construir una Aplicació Completa

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2026. Tots els drets reservats