Wikipedia

React (web framework): differenze tra le versioni

Naviga nella cronologia in modo interattivo
← Differenza precedenteDifferenza successiva →
Contenuto cancellato Contenuto aggiunto
VisualeWikitesto
Aggiunto codice di esempio per gli hooks ed alcuni dettagli in merito alla introduzione degli stessi nel mondo React
Etichetta: Possibile modifica di prova o impropria
Riga 10:
React può essere utilizzato come base nello sviluppo di applicazioni a [[Single-page application|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]])<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=2021-04-03}}</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=13 gennaio 2018|lingua=en|accesso=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=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=22 marzo 2020}}</ref> sono i rispettivi esempi di tali librerie.
 
== Utilizzo di base ==<ref name="React">{{cite news|title=10+ calcolatrici di reazione gratuite e utili|url=https://gscode.in/react-calculators/|accessdate=23 october 2022|}}</ref>
== Utilizzo di base ==
Di seguito è riportato un esempio rudimentale di utilizzo di React in HTML con [[ReactJS|JSX]] e JavaScript. <syntaxhighlight lang="html">
import React da 'react';
<div id="myReactApp"></div>
importa ReactDOM da 'react-dom/client';
 
const Saluto = () => {
<script type="text/babel">
Restituzione (
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>
</syntaxhighlight>
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>.
 
const App = () => {
Visualizzato in un browser Web, il risultato sarà:▼
restituisci <Saluto />;
<syntaxhighlight lang="html">
};
<div id="myReactApp">
 
<h1>Hello World!</h1>▼
▲ const root = ReactDOM.rendercreateRoot(App, document.getElementById('myReactApproot'));
▲</div>
 
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
</syntaxhighlight>
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>
<div id="root"></div></body></html>
 
La funzione Saluto è un componente React che mostra il famoso "Hello, world" introduttivo.
 
▲VisualizzatoQuando visualizzato in un browser Webweb, il risultato sarà un rendering di:
 
<div class="hello-world">
▲ <h1>Hello, Worldworld!</h1>
</div>
 
== Caratteristiche degne di nota ==
Estratto da "https://it.wikipedia.org/wiki/React_(web_framework)"