React.js, o semplicemente React, è una popolare libreria JavaScript per creare interfacce utente front-end o grafiche per applicazioni online. Per gli ingegneri Java full-stack, è anche una delle abilità più importanti. React JS, a volte conosciuto semplicemente come React, si è evoluto a passi da gigante negli ultimi anni, diventando il toolkit de-facto per lo sviluppo di GUI a componenti. È sostenuto da Facebook. Anche se ci sono framework front-end alternativi come Angular e Vue.js, react developer si distingue perché si concentra solo sullo sviluppo GUI basato su componenti e non si allontana in altre aree.
Per esempio, Angular è un framework completo che include un sistema di Dependency Injection, un sistema di Routing, gestione dei moduli, richieste HTTP, animazioni, supporto i18n, e una potente struttura di moduli con un semplice lazy-loading.
React è un’opzione meravigliosa se avete già delle librerie per eseguire queste cose o se non ne avete bisogno tutte insieme. Tuttavia, capire React non è semplice, soprattutto se siete nuovi allo sviluppo web.
Diamo un’occhiata alla RoadMap passo dopo passo per vedere come puoi acquisire le abilità di cui avrai bisogno per diventare uno sviluppatore React nel 2022:
1. I Fondamenti
Devi conoscere i fondamenti indipendentemente da qualsiasi framework o libreria che studi per la programmazione web, e per fondamenti intendo HTML, CSS e JavaScript, che sono le tre basi dello sviluppo web.
HTML
Poiché fornisce la struttura di una pagina web, è uno dei pilastri principali e il talento più cruciale per gli sviluppatori web. Se sei interessato ad imparare l’HTML, dai un’occhiata alla mia collezione di lezioni gratuite di HTML.
CSS
È il secondo pilastro dello sviluppo web, ed è usato per far sembrare belle le pagine online. Se vuoi studiare i CSS, la mia lista di corsi gratuiti di sviluppo web include una manciata di classi CSS gratuite.
JavaScript
Questo è il terzo pilastro dello sviluppo web, ed è ciò che vi permette di rendere i vostri siti interattivi. È anche il motivo per cui esiste il framework React; di conseguenza, dovresti avere familiarità con JavaScript e capirlo bene prima di provare a padroneggiare React JS. Dai un’occhiata alla mia selezione di lezioni gratuite di JavaScript per iniziare.
2. Abilità di Sviluppo in Generale
Che tu sia uno sviluppatore frontend, uno sviluppatore backend o un ingegnere software full-stack, non importa. Per farcela nell’industria della programmazione, è necessario conoscere alcuni talenti di sviluppo di base, ed ecco una lista di alcuni di essi.
Conoscere GIT
Nel 2022, devi avere una conoscenza approfondita di Git. Crea alcuni repository GitHub, condividi il tuo codice con gli altri, e scopri come portare il codice Github nel tuo IDE scelto. Git Complete: The complete, step-by-step guide to Git è un corso meraviglioso se vuoi imparare.
Comprendere Il Protocollo HTTP(S)
Se vuoi lavorare come sviluppatore web, devi avere una conoscenza approfondita di HTTP. Non mi aspetto che studiate le specifiche, ma dovreste sapere come usare i tipici metodi di richiesta HTTP come GET, POST, PUT, PATCH, DELETE e OPTIONS, così come come come funziona HTTP/HTTPS in generale.
Acquisire Familiarità Con Il Terminale
Anche se uno sviluppatore front-end non è tenuto a conoscere Linux o il terminale, ti consiglio vivamente di familiarizzare con il terminale e impostare la tua shell (bash, zsh, csh), tra le altre cose. Se vuoi imparare ad usare il terminale e bash, ti consiglio di seguire questo corso Udemy Shell Scripting.
Strutture di Dati e Algoritmi
Questa è un’altra delle abilità generali di programmazione che non è necessaria per diventare uno sviluppatore React, ma è essenziale per diventare un programmatore in primo luogo.
Familiarizzare con i design pattern e l’architettura del software.
Capire i design pattern, come imparare gli algoritmi e le strutture dati, non è necessario per diventare uno sviluppatore React, ma vi avvantaggerà molto. I design pattern sono soluzioni collaudate a problemi che si presentano regolarmente nello sviluppo del software.
3. Conoscere React.js
Questo è il punto essenziale. Per diventare uno sviluppatore React, devi prima studiare React e padroneggiarlo. Il sito ufficiale è il luogo migliore per imparare React, tuttavia, come principiante, può essere un po’ intimidatorio.
4. Capire Come Usare Gli Strumenti di Costruzione
Se vuoi lavorare come sviluppatore React professionista, hai bisogno di familiarizzare con gli strumenti che userai come sviluppatore web, come gli strumenti di compilazione, gli strumenti di test delle unità e gli strumenti di debug.
Per iniziare, ecco alcuni degli strumenti di sviluppo specificati in questa roadmap:
Gestori di pacchetti
- npm
- yarn
- npm
Corridori di compiti
- programmi scritti usando npm
- gulp
- Webpack
- Rollup
- Parcel
Inoltre, la comprensione di tutte queste tecnologie non è richiesta; per i novizi, semplicemente imparare npm e webpack dovrebbe essere sufficiente. Si può passare ad altre tecnologie dopo aver acquisito una migliore comprensione dello sviluppo web e dell’ecosistema React.
5. Design
Conoscere un po’ di Styling non farà male se vuoi essere uno sviluppatore front-end come uno sviluppatore React. Nonostante il fatto che la RoadMap specifichi Preprocessori CSS, Framework CSS, Architettura CSS e CSS in JS,
vi consiglio di capire almeno Bootstrap, il framework CSS più importante che potreste incontrare di tanto in tanto.
Potete anche studiare Materialize o Material UI se volete fare un passo avanti e capire Bootstrap.
6. Amministrazione Statale
Un altro argomento cruciale su cui uno sviluppatore React deve concentrarsi è questo. Le seguenti sono le idee e i framework da afferrare, secondo la roadmap:
- API per lo stato e il contesto dei componenti
- Redux
- Azioni asincrone (effetti collaterali)
- Thunk Redux
- Migliore promessa Redux
- Saga di Redux
- Redux osservabile
- Helpers
- Rematch
- Riselezionare
- Persistenza dei dati
- Persistere in redux
- Fenice resuscitata
- Forma Redux
- MobX
- Agganci in React
Se tutto questo è troppo per voi, vi consiglio di concentrarvi su Redux.
7. Controllori di Tipo
Poiché JavaScript non è un linguaggio altamente tipizzato, non sarete in grado di usare un compilatore per rilevare problemi legati al tipo.
Il controllo del tipo può aiutarvi a rilevare molti errori man mano che la vostra app si espande, in particolare se utilizzate estensioni JavaScript come Flow o TypeScript per controllare il tipo del vostro intero progetto.
Anche se non le utilizzate, React ha capacità di type checking integrate, e sapere come usarle può aiutarvi a rilevare gli errori in anticipo.
Poiché Angular utilizza anche TypeScript, credo che valga la pena studiare TypeScript oltre a JavaScript, e se siete d’accordo, potete iscrivervi al corso Ultimate TypeScript su Udemy.
8. Assistenti di Forma
Oltre ai Type Checker, sono utili anche i Form Helps come Redux Form, che offre il miglior approccio per gestire lo stato dei moduli in Redux. Potete anche guardare Formik, Formsy, e Final Form oltre a Redux Form.
9. Programmazione
I componenti di routing sono una caratteristica importante di ogni applicazione in quanto sono al centro del forte approccio di programmazione dichiarativa di React.
React Router è un insieme di componenti di navigazione che puoi usare per costruire la tua applicazione in modo dichiarativo.
React Router funziona ovunque React sia in fase di rendering, sia che tu voglia URL segnalibro per la tua web app o un metodo componibile per navigare in React Native.
Si può anche guardare in Router 5, Redux-First Router, e React Router oltre a React-Router.
10. Clienti API
Raramente troverete una GUI isolata nel mondo di oggi. Invece, è più probabile progettare qualcosa che utilizza API come REST e GraphQL per connettersi con altre applicazioni. Fortunatamente, gli sviluppatori di React hanno accesso a una varietà di client API; ecco una lista di alcuni di essi:
- REST
- Fetch
- SuperAgent
- Axios
- GraphQL
- Apollo
- Relay
- urql
Apollo Client è il mio preferito poiché rende semplice lo sviluppo di applicazioni client utilizzando GraphQL. Il client ha lo scopo di aiutarvi a creare rapidamente una UI basata su GraphQL che può essere utilizzata con qualsiasi front-end JavaScript.
11. Biblioteche di Utilità
Queste sono le librerie che rendono più facile per voi fare il vostro lavoro. Ci sono un sacco di librerie utili per gli sviluppatori React, come illustrato di seguito:
Lodash
Momento
nomi di classe
Numeri
RxJS
Ramda
Non consiglio di impararli tutti, né la RoadMap. Solo Lodash, Moment e Classnames possono essere imparati.
12. Controllo di
Ora, questa è una delle competenze più importanti per gli sviluppatori React che a volte viene trascurata, ma se si vuole rimanere in testa al gruppo, ci si dovrebbe concentrare sull’apprendimento delle librerie che vi aiuteranno nei test. Troverete librerie per i test di unità, i test di integrazione e i test end-to-end anche qui.
Una lista di librerie elencate nella roadmap può essere trovata qui:
Test a livello di unità
- Jest
- Enzima
- Sinon
- Moka
- Chai
- AVA
- Nastro
Test dall’inizio alla fine
- Webdriver, Selenium
- Cipresso
- Puppeteer
- Cucumber.js
- Nightwatch.js
- Controllo dell’integrità
- Karma
Potete imparare qualsiasi libreria che desiderate, tuttavia Jest ed Enzyme sono due che vengono altamente raccomandate.
13. Internazionalizzazione
Un altro problema significativo per la progettazione del front-end, che viene utilizzato in tutto il mondo, è questo. Per il Giappone, la Cina, la Spagna e altre nazioni europee, potrebbe essere necessario supportare la versione locale della GUI.
Le seguenti tecnologie sono raccomandate dalla RoadMap, anche se sono tutte utili da conoscere:
- Intl. React
- i18next React
Entrambe le librerie includono componenti React e un’API per la formattazione di date, interi e stringhe, così come la pluralizzazione e il supporto alla traduzione.
14. Rendering Sul Server
Vi starete chiedendo quale sia la differenza tra il Server-Side Rendering e il Client-Side Rendering, quindi togliamoci il pensiero prima di discutere la libreria che permette il Server Side Rendering con React.
Il vostro browser scarica una pagina HTML di base nel rendering lato client. Il JavaScript viene poi renderizzato e il contenuto viene aggiunto ad esso.
I componenti di React vengono renderizzati sul server e il contenuto HTML risultante viene dato al client o al browser nel caso del rendering lato server.
Il seguente Server-Side Rendering è raccomandato dalla RoadMap:
- Avanti.js
- Dopo.js
- Rogue
Tuttavia, consiglio di imparare solo Next.
15. Generatore di Siti (Statico)
Il generatore di siti statici Gatsby.js è un generatore di siti statici contemporaneo. Gatsby può essere usato per sviluppare un sito web con esperienze di accesso personalizzate. Utilizza JavaScript per integrare il tuo input e generare un output HTML ben formato.
16. Integrazione di un Framework di Backend
React on Rails combina Rails con il framework front-end React di Facebook (rendering del server). Offre il rendering del server, che è utile per il crawler SEO e la velocità UX e non è disponibile in rails/webpacker.
17. App Mobile
React Native sta rapidamente diventando l’approccio preferito per costruire un’applicazione mobile in JavaScript con un look and feel nativo, che è un’altra area in cui padroneggiare React può essere davvero vantaggioso.
Le seguenti librerie sono raccomandate:
- React nativo
- Cordova/PhoneGap
Tuttavia, credo che sia sufficiente studiare React Native.
18. Postazione di Lavoro
Ci sono altri framework basati su React per lo sviluppo di GUI desktop, come React Native Windows, che permette di creare programmi nativi UWP e WPF usando React.
Le seguenti librerie sono raccomandate:
- Nativo di protone
- Electron
- Windows usando React Native
Sono, tuttavia, tutti per l’esplorazione avanzata. Puoi guardare questi se hai già padronanza di React. Se stai cercando qualche corso, ho messo su una lista di 10 corsi gratuiti di React che ti insegneranno tutto quello che devi sapere su React, compresi gli hooks.
19. Realtà Virtuale
Se volete creare app di realtà virtuale, potete usare framework come React 360, che vi permette di creare interessanti esperienze 360 e VR con React. Puoi imparare di più su React 360 se sei interessato a quell’area.
Anche se è molto esteso, c’è una significativa probabilità che tu conosca già molte delle informazioni. Non c’è bisogno di essere intimiditi o sopraffatti da questa tabella di marcia se non sapete cosa state facendo; potete iniziare in piccolo e farvi strada.
Per diventare uno sviluppatore React, si può prendere una varietà di strade. E se già conosci React, sarai quasi certamente in grado di scoprire alcuni nuovi strumenti e tecnologie da aggiungere al tuo toolkit nel 2022, permettendoti di diventare uno sviluppatore React ancora migliore.
