Guida alla creazione di un progetto Javascript Moderno
Benvenuto a questa guida: Guida alla creazione di un progetto Javascript Moderno.
🎉 Questa è la seconda versione della guida, grosse modifiche sono state fatte rispetto alla prima. Controlla il Change Log!
Questa è una guida essenziale per la costruzione di uno stack Javascript utilizzando gli strumenti più attuali. Richiede qualche conoscienza generica di programmazione ed alcune basi di Javascript. È focalizzata sull'utilizzo in sequenza di alcuni tool e ti presenta l'esempio più semplice possibile per ogni tool. Puoi vedere questa guida come un modo per scrivere il tuo boilerplate personale partendo da zero. Siccome l'obiettivo di questa guida è l'utilizzo combinato di una serie di tool, non ti spiegherò nel dettaglio come funziona ciascun tool da solo. Fai riferimento alla loro documentazione o cerca altri tutorial se ti interessa approfondire maggiormente.
Chiaramente non avrai bisogno di utilizzare tutto lo stack se devi solo creare una semplice pagina web con poche interazioni in JS (una combinazione di Browserify/Webpack + Babel + jQuery è sufficiente per poter scrivere codice ES6 in file separati), ma se vuoi creare una web app scalabile, ed hai bisogno di un aiuto per configurare il tutto, questo tutorial farà proprio al tuo caso.
Una buona parte dello stack descritto in questa guida utilizza React. Se sei un principiante e vuoi solo imparare React, il progetto create-react-app ti permetterà di avere un ambiente React funzionante molto rapidamente, utilizzando una configurazione già pronta. Consiglierei questa strada a chi ad esempio entra in un team che utilizza già React e deve mettersi al passo utilizzando un ambiente semplice per fare delle prove. In questa guida non ti fornirò una configurazione già pronta perchè voglio che tu comprenda tutto il procedimento che c'è dietro.
Esempi di codice sono inclusi in ogni capitolo, puoi avviarli utilizzando i comandi yarn && yarn start. Ti consiglio comunque di riscrivere tutto per conto tuo seguendo le istruzioni passo a passo.
Il codice completo è disponibile in questo repository: JS-Stack-Boilerplate e nelle release. C'è anche una demo live
Funziona su Linux, macOS, e Windows.
Nota: Da quando questo tutorial è stato aggiornato a maggio 2017, alcune librerie hanno leggermente modificato le loro API. 95% del tutorial è ancora perfettamente valido, ma se riscontri dei problemi, assicurati di controllare gli open issues.
02 - Babel, ES6, ESLint, Flow, Jest, Husky
06 - React Router, Server-Side Rendering, Helmet
09 - Travis, Coveralls, Heroku
Prossimamente
Impostare il tuo editor (Atom inizialmente), MongoDB, Progressive Web App, E2E testing.
Traduzioni
Se vuoi aggiungere la tua traduzione, leggi le raccomandazioni per iniziare!
V2
Presto nuove traduzioni ;)
- Bulgarian by mihailgaberov
- Chinese (simplified) by @yepbug
- French by Naomi Hauret
- Italian by Fabrizio Bertone - fbertone.it
Controlla le traduzioni in corso.
V1
- Chinese (simplified) by @pd4d10
- Italian by Fabrizio Bertone
- Japanese by @takahashim
- Russian by React Theming
- Thai by MicroBenz
Credits
Versione originale creata da @verekia – verekia.com. Traduzione di Fabrizio Bertone – fbertone.it.
Licenza: MIT