React: la tua guida completa per principianti all'utilizzo di ReactJS

Hai sentito parlare di ReactJS ma non sai da dove iniziare? Hai iniziato a giocare con ReactJS ma non sei sicuro di come usarlo nella tua quotidianità? Questo articolo sarà la tua guida per apprendere e padroneggiare la libreria React JavaScript, la libreria più popolare utilizzata dagli sviluppatori oggi. Ti mostrerò esattamente come iniziare con ReactJS e come integrarlo nel tuo flusso di lavoro in modo da poter creare interfacce utente più dinamiche senza dover fare una deviazione inutile attraverso un altro framework o libreria. Iniziamo!

Cos'è ReactJS?

React è una libreria di sviluppo front-end che ti incoraggia a creare componenti riutilizzabili. Se stai cercando un modo efficiente per creare interfacce utente, React potrebbe essere proprio ciò di cui hai bisogno. Quando crei interfacce utente con Vanilla JavaScript o jQuery, il tuo codice può diventare molto complicato e ingombrante molto rapidamente. Utilizzando React e il suo metodo preferito di sviluppo basato su componenti, il tuo codice sarà molto più facile da riutilizzare e mantenere.

In effetti, una volta creati alcuni componenti, è relativamente facile per gli altri sviluppatori del tuo team entrare e contribuire al codice senza avere alcuna esperienza con (o conoscenza di) React!

Consigliato per te: 5 degni consigli per ottimizzare le prestazioni dell'app React Native.

Perché utilizzare ReactJS?

Prima di tutto, hai una scelta di fronte a te quando si tratta di framework JavaScript. Quindi, perché dovresti scegliere React? Bene, per cominciare, quando si tratta di aiutare gli sviluppatori a creare app di grandi dimensioni facili da comprendere e da utilizzare per gli utenti finali.

Per gli sviluppatori che finora hanno lavorato solo con jQuery o Vanilla JavaScript, imparare a lavorare con le nuove tecnologie può essere frustrante. In alcuni casi, gli sviluppatori potrebbero aver bisogno di centinaia di righe di codice solo per creare una semplice finestra modale o una barra di navigazione. Poiché React utilizza il DOM virtuale invece di scrivere e riscrivere elementi DOM reali ogni volta che c'è un cambiamento di stato (come spesso accade in Angular), l'utilizzo di React può far risparmiare tempo prezioso consentendo meno righe di codice e rendendo anche le tue applicazioni più veloci di quanto non fossero Prima.

Installandolo in un browser

Prima di poter utilizzare React in un browser, è necessario installarlo. Fortunatamente, è un processo semplice grazie a npm e Browserify. Utilizzi Node o un altro ambiente lato server? Puoi anche usare npm e Browserify anche per quello. Una volta installato tutto, crea un file HTML con il tuo editor di testo preferito. Altrimenti, usa un generatore standard come Create-React-App che crea un progetto iniziale di base per te che ha già tutte queste cose impostate.

Conversione di App.js per utilizzare ReactJS

Tutto il nostro codice è attualmente in un singolo file denominato App.js. Ma questo rende difficile il test. Quindi, suddividiamolo in più file. Inizieremo convertendo un componente dall'essere scritto in ES6 all'essere scritto in JSX. È più semplice se teniamo tutti i nostri componenti React in una singola directory (cosa che dovresti fare). Quindi, creiamo una directory src/components vuota e spostiamoci App.js: mv app/App.js src/components/app-react.js. Quindi rinominalo in app-react.js.

Per utilizzare React anziché solo ES6, modificare use strict; in cima al tuo file per usare babel; Dovrai anche installare Babel tramite npm install –save babel-CLI babel-preset-es2015 babel-preset-react, che farà in modo che Babel compili la tua nuova sintassi JSX.

Inizia a creare con la nostra app di esempio

Ci sono molti modi per iniziare con React, ma uno dei nostri preferiti è creare una semplice app To-Do List. Per farti muovere rapidamente ed evitare molti errori comuni, abbiamo creato un'applicazione di esempio in cui tutto ciò che devi fare è scambiare il codice back-end e i componenti front-end. Viene fornito con tutto ciò di cui hai bisogno, incluse le immagini, per assicurarti che sia bello come funziona.

Non hai voglia di programmare te stesso? Nessun problema! Puoi effettivamente copiare tutti i nostri componenti seguendo questi semplici passaggi. Una volta che li hai copiati nel tuo progetto, modificali semplicemente per adattarli ai tuoi scopi! La scelta è tua! Dai un'occhiata a tutte e tre le opzioni per iniziare qui.

Esempio di base utilizzando i componenti

Se guardi qualsiasi applicazione web, una delle prime cose che noterai è che ogni elemento è separato. In una pagina tipica sono presenti diverse intestazioni, piè di pagina, loghi e pulsanti. Tuttavia, quando lavori con React.js, invece di utilizzare più elementi HTML per ogni componente della tua pagina, puoi utilizzare un singolo elemento HTML per rappresentarli tutti. Questo può sembrare controintuitivo; dopotutto, non è quello che facciamo da anni?

Potrebbe piacerti: Facebook JavaScript Engine (Hermes) potenzia React Native su Android.

Introduzione alla sintassi JSX

