React (web framework): differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m Bot: codifica, sostituzione o rimozione di caratteri unicode per spazi tipografici particolari |
m Eliminato il parametro "È software libero?" nel template "Software" |
||
| (36 versioni intermedie di 22 utenti non mostrate) | |||
Riga 1:
{{Software
|Sviluppatore = [[
|SistemaOperativo = multipiattaforma
|Genere =
|SitoWeb =
}}
'''React''' (noto anche come '''React.js''' o '''ReactJS''') è una libreria [[Open source|open-source]], [[Front-end e back-end|front-end]], [[JavaScript]]<ref name="react">{{Cita web|url=https://it.reactjs.org|titolo=React - Una libreria JavaScript per creare interfacce utente|accesso=22 marzo 2020}}</ref> per la creazione di [[Interfaccia utente|interfacce utente]]. È mantenuto da [[
React può essere utilizzato come base nello sviluppo di applicazioni a [[Single-page application|pagina singola]]
== Utilizzo di base ==
Di seguito è riportato un esempio rudimentale di utilizzo di React in HTML con [[ReactJS|JSX]] e JavaScript. <syntaxhighlight lang="
import React from 'react';
import ReactDOM from 'react-dom/client';
const Saluto = () => {
return (
<div className="hello-world">
<h1>Ciao, mondo!</h1>
</div>▼
);
ReactDOM.render(App, document.getElementById('myReactApp'));▼
};
const App = () => {
return <Saluto />;
};
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
</syntaxhighlight>
in base al documento HTML di seguito.
<syntaxhighlight lang="html" line="1">
<
<
<head>
<meta charset="utf-8" />
▲</div>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
</body>
</html>
</syntaxhighlight>
La funzione Saluto è un componente React che mostra il famoso "Hello, world" introduttivo.
== Caratteristiche degne di nota ==
=== Componenti ===
Riga 47 ⟶ 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 65 ⟶ 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 95 ⟶ 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 116 ⟶ 135:
</syntaxhighlight>
Quanto sopra renderà:
<syntaxhighlight lang="html" line="1">
<div>
<h1>true</h1>
Riga 139 ⟶ 158:
</syntaxhighlight>
Quanto sopra renderà:
<syntaxhighlight lang="html" line="1">
<div>
<div>Section 1</div>
Riga 146 ⟶ 165:
</div>
</syntaxhighlight>
Il codice scritto in JSX richiede la conversione con uno strumento come <nowiki><i>Babel</i></nowiki> prima di poter essere compreso dai browser web.<ref>{{Cita libro|autore=Fischer|nome=Ludovico|titolo=React for Real: Front-End Code, Untangled|url=https://books.google.it/books?id=Tg9QDwAAQBAJ|data=6 settembre 2017|editore=Pragmatic Bookshelf|lingua=en|ISBN=9781680504484}}</ref> Questa elaborazione viene generalmente effettuata nel corso
=== 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 ===
Gli hooks, introdotti dalla versione 16.8 (Febbraio 2019), sono funzioni che consentono agli sviluppatori di "agganciarsi" allo stato di React e alle caratteristiche del ciclo di vita dei componenti delle funzioni.<ref>{{Cita web|url=https://it.reactjs.org/docs/hooks-overview.html|titolo=Panoramica sugli Hooks|accesso=23 marzo 2020}}</ref> Rendono i codici leggibili e facilmente comprensibili. Gli hooks non funzionano all'interno delle classi: permettono infatti di utilizzare React senza classi.<ref>{{Cita web|url=https://blog.soshace.com/what-the-heck-is-react-hooks/|titolo=What the Heck is React Hooks?|cognome=Megida|nome=Dillion|sito=Soshace|data=16 gennaio 2020|lingua=en|accesso=23 marzo 2020}}</ref>
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="react" line="1">
const BirthdayComponent = () => {
const [myAge, setMyAge] = useState(16);
const handleClick = () => setMyAge(myAge + 1);
return (
<>
<p>My actual age is {myAge}.</p>
{myAge >= 18 && <p>... and now i'm adult</p>}
<button onClick={handleClick}>Add one year</button>
</>
);
};
</syntaxhighlight>
==== Regole degli Hooks ====
Riga 169 ⟶ 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 192 ⟶ 226:
{| class="wikitable"
|+Versioni
!Versione
!Data di pubblicazione
!Cambiamenti
|-
|0.3.0
Riga 202 ⟶ 236:
|0.4.0
|20 luglio 2013
|Supporto ai nodi di commento
|-
|0.5.0
Riga 210 ⟶ 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 238 ⟶ 272:
|15.0.0
|7 aprile 2016
|Il rendering iniziale ora utilizza document.createElement invece di generare HTML, Niente più
|-
|15.1.0
Riga 246 ⟶ 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 352 ⟶ 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 374 ⟶ 434:
* [[Angular]]
* [[Vue.js]]
== Altri progetti ==
{{interprogetto}}
== Collegamenti esterni ==
* {{Collegamenti esterni}}
{{Framework per applicazioni web}}
| |||