React (web framework): differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m Bot: rimuovo parametro ridondante (valore uguale alla proprietà P154 su Wikidata) |
m smistamento lavoro sporco e fix vari |
||
Riga 6:
|SitoWeb =
}}
'''React''' (noto anche come '''React.js''' o '''ReactJS''') è una libreria [[JavaScript]]<ref name="react">{{Cita web|url=https://it.reactjs.org|titolo=React - Una libreria JavaScript per creare interfacce utente|accesso=
React può essere utilizzato come base nello sviluppo di applicazioni a [[Single-page application|pagina singola]] o mobile. 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=
== Utilizzo di base ==
Riga 33:
== 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=
<syntaxhighlight lang="js">
ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
Riga 59:
=== 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=
=== Metodi del ciclo di vita ===
Riga 70:
=== 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=
Un esempio di codice JSX:
Riga 88:
==== 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=
==== 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=
==== Espressioni JavaScript ====
Riga 146:
</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
=== 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><canvas></nowiki></code><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
=== Hooks di React ===
Gli hooks 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=
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=
==== 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=
# Gli hooks devono essere chiamati solo al livello più alto (non all'interno di loop o istruzioni ''if'').
Riga 163:
==== Hooks personalizzati ====
La creazione di hooks personalizzati<ref>{{Cita web|url=https://it.reactjs.org/docs/hooks-custom.html|titolo=Hooks Personalizzati|accesso=
== Idiomi comuni ==
Riga 169:
=== 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=
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=
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
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=
== 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=
== 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=
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
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=
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
{| class="wikitable"
|+Versioni
Riga 355:
=== 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=
<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=
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=
<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=
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=
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=
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
== Note ==
Riga 373:
* [[AngularJS]]
* [[Angular]]
* [[Vue.js]]
== Collegamenti esterni ==
Riga 379:
{{Framework per applicazioni web}}
{{Facebook
{{Controllo di autorità}}
{{Portale
[[Categoria:Applicazioni web]]
|