setup di base di un sito in react vite e tailwind
come creare un progetto boilerplate da poter poter utilizzare come base di partenza per tutti i tuoi progetti
Oggi vi andrò a far vedere come creare un progetto di base con vite usando react e typescript, prima che venisse introdotto l'utilizzo di vite per creare progetti in react veniva utilizzato create react app che ora non è più supportato e infatti vite è la migliore alternativa poichè permette di avere tempi di build molto più veloci rispetto a quelli che si avevano usando create react app, inoltre usando vite si riducono anche le dimensioni del bundle che viene creato tramite il processo di build e inoltre abbiamo la possibilità di vedere i cambi fatti al codice in realtime senza bisogno di dover ricaricare la pagina e inoltre quando lanciamo il server in modalità di sviluppo la fase di compilazione risulterà molto più veloce rispetto a quando si utilizzava create react app.
Come Installare node js?
prima di tutto se ancora non lo avete fatto e state partendo proprio da zero va installato prima di tutto node js e npm o un qualsiasi altro package manager come yarn o pnpm.
per installare node js ci dobbiamo recare sul sito ufficiale di node js: Node.js — Download Node.js® e io ho preferito installare la versione prebuilt di node js in questo caso per windows poichè il mio pc è windows,
però se volete potete installare anche in un altro che vi spiega il sito di node, una volta installato il file, andate sul prompt dei comandi e digitate node -v per vedere se effettivamente si è installato node e se si è installato vi dovrebbe uscire node e la versione di node, se è così good job vuol dire che avete installato node js, ora passiamo al prossimo punto.
Come creare il nostro primo progetto?
allora prima di tutto abbiamo bisogno di un editor di codice come per esempio vs code, cursor o qualsiasi altro editor di codice voi vogliate, io personalmente utilizzo cursor pro poichè mi trovo molto bene nel utilizzare il loro agent e le loro funzionalità di completamento intelligente del codice e tante altre funzionalità per me stra utili. Una volta installato un editor a vostro piacere dovrete fare questa serie di comandi:
bene, una volta che avrete scelto la variante avrete ufficialmente creato un vostro primo progetto con vite, come si può notare è veramente semplice e veloce bastano letteralmente tre comandi, una volta che avrete scelto la vostra variante fate sempre dal vostro terminale cd nome della cartella e poi npm install così vi si installeranno tutte le dipendenze base del progetto, in un altro articolo vedremmo cose più approfondite.