React (web framework): differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Corretto framework come da titolo Etichette: Ripristino manuale Modifica da mobile Modifica da web per mobile |
m Eliminato il parametro "È software libero?" nel template "Software" |
||
| (17 versioni intermedie di 9 utenti non mostrate) | |||
Riga 2:
|Sviluppatore = [[Meta Platforms|Meta]] e community
|SistemaOperativo = multipiattaforma
|Genere =
|SitoWeb =
}}
'''React''' (noto anche come '''React.js''' o '''ReactJS''') è
React può essere utilizzato come base nello sviluppo di applicazioni a [[Single-page application|pagina singola]] ma è utilizzabile anche su mobile tramite [[React Native]], una libreria sempre sviluppata da Meta che tramuta i componenti React in componenti nativi ([[iOS]] e [[Android]])<ref>{{Cita web|url=https://mobidev.biz/blog/how-react-native-app-development-works|titolo=How React Native App Development Works Under the Hood|autore=Stanislav|sito=MobiDev|lingua=en|accesso=3 aprile 2021}}</ref>. Tuttavia, React si occupa solo del rendering dei dati sul [[Document Object Model|DOM]], pertanto la creazione di applicazioni React richiede generalmente l'uso di librerie aggiuntive per lo state management e il routing.<ref>{{Cita web|url=https://medium.com/codecademy-engineering/react-router-to-redux-first-router-2fea05c4c2b7|titolo=React Router to Redux First Router|cognome=Samp|nome=Jon|sito=[[Medium (sito web)|Medium]]|data=13 gennaio 2018|lingua=en|accesso=22 marzo 2020}}</ref> Redux<ref>{{Cita web|url=https://redux.js.org|titolo=Redux - A predictable state container for JavaScript apps.|lingua=en|accesso=22 marzo 2020}}</ref> e React Router<ref>{{Cita web|url=https://reacttraining.com/react-router/|titolo=React Router: Declarative Routing for React.js|lingua=en|accesso=22 marzo 2020}}</ref> sono i rispettivi esempi<ref name="React">{{cita news|titolo=10+ calcolatrici di reazione gratuite e utili|url=https://gscode.in/react-calculators/|accesso=23 ottobre 2022|}}</ref> di tali librerie. A questo fine è possibile utilizzare anche dei framework terzi, come ad esempio [[Next.js]].<ref>{{Cita web|url=https://react.dev/learn/start-a-new-react-project|titolo=Start a New React Project – React|sito=react.dev|lingua=en|accesso=2023-12-06}}</ref>
== Utilizzo di base ==
Di seguito è riportato un esempio rudimentale di utilizzo di React in HTML con [[ReactJS|JSX]] e JavaScript. <syntaxhighlight lang="
import React
const Saluto = () => {
Riga 37 ⟶ 36:
in base al documento HTML di seguito.
<syntaxhighlight lang="html" line="1">
<head>
<meta charset="utf-8" /> <title>React App</title>
<noscript>You need to enable JavaScript to run this app.</noscript>
</html>
</syntaxhighlight>
La funzione Saluto è un componente React che mostra il famoso "Hello, world" introduttivo.
== Caratteristiche degne di nota ==
=== Componenti ===
Riga 67 ⟶ 66:
=== Componenti basati su classi ===
I componenti basati su classi vengono dichiarati utilizzando le classi [[ECMAScript|ES6]]. Sono anche noti come componenti "stateful", perché il loro stato può contenere valori in tutto il componente e può essere passato ai componenti figlio tramite props:
<syntaxhighlight lang="js" line="1">
class ParentComponent extends React.Component {
state = { color: 'green' };
Riga 85 ⟶ 84:
* <code>shouldComponentUpdate</code> consente allo sviluppatore di impedire il rendering non necessario di un componente restituendo false se non è richiesto un rendering.
* <code>componentDidMount</code> viene chiamato una volta che il componente è "montato" (il componente è stato creato nell'interfaccia utente, spesso associandolo a un nodo [[Document Object Model|DOM]]
* <code>componentWillUnmount</code> viene chiamato immediatamente prima che il componente venga demolito o "smontato". Questo è comunemente usato per cancellare dipendenze che richiedono risorse al componente che non saranno semplicemente rimosse con lo smontaggio del componente (ad esempio, la rimozione di qualsiasi istanza <code>setInterval()</code> che è correlata al componente o un "eventListener" impostato sul "documento" a causa della presenza del componente).
* <code>render</code> è il metodo di ciclo di vita più importante e l'unico richiesto in qualsiasi componente. Di solito viene chiamato ogni volta che viene aggiornato lo stato del componente, che dovrebbe riflettersi nell'interfaccia utente.
Riga 115 ⟶ 114:
==== Espressioni JavaScript ====
Le [[Espressione (informatica)|espressioni]] JavaScript (ma non le istruzioni) possono essere utilizzate all'interno di JSX con parentesi graffe <code>{}</code>:
<syntaxhighlight lang="
</syntaxhighlight> L'esempio sopra verrà così visualizzato: <syntaxhighlight lang="html">
</syntaxhighlight>
==== Dichiarazioni condizionali ====
Le istruzioni if-else non possono essere utilizzate all'interno di JSX ma è possibile utilizzare espressioni condizionali. L'esempio seguente mostrerà
<syntaxhighlight lang="
class App extends React.Component {
render() {
Riga 136 ⟶ 135:
</syntaxhighlight>
Quanto sopra renderà:
<syntaxhighlight lang="html" line="1">
<div>
<h1>true</h1>
Riga 159 ⟶ 158:
</syntaxhighlight>
Quanto sopra renderà:
<syntaxhighlight lang="html" line="1">
<div>
<div>Section 1</div>
Riga 169 ⟶ 168:
=== Architettura oltre HTML ===
L'architettura di base di React si applica oltre al rendering HTML nel browser. Ad esempio, Facebook ha grafici dinamici che eseguono il rendering in tag
=== Hooks di React ===
Riga 176 ⟶ 175:
React fornisce alcuni hook incorporati come <code>useState</code>,<ref>{{Cita web|url=https://it.reactjs.org/docs/hooks-state.html|titolo=Usare l'Hook State|accesso=23 marzo 2020}}</ref> <code>useContext</code>, <code>useReducer</code> e <code>useEffect</code><ref>{{Cita web|url=https://it.reactjs.org/docs/hooks-effect.html|titolo=Usare l'Hook Effect|lingua=en|accesso=23 marzo 2020}}</ref> per citarne alcuni. Sono tutti indicati nella guida alle API di riferimento degli Hooks.<ref>{{Cita web|url=https://it.reactjs.org/docs/hooks-reference.html|titolo=API di Riferimento degli Hooks|lingua=en|accesso=23 marzo 2020}}</ref> <code>useState</code> e <code>useEffect</code>, che sono i più utilizzati, sono utili al controllo rispettivamente degli stati e degli effetti collaterali nei componenti React.
Esempio di utilizzo di <code>useState</code> in un componente funzionale.<syntaxhighlight lang="
const BirthdayComponent = () => {
const [myAge, setMyAge] = useState(16);
Riga 204 ⟶ 203:
=== Uso dell'architettura Flux ===
Per supportare il concetto di flusso di dati unidirezionale di React (che va in contrasto con il flusso bidirezionale di [[AngularJS]]), l'architettura Flux rappresenta un'alternativa alla popolare architettura [[Model-view-controller|modello-view-controller]]. Flux include le ''azioni'' che vengono inviate tramite un ''dispatcher'' centrale a uno ''store'' e le modifiche a quest'ultimo vengono propagate alla vista.<ref name="flux">{{Cita web|url=https://facebook.github.io/flux/docs/in-depth-overview|titolo=In-Depth Overview|sito=facebook.github.io/flux|lingua=en|accesso=23 marzo 2020|dataarchivio=7 agosto 2022|urlarchivio=https://web.archive.org/web/20220807201252/https://facebook.github.io/flux/docs/in-depth-overview/|urlmorto=sì}}</ref> Se utilizzata con React, questa propagazione viene eseguita attraverso le proprietà del componente.
Flux può essere considerato una variante dell'[[Observer pattern]].<ref>{{Cita web|url=http://nicholasjohnson.com/react/course/exercises/flux/|titolo=Introduction to Flux - React Exercise|lingua=en|accesso=23 marzo 2020}}</ref>
Riga 227 ⟶ 226:
{| class="wikitable"
|+Versioni
!Versione
!Data di pubblicazione
!Cambiamenti
|-
|0.3.0
Riga 237 ⟶ 236:
|0.4.0
|20 luglio 2013
|Supporto ai nodi di commento
|-
|0.5.0
Riga 245 ⟶ 244:
|0.8.0
|20 dicembre 2013
|Aggiunto supporto a righe e colonne, defer e async, loop per {{Codice|codice=<audio>|linguaggio=HTML}} e {{Codice|codice=<video>|linguaggio=HTML}}, attributi di autoCorrect. Aggiunti eventi onContextMenu, aggiornati jstransform, esprima-fb e browserify.
|-
|0.9.0
Riga 273 ⟶ 272:
|15.0.0
|7 aprile 2016
|Il rendering iniziale ora utilizza document.createElement invece di generare HTML, Niente più
|-
|15.1.0
Riga 281 ⟶ 280:
|15.2.0
|1[[1º maggio|º]] luglio 2016
|Inclusione informazioni sullo stack dei componenti, rimossa la convalida dei props al momento del montaggio, aggiunti React.PropTypes.symbol, gestione onLoad a <nowiki><link></nowiki>, gestione onError all'elemento {{Codice|codice=<nowiki><source></nowiki>|linguaggio=HTML}}, API isRunning(), corretta regressione sulle prestazioni.
|-
|15.3.0
Riga 387 ⟶ 386:
|26 febbraio 2020
|Funzionalità aggiunte in modalità React Concurrent. Corrette regressioni nella libreria principale di React e React Dom.
|-
|16.14.0
|14 ottobre 2020
|Aggiunto nuovo supporto per le trasformazioni JSX
|-
|17.0.0
|20 ottobre 2020
|Rimozione del pool di eventi, aggiornamenti all'algoritmo di riconciliazione dell'albero, migliore gestione degli errori e aumentato supporto per i portali.
|-
|17.0.1
|22 ottobre 2020
|Fixato crash su IE11
|-
|17.0.22
|22 marzo 2021
|Rimossa una dipendenza inutilizzata su SharedArrayBuffer (cross-origin-isolation warning)
|-
|18.0.0
|29 marzo 2022
|Introdotti 5 nuovi hook useId, useInsertionAffect, useTransition, useDeferredValue e useSyncExternalStore.
Nuove API quali createRoot che sostituisce ReactDOM.render, hydrateRoot che sostituisce ReactDOM.hydrate
Batch automatico (evita re-render indesiderati unendo tutti i setState)
|-
|18.1.0
|26 aprile 2022
|Risolti vari problemi su react-dom/client, componentWillUnmount e alcuni messaggi di warning
|}
Riga 409 ⟶ 434:
* [[Angular]]
* [[Vue.js]]
== Altri progetti ==
{{interprogetto}}
== Collegamenti esterni ==
| |||