Timeline
Chat
Prospettiva

React (web framework)

libreria JavaScript open source per la creazione di applicazioni dinamiche Da Wikipedia, l'enciclopedia libera

Remove ads

React (noto anche come React.js o ReactJS) è una libreria open-source, front-end, JavaScript[1] per la creazione di interfacce utente. È mantenuto da Meta (già Facebook) e da una comunità di singoli sviluppatori e aziende.[2][3][4]

Fatti in breve React software, Genere ...
Remove ads

React può essere utilizzato come base nello sviluppo di applicazioni a 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)[5]. Tuttavia, React si occupa solo del rendering dei dati sul DOM, pertanto la creazione di applicazioni React richiede generalmente l'uso di librerie aggiuntive per lo state management e il routing.[6] Redux[7] e React Router[8] sono i rispettivi esempi[9] di tali librerie. A questo fine è possibile utilizzare anche dei framework terzi, come ad esempio Next.js.[10]

Remove ads

Utilizzo di base

Di seguito è riportato un esempio rudimentale di utilizzo di React in HTML con JSX e JavaScript. 

import React from 'react';
import ReactDOM from 'react-dom/client';

const Saluto = () => {
    return (
        <div className="hello-world">
            <h1>Ciao, mondo!</h1>
        </div>
    );
};

const App = () => {
    return <Saluto />;
};

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

in base al documento HTML di seguito.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
  </body>
</html>

La funzione Saluto è un componente React che mostra il famoso "Hello, world" introduttivo.

Remove ads

Caratteristiche degne di nota

Riepilogo
Prospettiva

Componenti

Il codice di React è costituito da entità denominate componenti. I componenti possono essere sottoposti a rendering su un particolare elemento nel DOM usando la libreria React DOM. Quando si esegue il rendering di un componente, si possono passare valori noti come "props"[11]:

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

I due modi principali per dichiarare i componenti in React sono tramite componenti funzionali e componenti basati su classi.

Componenti funzionali

I componenti funzionali vengono dichiarati con una funzione che quindi restituisce alcuni JSX.

const Greeting = (props) => <div>Hello, {props.name}!</div>;

Componenti basati su classi

I componenti basati su classi vengono dichiarati utilizzando le classi 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:

class ParentComponent extends React.Component {
 state = { color: 'green' };
 render() {
  return (
   <ChildComponent color={this.state.color} />
  );
 }
}

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.[12] 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

I metodi del ciclo di vita sono hook che consentono l'esecuzione di codice in punti prestabiliti durante la vita di un componente.

  • shouldComponentUpdate consente allo sviluppatore di impedire il rendering non necessario di un componente restituendo false se non è richiesto un rendering.
  • componentDidMount viene chiamato una volta che il componente è "montato" (il componente è stato creato nell'interfaccia utente, spesso associandolo a un nodo DOM). Questo è comunemente usato per attivare il caricamento dei dati da una fonte remota tramite un'API.
  • componentWillUnmount 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 setInterval() che è correlata al componente o un "eventListener" impostato sul "documento" a causa della presenza del componente).
  • render è 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.[13] 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:

class App extends React.Component {
 render() {
  return (
   <div>
    <p>Header</p>
    <p>Content</p>
    <p>Footer</p>
   </div>
  );
 }
}

Elementi nidificati

Elementi multipli sullo stesso livello devono essere racchiusi in un singolo elemento contenitore come l'elemento <div> mostrato sopra o restituiti come matrice.[14]

Attributi

JSX offre una gamma di attributi di elemento progettati per rispecchiare quelli forniti da HTML. Possono essere passati al componente anche attributi personalizzati.[15] Tutti gli attributi verranno ricevuti dal componente come props.

Espressioni JavaScript

Le espressioni JavaScript (ma non le istruzioni) possono essere utilizzate all'interno di JSX con parentesi graffe {}:

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

L'esempio sopra verrà così visualizzato: 

<h1>11</h1>

Dichiarazioni condizionali

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

class App extends React.Component {
 render() {
  const i = 1;
  return (
   <div>
    <h1>{ i === 1 ? 'true' : 'false' }</h1>
   </div>
  );
 }
}

Quanto sopra renderà:

<div>
 <h1>true</h1>
</div>

Le funzioni e JSX possono essere utilizzate nei condizionali:

class App extends React.Component {
 render() {
  const sections = [1, 2, 3];
  return (
   <div>
    {sections.length > 0 && sections.map(n => (
      /* 'key' is used by react to keep track of list items and their changes */
      /* Each 'key' must be unique */
      <div key={"section-" + n}>Section {n}</div>
    ))}
   </div>
  );
 }
}

