Che cos'è React? Una guida in parole semplici per chi non programma

React è una libreria JavaScript per creare interfacce utente, cioè la parte di un'app che le persone vedono e con cui interagiscono. Costruisci le schermate con pezzi riutilizzabili chiamati componenti, come un pulsante, una scheda prodotto o un'intera pagina, e React mantiene la schermata sincronizzata con i tuoi dati: quando i dati cambiano, React aggiorna le parti della pagina che ne dipendono. È stato creato in Facebook (oggi Meta), è open source ed è uno dei modi più diffusi per creare app web.

Perché conta quando crei con l'AI

Se crei un'app web con uno strumento AI, c'è una buona probabilità che sia scritta in React. Molti builder di app AI usano React per impostazione predefinita, perché è popolare, ben documentato e c'è una quantità enorme di codice React da cui i modelli AI hanno potuto imparare.

Non devi scrivere React per creare con l'AI. Ma sapere un po' di React ti aiuta a:

• Descrivere le modifiche con precisione. « Cambia il componente ProductCard così il prezzo è in grassetto » è più chiaro di « fai risaltare i prezzi da qualche parte ».
• Capire gli errori. Messaggi come « Cannot read properties of undefined » o « Too many re-renders » diventano più comprensibili.
• Fare scelte sensate. Le app React semplici vengono renderizzate nel browser, il che incide sulla visibilità nei motori di ricerca e sulla velocità del primo caricamento. Saperlo ti aiuta a decidere quando chiedere una configurazione diversa.
• Lavorare con gli sviluppatori in seguito. React è una competenza comune, quindi uno sviluppatore può di solito riprendere in mano un progetto React.

Un'analogia quotidiana

Pensa al LEGO. Invece di scolpire un intero modello da un solo blocco, lo costruisci con mattoncini standard. Pochi mattoncini fanno una ruota; quattro ruote e altri pezzi fanno un'auto. Se vuoi che ogni auto abbia ruote rosse, cambi il design della ruota una volta sola.

I componenti React sono i mattoncini. Un componente Button è usato dentro una ProductCard, che è usata dentro una ProductGrid, che fa parte della ShopPage. Cambi Button una volta, e ogni pulsante dell'app cambia.

L'altra metà dell'analogia: immagina che il modello LEGO si ricostruisca da solo ogni volta che cambi le istruzioni. È l'altro trucco di React: descrivi come deve apparire la schermata per i dati attuali, e React capisce cosa cambiare nella pagina.

Le idee fondamentali

Componenti

Un componente è una funzione JavaScript che restituisce un pezzo di interfaccia. La documentazione di React descrive un componente come una parte dell'interfaccia che ha una propria logica e un proprio aspetto. I nomi dei componenti iniziano con una lettera maiuscola.

JSX

I componenti di solito si scrivono in JSX, che assomiglia a HTML mescolato con JavaScript:

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

JSX è facoltativo, ma la documentazione di React osserva che la maggior parte dei progetti lo usa. Viene convertito in JavaScript semplice prima di essere eseguito nel browser.

Props

Le props sono gli input che passi a un componente, come le impostazioni di un pezzo riutilizzabile:

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

Lo stesso ProductCard può mostrare qualsiasi prodotto.

Stato

Lo stato è un'informazione che un componente ricorda e che può cambiare mentre l'app è in esecuzione: se un menu è aperto, cosa è scritto in una casella di ricerca, quanti articoli ci sono nel carrello. Quando lo stato cambia, React ri-renderizza il componente così la schermata corrisponde.

Hook

Gli hook sono funzioni il cui nome inizia con use, come useState (ricorda un valore) e useEffect (esegue codice dopo il rendering, ad esempio per caricare dati). Li vedrai dappertutto nel codice React generato dall'AI.

Un esempio pratico: un contatore del carrello

Supponiamo che il tuo negozio online abbia un pulsante « Aggiungi al carrello » e un'icona del carrello che mostra il numero di articoli. In React sarebbe più o meno così:

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>Carrello ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Aggiungi al carrello</button>
    </div>
  );
}

Cosa succede quando un cliente clicca su « Aggiungi al carrello »:

1. Il onClick del pulsante chiama onAdd, che chiama setCartCount.
2. React aggiorna lo stato cartCount da 0 a 1.
3. React ri-renderizza Shop, passando count={1} a CartIcon.
4. La pagina ora mostra « Carrello (1) ». Nessuno ha scritto codice che dice « trova il testo del carrello e cambialo »: la schermata segue i dati.

Ci sono anche dei limiti da notare. Questo conteggio vive nella memoria del browser. Se ricarichi la pagina torna a 0. Per conservare il carrello dovresti salvarlo in un posto duraturo: un cookie, l'archiviazione del browser o un database tramite il tuo backend. React gestisce la schermata; non memorizza i tuoi dati.

Dove si colloca React in un'app web

Un'app « Vite + React » viene renderizzata nel browser (una single-page app). Un'app Next.js può renderizzare le pagine sul server per prime, il che aiuta i motori di ricerca e la velocità del primo caricamento.

Termini comuni spiegati

Errori comuni e idee sbagliate

• « React è un linguaggio di programmazione. » È una libreria scritta e usata con JavaScript (o TypeScript).
• « React salva i miei dati. » Lo stato vive nel browser e scompare al ricaricamento. I dati duraturi richiedono un backend e un database.
• Mettere segreti nel codice React. Tutto ciò che è in un'app React viene inviato al browser del visitatore. Le chiavi API lì sono pubbliche. Tienile sul server.
• « Le app React non possono posizionarsi nella ricerca. » Il rendering solo lato client è più debole per la ricerca, ma il pre-rendering o il rendering lato server risolvono gran parte del problema.
• Componenti giganteschi. Un componente di 1.000 righe è difficile da modificare in sicurezza, sia per le persone sia per l'AI. Chiedi di farli più piccoli.
• Pensare che un'app web React sia un'app per il telefono. Gira nel browser, anche sui telefoni, ma non è un'app dell'App Store.

Cosa chiedere al tuo builder AI

• « Dividi questa pagina in piccoli componenti con nome e dimmi in quale file si trova ciascuno. »
• « Rendi il componente ProductCard riutilizzabile, con nome, prezzo e immagine come props. »
• « Salva il carrello nel database così sopravvive a un ricaricamento. »
• « Tieni tutte le chiavi API sul server; il codice React deve chiamare la nostra API. »
• « Aggiungi stati di caricamento ed errore per i dati che arrivano dal server. »
• « Se la visibilità nei motori di ricerca conta per queste pagine, pre-renderizzale o usa una configurazione con rendering lato server. »
• « Spiegami in italiano semplice cosa significa questo errore e da quale componente proviene. »

Per il quadro generale, vedi frontend e backend, e per rivedere ciò che ha scritto l'AI, come controllare il codice generato dall'AI.

React in Mythex

Salvo richiesta diversa, Mythex avvia i nuovi progetti con Vite + React + TypeScript + Tailwind, con un'anteprima dal vivo in esecuzione mentre chatti. Nella prima richiesta puoi indicare un'altra configurazione, ad esempio « Usa Next.js » oppure « pagina di destinazione statica in HTML semplice », e Mythex la sceglie da ciò che scrivi: non esiste una schermata delle impostazioni per questo. La pagina della documentazione su come viene scelta la tecnologia spiega le opzioni. L'editor del codice è in sola lettura nel piano Free; nel piano Pro puoi modificare direttamente il codice React ed esportare il progetto per continuare a lavorarci altrove.

Domande