Panoramica di React

Che cos'è React JS?

React è una libreria JavaScript open source per la creazione di interfacce utente front-end. A differenza di altre librerie JavaScript che forniscono un framework applicazione completo, React si concentra esclusivamente sulla creazione di visualizzazioni dell'applicazione tramite unità incapsulate denominate componenti che mantengono lo stato e generano elementi dell'interfaccia utente. È possibile inserire un singolo componente in una pagina Web o annidare gerarchie di componenti per creare un'interfaccia utente complessa.

I componenti React vengono in genere scritti in JavaScript e JSX (JavaScript XML) che è un'estensione JavaScript simile a HTML, ma include alcune funzionalità di sintassi che semplificano l'esecuzione di attività comuni, ad esempio la registrazione dei gestori eventi per gli elementi dell'interfaccia utente. Un componente React implementa il metodo di rendering, che restituisce il JSX che rappresenta l'interfaccia utente del componente. In un'app Web, il codice JSX restituito dal componente viene convertito in codice HTML conforme al browser sottoposto a rendering nel browser.

React funziona in Windows?

Sì. Windows supporta due ambienti diversi per lo sviluppo di app React:

• Installare un ambiente di sviluppo React in Windows
• Installare un ambiente di sviluppo React nel sottosistema Windows per Linux

Cosa si può fare con React?

Windows supporta un'ampia gamma di scenari per gli sviluppatori React, tra cui:

• App Web di base: se non si ha familiarità con React e si è interessati principalmente alla creazione di un'app Web di base con React, è consigliabile installare create-react-app direttamente in Windows. Se si prevede di creare un'app Web che verrà distribuita per la produzione, è consigliabile installare create-react-app in Sottosistema Windows per Linux (WSL), per migliorare la velocità delle prestazioni, la compatibilità delle chiamate di sistema e l'allineamento tra l'ambiente di sviluppo locale e l'ambiente di distribuzione (che spesso è un server Linux).

• App a pagina singola (SPA): si tratta di siti Web che interagiscono con l'utente riscrivendo dinamicamente la pagina Web corrente con nuovi dati da un server, anziché il browser predefinito di caricamento di intere nuove pagine. Se si vuole creare un sito Web SPA statico orientato al contenuto, è consigliabile installare Gatsby in WSL. Se si vuole creare un sito Web spa di cui è stato eseguito il rendering del server con un back-end Node.js, è consigliabile installare Next.js in WSL. (Anche se Next.js ora offre anche la gestione di file statici).

• Applicazioni desktop native: React Native per Windows + macOS consente di creare applicazioni desktop native con JavaScript che vengono eseguite in vari tipi di PC desktop, portatili, tablet, Xbox e dispositivi di realtà mista. Supporta sia Windows SDK che macOS SDK.

• App per dispositivi mobili native: React Native è un modo multipiattaforma per creare app Android e iOS con JavaScript che eseguono il rendering nel codice dell'interfaccia utente della piattaforma nativa. Esistono due modi principali per installare React Native: l'interfaccia della riga di comando di Expo e l'interfaccia della riga di comando di React Native. Esiste un buon confronto tra i due in StackOverflow. Expo include un'app client per dispositivi mobili iOS e Android per l'esecuzione e il test delle app. Per istruzioni sullo sviluppo di un'app Android con Windows, React Native e l'interfaccia della riga di comando di Expo, vedere React Native per lo sviluppo Android su Windows.

Opzioni di installazione

Esistono diversi modi per installare React insieme a una toolchain integrata che funziona meglio per lo scenario del caso d'uso. Ecco alcuni dei più popolari.

• Installare React usando Vite direttamente su Windows
• Installare React usando Vite nel sottosistema Windows per Linux (WSL)
• Installare il framework Next.js in WSL
• Installare il framework Gatsby in WSL
• Installare React Native per lo sviluppo di desktop Windows
• Installare React Native per lo sviluppo Android in Windows
• Installare React Native per lo sviluppo di dispositivi mobili tra piattaforme diverse)
• Installare React nel browser senza toolchain: poiché React è una libreria JavaScript che è, nella sua forma più semplice, solo una raccolta di file di testo, è possibile creare app React senza installare strumenti o librerie nel computer. È possibile aggiungere solo alcune "spolverate di interattività" a una pagina Web e non è necessario creare degli strumenti. È possibile aggiungere un componente React inserendo solo un semplice tag <script> all’interno di una pagina HTML. Seguire i passaggi "Aggiungi React in un minuto” nella documentazione di React.

Strumenti React

Durante la scrittura di un semplice componente React in un editor di testo normale è una buona introduzione a React, il codice generato in questo modo è ingombrante, difficile da mantenere e distribuire, e lento. È necessario eseguire alcune attività comuni per le app di produzione. Queste attività vengono gestite da altri framework JavaScript acquisiti dall'app come dipendenza. Queste attività includono:

• Compilazione: JSX è il linguaggio comunemente usato per le app React, ma i browser non possono elaborare direttamente questa sintassi. Al contrario, il codice deve essere compilato in sintassi JavaScript standard e personalizzato per browser diversi. Babel è un esempio di compilatore che supporta JSX.
• Creazione di bundle: poiché le prestazioni sono fondamentali per le app Web moderne, è importante che javaScript di un'app includa solo il codice necessario per l'app e combinato in pochi file possibile. Un bundler, ad esempio webpack, esegue automaticamente questa attività.
• Gestione pacchetti: gli strumenti di gestione pacchetti semplificano l'inclusione delle funzionalità dei pacchetti di terze parti nell'app, tra cui l'aggiornamento e la gestione delle dipendenze. Gli strumenti di gestione pacchetti di uso comune includono Yarn e npm.

Insieme, la suite di framework che consentono di creare, compilare e distribuire l'app sono denominate toolchain. Un ambiente di sviluppo facile da configurare per React che usa questa toolchain è Vite, che genera una semplice app a pagina singola. L'unica configurazione necessaria per usare Vite è Node.js.

• Per lo sviluppo di Windows, seguire le istruzioni per installare Node.js in WSL o installare Node.js in Windows.

Directory del componente React Native

I componenti che possono essere usati in un'app React Native includono quanto segue:

• Componenti di base: componenti sviluppati e supportati come parte del framework React Native.
• Componenti della community: componenti sviluppati e gestiti dalla community.
• Componenti nativi: componenti creati dall'utente, usando codice nativo della piattaforma e registrati per essere accessibili da React Native.

La directory React Native fornisce un elenco di librerie di componenti che possono essere filtrate in base alla piattaforma di destinazione.

Opzioni della toolchain React fullstack

React è una libreria, non un framework, quindi potrebbe richiedere strumenti aggiuntivi per creare un'app più complessa. Oltre a usare React, è consigliabile usare:

• Gestione pacchetti: due gestori di pacchetti più diffusi per React sono npm (inclusi in NodeJS) e yarn. Entrambi supportano una vasta libreria di pacchetti ben gestiti che possono essere installati.
• React Router: una raccolta di componenti di navigazione che consentono di usare elementi come URL segnalibri per l'app Web o un modo componibile per spostarsi in React Native. React è davvero preoccupato solo per la gestione dello stato e il rendering dello stato nel DOM, quindi la creazione di applicazioni React richiede in genere l'uso di una libreria di routing come React Router.
• Redux: un contenitore di stato stimabile che consente di usare l'architettura del flusso di dati. È probabile che non sia necessario fino a quando non si entra in uno sviluppo React più avanzato. Per citare Dan Abramov, uno dei creatori di Redux: "Non usare Redux fino a quando non si verificano problemi con vanilla React".
• Webpack: uno strumento di compilazione che consente di compilare moduli JavaScript, noti anche come bundler di moduli. Quando webpack elabora l'applicazione, compila internamente un grafico delle dipendenze che esegue il mapping di ogni modulo necessario al progetto e genera uno o più bundle.
• Uglify: un parser JavaScript, un minificatore, un compressore e un abbellitore di toolkit.
• Babel: un compilatore JavaScript usato principalmente per convertire il codice ECMAScript 2015+ in una versione compatibile con le versioni precedenti di JavaScript in browser o ambienti precedenti. Può anche essere utile usare babel-preset-env in modo che non sia necessario eseguire trasformazioni della sintassi di micromanage o polyfill del browser e definire i browser da supportare.
• ESLint: uno strumento per identificare e creare report sui modelli presenti nel codice JavaScript che consente di rendere il codice più coerente ed evitare bug.
• Enzima: un'utilità di test JavaScript per React che semplifica il test dell'output dei componenti React.
• Jest: un framework di test integrato nel pacchetto create-react-app per facilitare la scrittura di test JavaScript idiomatici.
• Mocha: framework di test eseguito in Node.js e nel browser per facilitare test asincroni, creazione di report e mapping di eccezioni non rilevate ai test case corretti.

Corsi e esercitazioni react

Ecco alcuni ambienti consigliati per apprendere React e creare app di esempio:

• Il percorso di apprendimento React contiene moduli di corso online che consentono di iniziare a usare le nozioni di base.
• Creare un'app a pagina singola (SPA) che viene eseguita nel browser (ad esempio questa app Web di esempio che recupera informazioni sul calendario per un utente con l'API Graph Microsoft)
• Creare un'app di cui è stato eseguito il rendering del server con Next.js o un'app generata da sito statico con Gatsby
• Creare un'interfaccia utente (UI) per un'app nativa eseguita su dispositivi Windows, Android e iOS (vedere questi esempi di app native di Windows o questa app nativa di esempio che recupera informazioni sul calendario per un utente con l'API Graph Microsoft)
• Sviluppare un'app per un dispositivo Surface Duo a doppio schermo
• Creare un'app Web o un'app nativa usando i componenti React dell'interfaccia utente Fluent
• Creare un'app React con TypeScript

Risorse aggiuntive

• La documentazione ufficiale di React offre tutte le informazioni aggiornate più recenti su React
• Componenti aggiuntivi di Microsoft Edge per gli strumenti di sviluppo React: aggiunge due schede agli strumenti di sviluppo di Microsoft Edge per facilitare lo sviluppo React: Componenti e Profiler.