JSX non è un linguaggio di programmazione come JavaScript o TypeScript, ma una sintassi progettata come estensione di JavaScript. Per questo motivo, è importante che i nuovi sviluppatori capiscano come funziona e dove è possibile utilizzarlo. Il codice JSX è scritto in un modo molto simile all'HTML, rendendo il codice JSX un ottimo primo passo per i nuovi sviluppatori che stanno imparando entrambe le lingue contemporaneamente. Per ulteriori informazioni su ciò che rende JSX unico e su come padroneggiarlo facilmente, leggi il nostro tutorial completo su ReactJS!

Per iniziare a creare il tuo primo progetto React, crea una nuova directory digitando mkdir react_tutorial all'interno del tuo terminale. Al termine dell'esecuzione, accedi alla directory appena creata digitando cd react_tutorial. Quindi apri il tuo terminale e avvia Node.js digitando node -v.

Dovresti vedere v10.x elencato accanto a Node se Node è stato installato correttamente. In caso contrario, prova a utilizzare nvm install 10 se utilizzi macOS o Linux. Se anche questo non funziona, allora Google dovrebbe essere in grado di aiutare a capire cosa non va lì! Una volta che Node è installato correttamente con la versione 10+, siamo pronti per passare alla creazione del nostro progetto da zero!

Statico vs Dinamico vs PureComponent

Quando si creano app Web con JavaScript moderno, sono disponibili tre opzioni principali per la creazione di componenti dell'interfaccia utente. Questi includono HTML statico (react-markup), richieste AJAX dinamiche (react-data) e riutilizzando elementi DOM esistenti (react-pure). Ogni metodo ha i suoi meriti e può essere applicato in modo diverso a seconda del caso d'uso specifico.

Ad esempio, se sai che alcuni elementi saranno sempre disponibili, puoi inserirli in tag HTML statici. Tuttavia, se è necessario recuperare contenuti da database che potrebbero non esistere ancora, l'utilizzo di react-data è una scelta migliore. Quando decidi quale metodo di creazione dei componenti si adatta meglio al tuo progetto, è importante pensare a quanto stabile e permanente sarà ogni parte della tua app.

Metodi del ciclo di vita nei componenti ReactJS

Ci sono una manciata di metodi del ciclo di vita che puoi utilizzare all'interno dei tuoi componenti per controllare diverse parti del loro ciclo di vita. Il metodo componentWillMount() viene chiamato immediatamente prima che venga eseguito il rendering di un componente per la prima volta. Al suo interno, puoi aggiungere qualsiasi inizializzazione necessaria per il tuo componente, come il salvataggio delle informazioni utilizzando localStorage. Anche il metodo componentDidMount() viene chiamato immediatamente dopo che un componente è stato montato e reso. Qui puoi aggiungere il codice che dovrebbe essere eseguito una volta che un componente è stato completamente inizializzato (ad esempio, creando nuove richieste di rete).

Gestione dello stato nei componenti

Il modo in cui Reacts si avvicina alla gestione dello stato è in qualche modo unico. Per capire perché dobbiamo prima considerare come la maggior parte dei framework gestisce gli stati.

Tradizionalmente, uno sviluppatore penserebbe allo stato di un componente come memorizzato al suo interno. Questo porta a molti problemi. Se un componente desidera aggiornare lo stato di un altro componente, per farlo ha bisogno di un riferimento (props) a quell'altro componente. E se vuoi che i tuoi oggetti o array di stato rimangano sincronizzati tra i componenti, hai bisogno di una sorta di archivio dati centralizzato o emettitore di eventi a cui tutti i componenti possano accedere.

E sebbene possa essere abbastanza semplice per i componenti in una piccola app con solo due o tre stati diversi, cosa succede quando la tua app ha dozzine di stati diversi? Come li gestisci tutti?

Passaggio di dati dal componente padre al componente figlio

Ci sono due modi per passare i dati da un componente genitore a un componente figlio: attraverso gli oggetti di scena o lo stato. Il passaggio di dati tramite oggetti di scena può essere utile per definire le variabili per i tuoi componenti, come definire quanti elementi ci sono in un array. D'altra parte, il passaggio di dati tramite lo stato può essere utile se si desidera passare oggetti di grandi dimensioni (che potrebbero potenzialmente rallentare l'applicazione) o definire funzioni che si desidera chiamare dall'interno del componente figlio. Esaminiamo entrambi gli approcci e vediamo quando è appropriato utilizzarli nel nostro codice!

Potrebbe piacerti anche: Quali sono i miglioramenti offerti da React JS in Headless WordPress?

Conclusione

Quando assumi uno sviluppatore ReactJS, assicurati di scegliere un libero professionista che abbia esperienza nel lavorare con JavaScript, CSS, HTML e Node.js da oltre 5 anni. È importante che il tuo sviluppatore possa dimostrare la propria esperienza fornendo progetti di esempio e progettando progetti pertinenti alle tue esigenze specifiche. Questo li aiuterà a capire facilmente i tuoi obiettivi e obiettivi aziendali.

Qualsiasi esperto inizierà sempre ponendo domande prima di iniziare qualsiasi lavoro. Pertanto, l'assunzione di un esperto che pone domande al momento opportuno è un must durante la creazione di un sito Web utilizzando il framework React. Un costo medio di assunzione degli sviluppatori ReactJS sarebbe compreso tra $ 40 e $ 100 all'ora. Ma gli esperti fanno pagare più del normale. Quindi, tienilo a mente quando stabilisci un budget per la creazione di un sito Web utilizzando il framework di sviluppo ReactJS.

 Questo articolo è stato scritto da Rahul Kalsariya di Tagline Infotech LLP.