React (web framework): differenze tra le versioni

Versione delle 01:07, 1 apr 2020

Versione attuale delle 09:31, 19 nov 2024

(39 versioni intermedie di 24 utenti non mostrate)

Riga 1:

{{Software

|Sviluppatore = [[FacebookMeta Platforms|Meta]] e community

|Logo = React-icon.svg

|Sviluppatore = [[Facebook]] e community

|SistemaOperativo = multipiattaforma

|Genere = weblibreria frameworkjavascript

|SoftwareLibero = sì

|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=2020-03-22 marzo 2020}}</ref> per la creazione di [[Interfaccia utente|interfacce utente]]. È mantenuto da [[FacebookMeta Platforms|Meta]] (già Facebook) e da una comunità di singoli sviluppatori e aziende.<ref>{{Cita news|lingua=en|nome=Paul|cognome=Krill|url=https://www.infoworld.com/article/2608181/react--making-faster--smoother-uis-for-data-driven-web-apps.html|titolo=React: Making faster, smoother UIs for data-driven Web apps|pubblicazione=[[InfoWorld]]|data=2014-05-15 maggio 2014|accesso=2020-03-22 marzo 2020}}</ref><ref>{{Cita news|lingua=en|nome=Zef|cognome=Hemel|url=https://www.infoq.com/news/2013/06/facebook-react/|titolo=Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews|pubblicazione=InfoQ|data=3 giugno 2013-06-03|accesso=2020-03-22 marzo 2020}}</ref><ref>{{Cita news|lingua=en|nome=Chris|cognome=Dawson|url=https://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/|titolo=JavaScript’s History and How it Led To ReactJS|pubblicazione=The New Stack|data=2014-07-25 luglio 2014|accesso=2020-03-22 marzo 2020}}</ref>

React può essere utilizzato come base nello sviluppo di applicazioni a [[Single-page application|pagina singola]] oma è 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=2018-01-13 gennaio 2018|lingua=en|accesso=2020-03-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=2020-03-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=2020-03-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="htmlreact" line="1">

import React from 'react';

<div id="myReactApp"></div>

import ReactDOM from 'react-dom/client';

const Saluto = () => {

<script type="text/babel">

return (

function Greeter(props) {

<div className="hello-world">

return <h1>{props.greeting}</h1>

<h1>Ciao, mondo!</h1>

}

</div>

var App = <Greeter greeting="Hello World!" />;

);

ReactDOM.render(App, document.getElementById('myReactApp'));

};

</script>

const App = () => {

return <Saluto />;

};

const root = ReactDOM.rendercreateRoot(App, document.getElementById('myReactApproot'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

</syntaxhighlight>

in base al documento HTML di seguito.

La funzione <code>Greeter</code> è un componente React che accetta una proprietà <code>greeting</code>. La variabile <code>App</code> è un'istanza del componente <code>Greeter</code> cui la proprietà <code>greeting</code> è impostata a <code>'Hello World!'</code>. Il metodo <code>ReactDOM.render</code> esegue quindi il rendering del nostro componente Greeter all'interno dell'elemento [[Document Object Model|DOM]] con id <code>myReactApp</code>.

<syntaxhighlight lang="html" line="1">

Visualizzato in un browser Web, il risultato sarà:

<syntaxhighlight!DOCTYPE lang="html">

<divhtml idlang="myReactAppen">

<head>

<h1>Hello World!</h1>

<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 ===

Il codice di React è costituito da entità denominate componenti. I componenti possono essere sottoposti a rendering su un particolare elemento nel [[Document Object Model|DOM]] usando la libreria React DOM. Quando si esegue il rendering di un componente, si possono passare valori noti come "props"<ref>{{Cita web|url=https://it.reactjs.org/docs/components-and-props.html|titolo=Componenti e Props|accesso=2020-03-22 marzo 2020}}</ref>:

<syntaxhighlight lang="js">

ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));

Riga 48 ⟶ 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 60 ⟶ 78:

=== DOM virtuale ===

Un'altra caratteristica notevole è l'uso di un [[Document Object Model]] (DOM) virtuale. React crea una cache della struttura dati in-memory, calcola le differenze risultanti e quindi aggiorna in modo efficiente il DOM visualizzato dal browser.<ref name="workingwiththebrowser">{{Cita web|url=https://it.reactjs.org/docs/refs-and-the-dom.html|titolo=Refs ed il DOM|lingua=en|accesso=2020-03-22 marzo 2020}}</ref> Ciò consente al programmatore di scrivere codice come se l'intera pagina fosse renderizzata su ogni modifica, mentre le librerie React eseguono il rendering solo dei sottocomponenti che cambiano effettivamente.

=== Metodi del ciclo di vita ===

Riga 66 ⟶ 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]] ). Questo è comunemente usato per attivare il caricamento dei dati da una fonte remota tramite un'[[Application programming interface|API]].

* <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.

=== JSX ===

JSX, o JavaScript [[XML]], è un'estensione della sintassi del linguaggio JavaScript.<ref>{{Cita web|url=https://facebook.github.io/jsx/|titolo=Draft: JSX Specification|lingua=en|accesso=2020-03-22 marzo 2020}}</ref> Simile nell'aspetto all'HTML, JSX fornisce un modo per strutturare il rendering dei componenti usando una sintassi familiare a molti sviluppatori. I componenti di React sono in genere scritti usando JSX, sebbene non debbano esserlo (i componenti possono anche essere scritti in puro JavaScript). JSX è simile a un'altra sintassi di estensione creata da Facebook per [[PHP]] chiamata XHP.

Un esempio di codice JSX:

Riga 89 ⟶ 107:

==== Elementi nidificati ====

Elementi multipli sullo stesso livello devono essere racchiusi in un singolo elemento contenitore come l'elemento <code><nowiki><div></nowiki></code> mostrato sopra o restituiti come matrice.<ref>{{Cita web|url=https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings|titolo=React v16.0§New render return types: fragments and strings|cognome=Clark|nome=Andrew|sito=React Blog|data=2017-09-26 settembre 2017|lingua=en|accesso=2020-03-22 marzo 2020}}</ref>

==== Attributi ====

JSX offre una gamma di attributi di elemento progettati per rispecchiare quelli forniti da HTML. Possono essere passati al componente anche attributi personalizzati.<ref>{{Cita web|url=https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes|titolo=React v16.0§Support for custom DOM attributes|cognome=Clark|nome=Andrew|sito=React Blog|data=2017-09-26 settembre 2017|lingua=en|accesso=2020-03-22 marzo 2020}}</ref> Tutti gli attributi verranno ricevuti dal componente come props.

==== 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="jsreact">

<h1>{10+1}</h1>

</syntaxhighlight> L'esempio sopra verrà così visualizzato: <syntaxhighlight lang="html">

<h1>11</h1>

</syntaxhighlight>

==== Dichiarazioni condizionali ====

Le istruzioni if-else non possono essere utilizzate all'interno di JSX ma è possibile utilizzare espressioni condizionali. L'esempio seguente mostrerà <code>{{Codice|codice={ i === 1 ? 'true' : 'false' }</code>|linguaggio=JavaScript}} come stringa <code>{{Codice|codice='true'</code>|linguaggio=JavaScript}} perché <code>i</code> è uguale a 1.

<syntaxhighlight lang="jsreact" line="1">

class App extends React.Component {

render() {

Riga 117 ⟶ 135:

</syntaxhighlight>

Quanto sopra renderà:

<syntaxhighlight lang="html" line="1">

<div>

<h1>true</h1>

Riga 140 ⟶ 158:

</syntaxhighlight>

Quanto sopra renderà:

<syntaxhighlight lang="html" line="1">

<div>

<div>Section 1</div>

Riga 147 ⟶ 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-09-06|editore=Pragmatic Bookshelf|lingua=en|ISBN=9781680504484}}</ref> Questa elaborazione viene generalmente effettuata nel corso didel unaprocesso di [[Build (informatica)|costruzione del software]] processo, prima che l'applicazione vienevenga [[Deployment|distribuita]].

=== 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 <code><nowiki>{{Codice|codice=<canvas></nowiki></code>|linguaggio=HTML}}<ref>{{Cita web|url=https://reactjs.org/blog/2013/06/05/why-react.html|titolo=Why did we build React?|cognome=Hunt|nome=Pete|sito=React Blog|data=5 giugno 2013-06-05|lingua=en|accesso=23 marzo 2020-03-23}}</ref> e Netflix e [[PayPal]] utilizzano il caricamento universale per eseguire il rendering di HTML identico sia sul server che sul client.<ref name="paypal-isomorphic-reactjs">{{Cita web|url=https://medium.com/paypal-engineering/isomorphic-react-apps-with-react-engine-17dae662379c|titolo=Isomorphic React Apps with React-Engine|autore=[[PayPal|PayPal Engineering]]|sito=[[Medium (sito web)|Medium]]|data=2015-04-27 aprile 2015|lingua=en|accesso=2020-03-23 marzo 2020}}</ref><ref name="netflix-isomorphic-reactjs">{{Cita web|url=https://netflixtechblog.com/netflix-likes-react-509675426db|titolo=Netflix Likes React|autore=[[Netflix]] Technology Blog|sito=[[Medium (sito web)|Medium]]|data=2015-01-28 gennaio 2015|lingua=en|accesso=2020-03-23 marzo 2020}}</ref>

=== 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=2020-03-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=2020-01-16 gennaio 2020|lingua=en|accesso=2020-03-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=2020-03-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=2020-03-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=2020-03-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 ====

Ci sono anche regole degli hooks<ref>{{Cita web|url=https://it.reactjs.org/docs/hooks-rules.html|titolo=Regole degli Hooks|accesso=2020-03-23 marzo 2020}}</ref> che devono essere seguite prima che gli stessi possano essere utilizzati:

# Gli hooks devono essere chiamati solo al livello più alto (non all'interno di loop o istruzioni ''if'').

Riga 164 ⟶ 197:

==== Hooks personalizzati ====

La creazione di hooks personalizzati<ref>{{Cita web|url=https://it.reactjs.org/docs/hooks-custom.html|titolo=Hooks Personalizzati|accesso=2020-03-23 marzo 2020}}</ref> consente di estrarre la logica dei componenti in funzioni riutilizzabili. Un hook personalizzato è una funzione JavaScript il cui nome inizia con "use" e che può chiamare altri hooks. Le regole generali degli hooks si applicano anche a quelli personalizzati.

== Idiomi comuni ==

Riga 170 ⟶ 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-03depth-23overview/|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=2020-03-23 marzo 2020}}</ref>

Un componente React sotto l'architettura Flux non dovrebbe modificare direttamente alcun oggetto prop, ma dovrebbe essere passato alle funzioni di callback che creano ''azioni'' inviate dal dispatcher per modificare lo store. L'azione è un oggetto la cui responsabilità è descrivere ciò che è accaduto: ad esempio, un'azione che descrive un utente che "segue" un altro potrebbe contenere un ID utente, un ID utente di destinazione e il tipo <code>USER_FOLLOWED_ANOTHER_USER</code>.<ref>{{Cita web|url=http://threedevsandamaybe.com/the-history-of-react-and-flux-with-dan-abramov/|titolo=The History of React and Flux with Dan Abramov|cognome=Abramov|nome=Dan|sito=Three Devs and a Maybe|data=6 novembre 2015-11-06|lingua=en|accesso=2020-03-23 marzo 2020}}</ref> Gli store, che possono essere pensati come modelli, possono modificarsi in risposta alle azioni ricevute dal dispatcher.

Questo modello viene talvolta espresso come "properties flow down, actions flow up". Molte implementazioni di Flux sono state create sin dalla sua nascita, delle quali forse la più nota è Redux, che dispone di un singolo store, spesso chiamato una ''single source of truth (SSOT)''.<ref>{{Cita web|url=https://2017.stateofjs.com/2017/state-management/results/|titolo=State Management Tools - Results|sito=The State of JavaScript|lingua=en|accesso=2020-03-23 marzo 2020}}</ref>

== Sviluppo futuro ==

Lo stato del progetto può essere monitorato tramite il forum di discussione del core team.<ref>{{Cita web|url=https://it.reactjs.org/community/support.html|titolo=Where To Get Support|lingua=en|accesso=2020-03-23 marzo 2020}}</ref> Tuttavia, le principali modifiche a React passano attraverso i repository issues e le [[Controllo versione distribuito|richieste di pull]] di Future of React.<ref>{{Cita web|url=https://github.com/reactjs/react-future|titolo=The Future of React(?)|sito=[[GitHub]]|accesso=2020-03-23 marzo 2020}}</ref><ref>{{Cita web|url=https://github.com/facebook/react/labels/Type:%20Feature%20Request|titolo=Issues · facebook/react|sito=[[GitHub]]|accesso=2020-03-23 marzo 2020}}</ref> Ciò consente alla comunità di React di fornire feedback sulle nuove potenziali funzionalità, sulle API sperimentali e sui miglioramenti della sintassi JavaScript.

== Storia ==

React è stato creato da Jordan Walke, un ingegnere software di Facebook, che lo ha chiamato inizialmente "FaxJS".<ref>{{Cita web|url=https://github.com/jordwalke/FaxJs|titolo=jordwalke/FaxJs: Fax Javascript Ui Framework|sito=[[GitHub]]|accesso=2020-03-23 marzo 2020}}</ref> È stato influenzato da XHP, una libreria di componenti [[HTML]] per [[PHP]] . È stato utilizzato inizialmente sul News Feed di Facebook nel 2011 e successivamente su [[Instagram]] nel 2012.<ref>{{YouTube|autore=TXJS|A0Kj49z6WdM|Pete Hunt {{!}} TXJS 2015|accesso=2020-03-23 marzo 2020|lingua=en|data=2015-07-28 luglio 2015}}</ref> È stato rilasciato al pubblico al JSConf US del maggio 2013.<ref name="papp">{{Cita news|lingua=en|nome=Ferenc|cognome=Hámori|url=https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/|titolo=The History of React.js on a Timeline|pubblicazione=RisingStack|data=4 aprile 2018-04-04|accesso=2020-03-23 marzo 2020}}</ref>

React Native, che consente lo sviluppo nativo di [[Android]], [[iOS]] e [[Universal Windows Platform|UWP]] con React, è stato annunciato al React Conf di Facebook a febbraio 2015 e rilasciato a marzo 2015.

Il 18 aprile 2017, Facebook ha annunciato React Fiber, un nuovo algoritmo di base della libreria React per la creazione di [[Interfaccia utente|interfacce utente]].<ref>{{Cita news|cognome=Frederic Lardinois|url=https://techcrunch.com/2017/04/18/facebook-announces-react-fiber-a-rewrite-of-its-react-framework/|titolo=Facebook announces React Fiber, a rewrite of its React library|editore=TechCrunch|data=18 Aprilaprile 2017|accesso=19 Aprilaprile 2017}}</ref> React Fiber è stato pensato come fondamento per eventuali miglioramenti e sviluppi futuri della libreria React.<ref>{{Cita web|url=https://github.com/acdlite/react-fiber-architecture|titolo=React Fiber Architecture|sito=[[GitHub]]|accesso=2020-03-23 marzo 2020}}</ref>

Il 26 settembre 2017, è stato rilasciato al pubblico React 16.0.<ref>{{Cita web|url=https://reactjs.org/blog/2017/09/26/react-v16.0.html|titolo=React v16.0|cognome=Clark|nome=Andrew|data=2017-09-26 settembre 2017|lingua=en|accesso=2020-03-23 marzo 2020}}</ref>

Il 16 febbraio 2019, è stato rilasciato al pubblico React 16.8.<ref>{{Cita web|url=https://reactjs.org/blog/2019/02/06/react-v16.8.0.html|titolo=React v16.8: The One With Hooks|cognome=Abramov|nome=Dan|sito=React Blog|data=6 febbraio 2019-02-06|lingua=en|accesso=2020-03-23 marzo 2020}}</ref> Il rilascio ha introdotto gli hooks.<ref>{{Cita web|url=https://it.reactjs.org/docs/hooks-intro.html|titolo=Introduzione agli Hooks|accesso=2020-03-23 marzo 2020}}</ref>

{| class="wikitable"

|+Versioni

!Versione

!Version

!Data di pubblicazione

!Release Date

!Cambiamenti

!Changes

|-

|0.3.0

Riga 203 ⟶ 236:

|0.4.0

|20 luglio 2013

|Supporto ai nodi di commento <nowiki>{{Codice|codice=<div>{/* */}</div></nowiki>|linguaggio=React}}, API di rendering lato server migliorate, rimosso React.autoBind, supporto per il prop key, miglioramenti ai moduli, bug corretti.

|-

|0.5.0

Riga 211 ⟶ 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 239 ⟶ 272:

|15.0.0

|7 aprile 2016

|Il rendering iniziale ora utilizza document.createElement invece di generare HTML, Niente più <nowiki>{{Codice|codice=<span>|linguaggio=HTML}} extra, supporto SVG migliorato, ReactPerf.getLastMeasurements () è opaco, nuove deprecazioni introdotte con un avviso, risolte diversi piccoli leak di memoria, React DOM ora supporta gli attributi HTML cite e profile e le proprietà CSS cssFloat, gridRow e gridColumn.</nowiki>

|-

|15.1.0

Riga 247 ⟶ 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.</nowiki>

|-

|15.3.0

Riga 279 ⟶ 312:

|15.6.0

|13 giugno 2017

|Aggiunto supporto alle variabili CSS nell'attributo di stile e nelle proprietà di stile della Grid, corretto supporto AMD per i componenti aggiuntivi in ​​basebase a react, rimossa dipendenza non necessaria, aggiunto avviso di deprecazione per gli helper di factory React.createClass e React.DOM.

|-

|16.0.0

Riga 353 ⟶ 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

|}

=== Licensing ===

La versione pubblica iniziale di React a maggio 2013 utilizzava la [[Licenza Apache|licenza Apache 2.0]]. Nell'ottobre 2014, React 0.12.0 l'ha sostituita con la [[Licenze BSD|licenza BSD a 3 clausole]] e ha aggiunto un file di testo PATENTS separato che dà il consenso l'utilizzo di eventuali brevetti di Facebook relativi al software:<ref>{{Cita web|url=https://github.com/facebook/react/blob/master/CHANGELOG.md#0120-october-28-2014|titolo=React CHANGELOG.md|sito=[[GitHub]]|lingua=en|accesso=2020-03-25 marzo 2020}}</ref>

<blockquote> La licenza concessa nel presente documento terminerà, automaticamente e senza preavviso, per chiunque faccia qualsiasi reclamo (anche presentando qualsiasi azione legale, asserzione o altra azione) relativa a (a) violazione o induzione diretta, indiretta o contributiva a violare qualsiasi brevetto: (i) da parte di Facebook o di una delle sue consociate o affiliate, indipendentemente dal fatto che tale reclamo sia correlato o meno al Software, (ii) da qualsiasi parte se tale reclamo deriva in tutto o in parte da qualsiasi software, prodotto o servizio di Facebook o una delle sue sussidiarie o affiliate, indipendentemente dal fatto che tale rivendicazione sia correlata o meno al Software o (iii) da qualsiasi parte relativa al Software; o (b) che qualsiasi diritto in qualsiasi rivendicazione di brevetto di Facebook sia invalido o inapplicabile. </blockquote>

Questa clausola non convenzionale ha causato alcune controversie e dibattiti nella comunità degli utenti di React, perché potrebbe essere interpretata per consentire a Facebook di revocare la licenza in molti scenari, ad esempio se Facebook fa causa al licenziatario spingendo a intraprendere "altre azioni" pubblicando l'azione su un blog o altrove. Molti hanno espresso preoccupazione per il fatto che Facebook potrebbe sfruttare ingiustamente la clausola di risoluzione o che l'integrazione di React in un prodotto potrebbe complicare l'acquisizione futura di una società startup.<ref>{{Cita web|url=https://medium.com/bits-and-pixels/a-compelling-reason-not-to-use-reactjs-beac24402f7b|titolo=A compelling reason not to use ReactJS|autore=Berkana|sito=[[Medium (sito web)|Medium]]|data=2015-05-25 maggio 2015|lingua=en|accesso=2020-03-25 marzo 2020}}</ref>

Sulla base del feedback della comunità, Facebook ha aggiornato la concessione del brevetto ad aprile 2015 per renderla meno ambigua e più permissiva:<ref>{{Cita web|url=https://engineering.fb.com/open-source/updating-our-open-source-patent-grant/|titolo=Updating Our Open Source Patent Grant|data=2015-04-10 aprile 2015|lingua=en|accesso=2020-03-25 marzo 2020}}</ref>

<blockquote> La licenza concessa in seguito terminerà, automaticamente e senza preavviso, se tu (o una qualsiasi delle tue consociate, affiliate o agenti aziendali) avvii direttamente o indirettamente o prendi un interesse finanziario diretto in qualsiasi Dichiarazione di brevetto: (i) contro Facebook o qualsiasi delle sue consociate o affiliate aziendali, (ii) contro qualsiasi parte se tale Dichiarazione di brevetto deriva in tutto o in parte da qualsiasi software, tecnologia, prodotto o servizio di Facebook o di una qualsiasi delle sue consociate o affiliate aziendali, o (iii) contro qualsiasi parte relativo al software. [...] Una "Dichiarazione di brevetto" è qualsiasi azione legale o altra azione relativa a violazione o induzione diretta, indiretta o contributiva a violare qualsiasi brevetto, incluso un reclamo o una domanda riconvenzionale.<ref>{{Cita web|url=https://github.com/facebook/react/blob/b8ba8c83f318b84e42933f6928f231dc0918f864/PATENTS|titolo=Additional Grant of Patent Rights Version 2|sito=[[GitHub]]|lingua=en|accesso=2020-03-25 marzo 2020}}</ref> </blockquote>

La [[Apache Software Foundation]] ha ritenuto questo accordo di licenza incompatibile con le sue politiche di licenza, in quanto "trasmette il rischio per i consumatori a valle del nostro software sbilanciato a favore del licenziante, non del licenziatario, violando così la nostra politica legale di Apache di essere un donatore universale" e "non sono un sottoinsieme di quelle presenti in [Licenza Apache 2.0] e non possono essere concesse in licenza come [Licenza Apache 2.0] ".<ref>{{Cita web|url=https://www.apache.org/legal/resolved.html|titolo=ASF 3rd Party License Policy|editore=[[Apache Software Foundation]]|lingua=en|accesso=2020-03-25 marzo 2020}}</ref> Nell'agosto 2017, Facebook ha respinto le preoccupazioni a valle della Apache Foundation e si è rifiutata di riconsiderare la loro licenza.<ref>{{Cita web|url=https://engineering.fb.com/open-source/explaining-react-s-license/|titolo=Explaining React’s license|data=2017-08-18 agosto 2017|lingua=en|accesso=2020-03-25 marzo 2020}}</ref><ref>{{Cita web|url=https://github.com/facebook/react/issues/10191#issuecomment-323486580|titolo=Consider re-licensing to AL v2.0, as RocksDB has just done|sito=[[GitHub]]|lingua=en|accesso=2020-03-25 marzo 2020}}</ref> Il mese seguente, [[WordPress]] deciso di riconfigurare fuori da React i suoi progetti Gutenberg e Calypso.<ref>{{Cita news|lingua=en|nome=Natasha|cognome=Lomas|url=https://techcrunch.com/2017/09/15/wordpress-to-ditch-react-library-over-facebook-patent-clause-risk/|titolo=WordPress to ditch React library over Facebook patent clause risk|pubblicazione=[[TechCrunch]]|data=15 settembre 2017-09-15|accesso=25 marzo 2020-03-25}}</ref>

Il 23 settembre 2017, Facebook ha annunciato che la settimana successiva avrebbe rivisto la licenza di Flow, Jest, React e Immutable.js con una [[licenza MIT]] standard; la compagnia dichiarò che React era "la base di un vasto ecosistema di software open source per il web" e che non volevano "frenare i progressi per ragioni non tecniche".<ref>{{Cita web|url=https://engineering.fb.com/web/relicensing-react-jest-flow-and-immutable-js/|titolo=Relicensing React, Jest, Flow, and Immutable.js|data=2017-09-23 settembre 2017|lingua=en|accesso=2020-03-25 marzo 2020}}</ref>

Il 26 settembre 2017, React 16.0.0 è stato rilasciato con la licenza MIT.<ref>{{Cita web|url=https://reactjs.org/blog/2017/09/26/react-v16.0.html#mit-licensed|titolo=React v16.0§MIT licensed|cognome=Clark|nome=Andrew|sito=React Blog|data=26 settembre 2017-09-26|lingua=en|accesso=25 marzo 2020-03-25}}</ref> Il passaggio alla licenza MIT è stato inoltre inserito nella linea di rilascio 15.x con React 15.6.2.<ref>{{Cita web|url=https://reactjs.org/blog/2017/09/25/react-v15.6.2.html|titolo=React v15.6.2|cognome=Hunzaker|nome=Nathan|sito=React Blog|data=25 settembre 2017-09-25|lingua=en|accesso=25 marzo 2020-03-25}}</ref>

== Note ==

Riga 372 ⟶ 431:

== Voci correlate ==

* [[AngularJS]]

* [[Angular]]

* [[Vue.js]]

== Altri progetti ==

{{interprogetto}}

== Collegamenti esterni ==

* {{Collegamenti esterni}}

{{Framework per applicazioni web}}

{{Facebook navbox}}

{{Controllo di autorità}}

{{Portale|informatica|internet|software libero}}

[[Categoria:Applicazioni web]]