Sviluppiamo una pagina di Resume con React, Tailwind e Vite — parte 1/2
In questa serie svilupperemo insieme una Single Page Application che conterrà il nostro resume personale che renderemo disponibile su Github!
In poche parole (un sunto per le persone pigre)
In questo articolo realizzeremo lo scheletro di partenza del nostro progetto usando:
- React
- Tailwind
- Vite
il risultato finale sarà un progetto di partenza che verrà poi utilizzato nel prossimo articolo per costruire il template del nostro resume.
Il perché di questa serie
La motivazione è semplice: un mero esercizio per approfondire alcuni strumenti come Tailwind e Vite, se ti chiedi cosa siano allora sei nel posto giusto!
Analisi delle tecnologie
Prima di scrivere la nostra prima riga di codice dobbiamo approfondire le tecnologie che utilizzeremo:
Cos’è Vite
Se si cerca una definizione di Vite basta visitare il sito ufficiale:
Vite (parola francese per “veloce”, pronunciato /vit/) è uno strumento di compilazione che mira a fornire un’esperienza di sviluppo più veloce e snella per i progetti web moderni
La prima domanda che mi sono posto dopo aver letto questo paragrafo è stata:
“Ma cosa c’è dietro?”
Vediamolo subito in dettaglio:
- Un server di sviluppo che fornisce ricche funzionalità, migliorate rispetto ai moduli ES nativi come, ad esempio, la sostituzione rapida dei vari moduli in runtime (HMR), il supporto a PostCSS, Multi import dei moduli e tante altre features già pronte all’uso;
- Un sistema di compilazione che raggruppa il codice con Rollup (se hai letto la mia serie su Svelte sai di cosa sto parlando), preconfigurato per produrre assets statici altamente ottimizzati per la produzione;
- Un sistema di estensione che utilizza plugin scritti utilizzando delle semplici API JavaScript.
Ti invito ad approfondire Vite direttamente dalla documentazione ufficiale che ti ho linkato sopra.
Cos’è Tailwind CSS
Per una definizione, anche qui ci facciamo aiutare dal sito ufficiale
Tailwind è un framework CSS “utility first” che ti consente di aggiungere stili alle tue pagine web senza scrivere una sola riga di codice CSS personalizzato.
Analizziamo le due cose importanti scritte sopra:
“Utility-first” significa che invece di classi normali e antiquate, funziona su utilità di basso livello che sono essenziali per modellare qualsiasi elemento HTML che desideri. Questi possono includere stili come padding, display, larghezza, altezza etc.
“Senza scrivere una singola riga di codice CSS personalizzato” significa che beh … ti stai sbarazzando di quei lunghi blocchi di codice CSS che devi scrivere solo per modellare un elemento in base al design fornito. Tailwind gestisce tutto questo. Quindi, invece di componenti predefiniti, fornisce classi di utilità già pronte all'uso.
Nel secondo articolo di questa serie faremo un approfondimento su Tailwind!
Iniziamo!
Adesso iniziamo a creare il nostro scheletro di applicazione. Per prima cosa creiamo una nuova app React utilizzando @vite/create-app
@vitejs-create-app è uno strumento per avviare rapidamente un progetto da un modello di base basato su Vite, quindi apriamo il nostro terminale e digitiamo:
npm init @vitejs/appIl comando farà partire un piccolo wizard dove definiremo il template della nostra applicazione, creiamo quindi un template per React
Entriamo nella cartella appena creata e lanciamo i seguenti comandi:
npm installnpm run dev
Il nostro web server è pronto!
Adesso possiamo visitare: http://localhost:3000
Aggiungiamo Tailwind
Installiamo Tailwind nel nostro progetto lanciando i seguenti comandi:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latestnpx tailwindcss init -p
Adesso se controlliamo l’albero del nostro progetto troviamo due nuovi file:
- postcss.config.js
- tailwind.config.js
Fatto!
Se sei arrivato a questo punto hai appena configurato correttamente uno scheletro di sviluppo di React con Tailwind.
Nei prossimi articoli esploreremo le potenzialità di Tailwind e creeremo la nostra pagina di resume.
Bonus Time
Hai difficoltà nel seguire i passi descritti in questo articolo? Ho preparato una repo Github con uno scheletro di applicazione già pronto all’uso!
Lo trovi qui:
Se l’articolo ti è piaciuto o hai domande, ti aspetto nei commenti!
Al prossimo articolo.
