React (web framework): differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
→Utilizzo di base: c'era scritto "importa" invece di "import" alla seconda riga |
m Eliminato il parametro "È software libero?" nel template "Software" |
||
| (5 versioni intermedie di 3 utenti non mostrate) | |||
Riga 3:
|SistemaOperativo = multipiattaforma
|Genere = libreria javascript
|SitoWeb =
}}
Riga 11 ⟶ 10:
== Utilizzo di base ==
Di seguito è riportato un esempio rudimentale di utilizzo di React in HTML con [[ReactJS|JSX]] e JavaScript. <syntaxhighlight lang="react" line="1">
import React from 'react';
import ReactDOM from 'react-dom/client';
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>
</syntaxhighlight>
La funzione Saluto è un componente React che mostra il famoso "Hello, world" introduttivo.▼
▲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 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
| |||