Què és React? Una guia en llenguatge senzill per a no programadors

React és una biblioteca de JavaScript per crear interfícies d'usuari: la part de l'app que la gent veu i fa clic. Construeixes les pantalles amb peces reutilitzables anomenades components, com un botó, una targeta de producte o una pàgina sencera, i React manté la pantalla sincronitzada amb les dades: quan les dades canvien, React actualitza les parts de la pàgina que en depenen. Va ser creada a Facebook (ara Meta), és de codi obert i és una de les maneres més usades de construir apps web.

Per què importa quan crees amb IA

Si crees una app web amb una eina d'IA, hi ha moltes probabilitats que estigui escrita en React. Moltes eines de creació d'apps amb IA usen React per defecte, perquè és popular, està ben documentat i hi ha una quantitat enorme de codi React d'on han après els models d'IA.

No cal que escriguis React per crear amb IA. Però saber-ne una mica t'ajuda a:

• Descriure els canvis amb precisió. «Canvia el component ProductCard perquè el preu sigui en negreta» és més clar que «fes que els preus destaquin en algun lloc».
• Entendre els errors. Missatges com «Cannot read properties of undefined» o «Too many re-renders» tenen més sentit.
• Prendre decisions sensates. Les apps React pures es renderitzen al navegador, cosa que afecta la visibilitat a la cerca i la velocitat de la primera càrrega. Saber-ho t'ajuda a decidir quan cal demanar una configuració diferent.
• Treballar amb desenvolupadors més endavant. React és una habilitat habitual, així que un desenvolupador normalment pot agafar un codi base de React.

Una analogia del dia a dia

Pensa en LEGO. En lloc de tallar un model sencer d'un sol bloc, el construeixes amb peces estàndard. Unes poques peces fan una roda; quatre rodes i altres peces fan un cotxe. Si vols que totes les rodes siguin vermelles, canvies el disseny de la roda una sola vegada.

Les peces de React són els components. Un component Button s'usa dins d'un ProductCard, que s'usa dins d'un ProductGrid, que forma part de la ShopPage. Canvies Button una vegada i canvien tots els botons de l'app.

L'altra meitat de l'analogia: imagina que el model LEGO es reconstrueix sol cada cop que canvies les instruccions. Aquest és l'altre truc de React: descrius com ha de ser la pantalla per a les dades actuals, i React calcula què cal canviar a la pàgina.

Les idees bàsiques

Components

Un component és una funció de JavaScript que retorna un tros d'interfície. La documentació de React la descriu com una part de la UI que té la seva pròpia lògica i aspecte. Els noms dels components comencen amb majúscula.

JSX

Els components se solen escriure en JSX, que sembla HTML barrejat amb JavaScript:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX és opcional, però la documentació de React indica que la majoria de projectes l'usen. Es converteix en JavaScript pla abans d'executar-se al navegador.

Props

Les props són les entrades que passes a un component, com els ajustos d'una peça reutilitzable:

<ProductCard name="Lavender Candle" price={24} />

El mateix ProductCard pot mostrar qualsevol producte.

Estat

L'estat és informació que un component recorda i que pot canviar mentre l'app s'executa: si un menú està obert, què s'ha escrit en un quadre de cerca, quants articles hi ha al carretó. Quan l'estat canvia, React torna a renderitzar el component perquè la pantalla coincideixi.

Hooks

Els hooks són funcions els noms de les quals comencen per use, com useState (recordar un valor) i useEffect (executar codi després del renderitzat, per exemple per carregar dades). Els veuràs a tot el codi React generat amb IA.

Un exemple resolt: un comptador de carretó

Suposem que la teva botiga en línia té un botó «Afegeix al carretó» i una icona de carretó que mostra el nombre d'articles. En React seria aproximadament així:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

Què passa quan una persona que compra fa clic a «Afegeix al carretó»:

1. El onClick del botó crida onAdd, que crida setCartCount.
2. React actualitza l'estat cartCount de 0 a 1.
3. React torna a renderitzar Shop, passant count={1} a CartIcon.
4. La pàgina mostra ara «Cart (1)». Ningú ha escrit codi que digui «troba el text del carretó i canvia'l»: la pantalla segueix les dades.

Fixa't també en els límits. Aquest comptador viu a la memòria del navegador. Si refresques la pàgina, torna a 0. Per conservar un carretó, l'hauries de guardar en algun lloc durador: una cookie, l'emmagatzematge del navegador o una base de dades a través del teu backend. React gestiona la pantalla; no emmagatzema les teves dades.

On encaixa React en una aplicació web

Una app «Vite + React» es renderitza al navegador (una aplicació d'una sola pàgina, o SPA). Una app Next.js pot renderitzar primer les pàgines al servidor, cosa que ajuda els motors de cerca i la velocitat de la primera càrrega.

Termes comuns explicats

Errors habituals i idees equivocades

• «React és un llenguatge de programació». És una biblioteca escrita i usada des de JavaScript (o TypeScript).
• «React emmagatzema les meves dades». L'estat viu al navegador i desapareix en refrescar. Les dades que han de durar necessiten un backend i una base de dades.
• Posar secrets al codi de React. Tot el que hi ha en una app React s'envia al navegador del visitant. Les claus d'API allà són públiques. Guarda-les al servidor.
• «Les apps React no poden posicionar-se a la cerca». Un renderitzat només al client és més feble per a la cerca, però pre-renderitzar o renderitzar al servidor ho soluciona en gran part.
• Components gegants. Un component de 1.000 línies és difícil de canviar amb seguretat, tant per a les persones com per a la IA. Demana-n'hi de més petits.
• Creure que una app web React és una app de telèfon. S'executa al navegador, inclosos els mòbils, però no és una app de l'App Store.

Què demanar al teu creador d'apps amb IA

• «Divideix aquesta pàgina en components petits amb nom, i digues-me en quin fitxer està cadascun.»
• «Fes reutilitzable el component ProductCard, amb name, price i image com a props.»
• «Guarda el carretó a la base de dades perquè sobrevisqui a un refresc.»
• «Guarda totes les claus d'API al servidor; el codi de React ha de cridar a la nostra pròpia API.»
• «Afegeix estats de càrrega i d'error per a les dades que venen del servidor.»
• «Si la visibilitat a la cerca importa per a aquestes pàgines, pre-renderitza-les o usa una configuració renderitzada al servidor.»
• «Explica en llenguatge senzill què vol dir aquest error i de quin component ve.»

Per a la visió general, mira frontend vs backend, i per revisar el que ha escrit la IA, com revisar el codi generat per IA.

React a Mythex

Salvo que demanis una altra cosa, Mythex comença els projectes nous amb Vite + React + TypeScript + Tailwind, amb una vista prèvia en directe mentre xateges. Pots indicar una altra configuració en el teu primer prompt —per exemple «Usa Next.js» o «una pàgina de destinació HTML estàtica simple»— i Mythex la tria segons el que escriguis; no hi ha cap pantalla de configuració. La pàgina de la documentació sobre com es tria la tecnologia explica les opcions. L'editor de codi és només de lectura al pla gratuït; al Pro pots editar el codi React directament i exportar el projecte per continuar treballant-hi en un altre lloc.

Preguntes