Quanto sopra renderà:

<div>
 <div>Section 1</div>
 <div>Section 2</div>
 <div>Section 3</div>
</div>

Il codice scritto in JSX richiede la conversione con uno strumento come <i>Babel</i> prima di poter essere compreso dai browser web.[16] Questa elaborazione viene generalmente effettuata nel corso del processo di costruzione del software, prima che l'applicazione venga 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 <canvas>[17] e Netflix e PayPal utilizzano il caricamento universale per eseguire il rendering di HTML identico sia sul server che sul client.[18][19]

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.[20] Rendono i codici leggibili e facilmente comprensibili. Gli hooks non funzionano all'interno delle classi: permettono infatti di utilizzare React senza classi.[21]

React fornisce alcuni hook incorporati come useState,[22] useContext, useReducer e useEffect[23] per citarne alcuni. Sono tutti indicati nella guida alle API di riferimento degli Hooks.[24] useState e useEffect, che sono i più utilizzati, sono utili al controllo rispettivamente degli stati e degli effetti collaterali nei componenti React.

Esempio di utilizzo di useState in un componente funzionale.

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>
    </>
  );
};

Regole degli Hooks

Ci sono anche regole degli hooks[25] che devono essere seguite prima che gli stessi possano essere utilizzati:

  1. Gli hooks devono essere chiamati solo al livello più alto (non all'interno di loop o istruzioni if).
  2. Gli hooks devono essere chiamati solo dai componenti di funzione React, non dalle normali funzioni o dai componenti della classe.

Hooks personalizzati

La creazione di hooks personalizzati[26] 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.

Remove ads

Idiomi comuni

Riepilogo
Prospettiva

React non intende fornire una "libreria di applicazione" completa. È progettato specificamente per la creazione di interfacce utente[1] e pertanto non include molti degli strumenti che alcuni sviluppatori potrebbero ritenere necessari per creare un'applicazione. Ciò consente di scegliere le librerie che lo sviluppatore preferisce per eseguire attività quali l'accesso alla rete o l'archiviazione locale dei dati. Modelli comuni di utilizzo sono emersi man mano che la libreria è maturata.

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 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.[27] Se utilizzata con React, questa propagazione viene eseguita attraverso le proprietà del componente.

Flux può essere considerato una variante dell'Observer pattern.[28]

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 USER_FOLLOWED_ANOTHER_USER.[29] 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).[30]

Sviluppo futuro

Lo stato del progetto può essere monitorato tramite il forum di discussione del core team.[31] Tuttavia, le principali modifiche a React passano attraverso i repository issues e le richieste di pull di Future of React.[32][33] Ciò consente alla comunità di React di fornire feedback sulle nuove potenziali funzionalità, sulle API sperimentali e sui miglioramenti della sintassi JavaScript.

Storia

Riepilogo
Prospettiva

React è stato creato da Jordan Walke, un ingegnere software di Facebook, che lo ha chiamato inizialmente "FaxJS".[34] È 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.[35] È stato rilasciato al pubblico al JSConf US del maggio 2013.[36]

React Native, che consente lo sviluppo nativo di Android, iOS e 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 interfacce utente.[37] React Fiber è stato pensato come fondamento per eventuali miglioramenti e sviluppi futuri della libreria React.[38]

Il 26 settembre 2017, è stato rilasciato al pubblico React 16.0.[39]

Il 16 febbraio 2019, è stato rilasciato al pubblico React 16.8.[40] Il rilascio ha introdotto gli hooks.[41]

Ulteriori informazioni Versione, Data di pubblicazione ...

Licensing

La versione pubblica iniziale di React a maggio 2013 utilizzava la licenza Apache 2.0. Nell'ottobre 2014, React 0.12.0 l'ha sostituita con la 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:[42]

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.

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.[43]

Sulla base del feedback della comunità, Facebook ha aggiornato la concessione del brevetto ad aprile 2015 per renderla meno ambigua e più permissiva:[44]

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.[45]

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] ".[46] Nell'agosto 2017, Facebook ha respinto le preoccupazioni a valle della Apache Foundation e si è rifiutata di riconsiderare la loro licenza.[47][48] Il mese seguente, WordPress deciso di riconfigurare fuori da React i suoi progetti Gutenberg e Calypso.[49]

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".[50]

Il 26 settembre 2017, React 16.0.0 è stato rilasciato con la licenza MIT.[51] Il passaggio alla licenza MIT è stato inoltre inserito nella linea di rilascio 15.x con React 15.6.2.[52]

Remove ads

Note

Voci correlate

Loading content...

Altri progetti

Loading content...

Collegamenti esterni

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads