Molti sviluppatori che conoscono bene HTML e CSS si avvicinano a React con una sensazione ricorrente:
“Non è difficile… ma non mi entra in testa.”
Il problema non è React.
E non è nemmeno il fatto che “serva JavaScript avanzato”.
👉 Il vero problema è che lo stai affrontando con il modello mentale sbagliato.
Se vieni da HTML e CSS, è naturale pensare che React sia:
- HTML scritto in JavaScript
- un modo più moderno di costruire interfacce
- una semplice evoluzione del markup
Ed è proprio qui che inizi a rallentare.
React non è HTML evoluto.
È un modo completamente diverso di pensare l’interfaccia.
Perché HTML e CSS non ti preparano a React come credi
HTML e CSS ti insegnano una cosa fondamentale:
descrivere una struttura statica.
Scrivi markup, applichi stili, il browser renderizza.
Il flusso mentale è lineare.
React nasce per risolvere un problema diverso:
interfacce che cambiano nel tempo.
In React non stai dicendo:
“Questa è la pagina”
Stai dicendo:
“Se lo stato è questo, l’interfaccia deve apparire così”
È lo stesso cambio di prospettiva spiegato nella documentazione ufficiale quando si parla di pensare in React: prima lo stato, poi il rendering.
Se continui a ragionare in termini di:
- “aggiungo un elemento”
- “modifico il DOM”
- “mostro o nascondo un div”
stai lavorando contro React, non con React.
Il vero cambio di paradigma: UI come funzione, non come struttura
In React l’interfaccia non è più un insieme di elementi.
È il risultato di una funzione.
Concettualmente:
UI = f(stato)
Questo significa che:
- non “aggiorni” l’interfaccia manualmente
- non manipoli il DOM
- non pensi in termini di azioni visive
Tu cambi lo stato, e React ridisegna l’interfaccia.
È il cuore del modello dichiarativo di React, in cui non controlli come avviene il cambiamento, ma cosa deve essere mostrato in base allo stato corrente, come spiegato anche nella panoramica MDN su React.
Questo è destabilizzante per chi arriva da HTML e CSS perché:
- perdi il controllo diretto
- non “vedi” più il processo passo dopo passo
- devi fidarti del framework
Ma è esattamente questo che rende React scalabile.
I componenti NON sono div più intelligenti
Uno degli errori più comuni è pensare ai componenti React come a:
“blocchi HTML riutilizzabili”
Sbagliato.
Un componente React è:
- una funzione
- con uno stato
- che produce interfaccia
Non serve a organizzare il layout.
Serve a organizzare il comportamento.
Se crei componenti solo per “ordine visivo”:
- frammenti il codice
- aumenti la complessità
- rallenti l’apprendimento
In React, la struttura segue la logica, non il contrario.
Errori tipici di chi arriva da HTML e CSS
Se React ti sembra più difficile del necessario, probabilmente stai facendo uno (o più) di questi errori.
❌ Pensare in termini di DOM
In React non:
- selezioni elementi
- aggiungi classi manualmente
- modifichi attributi
Se stai cercando document.querySelector, sei nel posto sbagliato.
❌ Scrivere “HTML dentro JavaScript”
JSX assomiglia a HTML, ma non è HTML.
È solo una sintassi che rende leggibile la descrizione dell’interfaccia.
Se lo tratti come markup puro, perdi il senso di React.
❌ Usare lo stato come una variabile normale
Lo stato non è una variabile.
È una fonte di verità che governa il rendering.
Provare a modificarlo “come prima” rompe completamente il modello.
❌ Separare markup e logica come nel web tradizionale
In React:
- markup e logica convivono
- non per comodità
- ma perché la UI dipende dalla logica
Tentare di separarli rigidamente crea solo confusione.
Cosa imparare subito (e cosa puoi ignorare all’inizio)
Se vieni da HTML e CSS, non serve studiare tutto.
Impara subito:
- componenti funzionali
- props
- stato (
useState) - rendering condizionale
- concetto di immutabilità
Puoi tranquillamente rimandare:
- ottimizzazioni premature
- hook avanzati
- state management globale
- pattern complessi
- performance tuning
React diventa difficile quando cerchi di anticiparlo.
React non sostituisce HTML e CSS (li usa diversamente)
HTML e CSS non spariscono.
Semplicemente cambiano ruolo.
- HTML diventa linguaggio di descrizione
- CSS rimane responsabile di layout e stile
- React governa quando e perché qualcosa appare
Se sei bravo in HTML e CSS:
👉 non stai buttando competenze
👉 stai cambiando prospettiva
Conclusione: React non è difficile, è diverso
React non è più complesso di HTML e CSS.
È solo più onesto.
Ti obbliga a:
- pensare allo stato
- accettare il cambiamento
- rinunciare al controllo diretto
Chi arriva da HTML e CSS e capisce questo passaggio mentale accelera molto più velocemente di chi studia API a memoria.
Il vero salto non è imparare React.
È disimparare il modo sbagliato di usarlo.
Vuoi continuare da qui?
Se ora il modello mentale è più chiaro, il passo successivo naturale è capire come progettare componenti senza ricreare il caos del DOM tradizionale.
👉 React: come progettare componenti senza pensare in HTML
