Lo scopo di questo articolo è insegnarti come creare una web app da zero con ReactJS e quindi imparare ReactJS. Le competenze necessarie per seguire questa serie di articoli riguardano più che altro la conoscenza di Javascript, HTML e CSS.
Se ancora non ti senti pronto puoi sempre iscriverti alla newsletter. Solo per gli iscritti invierò tra poco due ebook gratuiti su HTML e CSS (poi continuerò con Javascript, ReactJS, Java ed Heroku).
Conosci già ReactJS e sei interessato a React Native? Ho scritto una guida per imparare React Native a questo indirizzo.
Cosa affronteremo?
Affronteremo diversi argomenti che verranno trattati di giorno in giorno e ti permetteranno di imparare ReactJS.
Partiremo dalle basi 🙂
Ecco la scaletta:
- ReactJS: cos’è e setup iniziale
- ReactJS: come strutturare il progetto
- ReactJS: cos’è un component
- ReactJS: cos’è il lifecycle e lo state
- ReactJS: come installare dipendenze
- ReactJS: creazione della prima pagina web
- ReactJS: creazione dell’header
- ReactJS: creazione del footer
- ReactJS: creazione della home
- ReactJS: come fare routing tra più pagine
- ReactJS: state e setState
- ReactJS: come chiamare endpoint
- ReactJS: le props
- ReactJS: pulizia del codice
Articoli correlati ed utili:
- ReactJS: build e rilascio in produzione con Express
- Come scrivere i test in JavaScript
- ReactJS: come testare i componenti React con Enzyme e Jest
- ReactJS: come aggiungere SASS/SCSS ad un progetto React
- ReactJS: cos’è componentDidCatch
- ReactJS: i nuovi metodi del lifecycle getDerivedStateFromProps e getSnapshotBeforeUpdate
- ReactJS: il componente StrictMode
- ReactJS: le context API ufficiali, come usarle e cosa sono
Perché imparare ReactJS?
ReactJS è una libreria Javascript ed è stata sviluppata dal team di Facebook. Viene utilizzata in tutto il mondo da aziende del calibro di Facebook, American Express, BBC, NHL, New York Times, Wix, e tanti altri che puoi trovare a questo indirizzo (non so se hai notato che il core di WordPress si sta spostando completamente su ReactJS).
E’ rapido e ti permette di costruire applicazioni su singola pagina. Dai su, non c’è niente da fare, è più bello dire single-page application.
Funziona assemblando insieme uno o più componenti (i famosi component) che scriverai tu stesso in Javascript.
E’ renderizzabile lato server ed infine ti permette di avvicinarti anche a React Native così da imparare a fare applicazioni per Android e iOS.
Non perderti nulla!
Imparare ReactJS richiede la conoscenza di un minimo di programmazione e più in generale di HTML, CSS e Javascript. Segui la guida ed inizia ad imparare ReactJS subito, vedrai che non troverai grandi difficoltà!
Se vuoi rimanere aggiornato sul continuo di questa guida ti consiglio di iscriverti alla newsletter. Mando da 1 a 4 mail al mese e normalmente invio risorse gratuite e riservate solo agli iscritti. Invio anche la lista degli articoli di maggiore impatto, come questo. Se non troverai gli articoli potrai recuperarli dalla mail in questo modo 🙂
Per dubbi o domande non esitare a scrivermi nei commenti ?
Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!)
interessante questa guida…. ma una domanda che mi assilla (è da poco che mi sto documentando su react js): in tutte le guide ed esempi si parla sempre di localhost; come si fa ad usare un progetto react su web?
Ciao Luca 🙂 Grazie per l’interesse!
Io normalmente utilizzo Heroku che è un PaaS per effettuare il deploy dell’app sul Cloud Amazon. Se ti interessa ti lascio quì un link: https://www.paolodellaguzzo.com/blog/2017/09/04/come-registrarsi-iniziare-con-heroku/ .
Per il resto se vorresti farlo a mano le soluzioni sono: utilizzare il bundle.js che ti viene generato e caricarlo su un server a mano (per esempio su Altervista). Oppure altra soluzione è quella di avere nodejs che giri sul tuo server (tuo o affittato).
Se hai altri dubbi fa sapere 🙂
Per bundle.js intendi creare una webpack?
Tecnicamente crei un file che contiene tutto il codice JavaScript. Per creare questo file, solitamente chiamato “bundle”, si può utilizzare WebPack.
In parole povere WebPack legge tutti i tuoi file JS e le loro dipendenze e genera alla fine un unico file contenente tutto il codice. Per maggiori info ti metto il link alla guida ufficiale: https://webpack.js.org/concepts/
Per altri dubbi sono quì 🙂
Salve, io sono nuovo di react e affini. Mi affascina molto e trovo questa guida fatta molto bene.
Vorrei sapere però, una volta chiuso il terminale, come lo riavvio il webserver?
Perchè tutti i passaggi che ho seguito sono andati a buon fine. ora però devo spegnere il pc.
Dopo quanto riavvio tutto, come si riavvia anche il localhost per contnuare a sperimentare?
Grazie mille
Ciao,
Una volta che hai fatto il setup iniziale ti è sufficiente posizionarti nella cartella del tuo progetto da terminale e lanciare il comando “npm start” 🙂 Ad ogni riavvio del pc o apertura del terminale ti è sufficiente fare questo 🙂
P.S. Sono contento che ti piaccia la guida!
Devo farti i miei complimenti perché finalmente ho trovato una guida fatta veramente molto bene su react!
Grazie mille 🙂