Vite consente di velocizzare lo sviluppo di applicazioni React. Dal sito di Vite viene data la definizione di “framework agnostic tool”, per la realizzazione di applicazioni moderne.
Per poter garantire velocità durante la fase di sviluppo, Vite utilizza il codice dell’applicazoine senza caricare ogni volta da zero un bundle completo di moduli.
La principale caratteristica di Vite è quella di scomporre il progetto in due moduli distinti:
- Dependency Modules: tutti i moduli che sono presenti all’interno della cartella node_modules. Questi moduli non vengono processati da webpack ma con esbuild (un bundler javascript molto piu veloce rispetto a webpack.
- Application Modules: i moduli sviluppati e necessari per il funzionamento dell’applicazione
Vite garantisce l’hot module reloading: non dovendo eseguire il bundling dell’intero codice ad ogni richiesta, i tempi di caricamento dell’applicazione risultano molto piu rapidi.
Uno dei metodi piu rapidi che ho trovato per la creazione di un nuovo progetto React, con redux, typescript e Vite è quello di utilizzare il comando:
npx degit reduxjs/redux-templates/packages/vite-template-redux projectName
Questo template consente di creare un progetto (utilizzando il template degit) basato su Typescript (.tsx o .ts), con i pacchetti react, react-dom e jest.
Il progetto utilizza React Router per la navigazione tra le pagine e FormatJS che è una collezione di librerie Javascript che permettono di rendere internazionale la nostra applicazione usando la libreria React Intl. Per poter utlizzare questi pacchetti è necessario utilizzare i comandi:
npm install --save react-router-dom npm install --save react-intl
E per finire l’utilizzo di styled-components per la gestione degli stili all’interno dei componenti react:
npm install --save styled-components npm install --save-dev @types/styled-components
E questo è tutto.
A questo punto ci troveremo con le seguente cartelle:
- app/store: in questa cartella dovremo posizionare la parte di redux (actions, reducers ecc…)
- assets: le immagini e le icone della nostra applicazione
- backend: la parte dei dati da utilizzare per l’interfacciamento con il backend
- features: la cartella dove andremo ad inserire le pagine dell’applicazione
- i18n: la cartella che conterrà i file per ogni singola internalizzazione
In questo post abbiamo visto come creare una struttura di un progetto React utilizzando pochi comandi e sfruttando lo scaffoling (npx + degit).