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

Hai sentito parlare di ReactJS ma non sai da dove cominciare? Hai iniziato a giocare con ReactJS ma non sei sicuro di come usarlo nella tua vita quotidiana? Questo articolo sarà la tua guida per imparare e padroneggiare la libreria JavaScript React, 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 non necessaria 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 quello 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 sui 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 (o conoscenza di) React!

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

Perché usare ReactJS?

Prima di tutto, hai una scelta davanti a te quando si tratta di framework JavaScript. Quindi, perché dovresti scegliere Reagire? Bene, per cominciare, quando si tratta di aiutare gli sviluppatori a creare app di grandi dimensioni che sono facili da capire e con cui gli utenti finali possono interagire.

Per gli sviluppatori che hanno lavorato solo con jQuery o Vanilla JavaScript fino ad ora, 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 casella modale o una barra di navigazione. Poiché React utilizza DOM virtuale invece di scrivere e riscrivere elementi DOM reali ogni volta che si verifica un cambiamento di stato (come spesso accade in Angular), l'utilizzo di React può far risparmiare tempo prezioso consentendo meno righe di codice e allo stesso tempo rendendo le applicazioni più veloci di quanto non fossero prima.

Installandolo in un browser

Prima di poter utilizzare React in un browser, devi 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 questo. 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 unico 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 manteniamo tutti i nostri componenti React in un'unica directory (cosa che dovresti fare). Quindi, creiamo una directory src/components vuota e spostiamo App.js in essa: mv app/App.js src/components/app-react.js. Quindi rinominalo in app-react.js.

Per usare React invece del solo ES6, cambia use strict; nella parte superiore del tuo file per usare babel; Dovrai anche installare Babel tramite npm install –save babel-CLI babel-preset-es2015 babel-preset-react, che farà compilare a Babel la tua nuova sintassi JSX.

Inizia a costruire 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 è sostituire il codice back-end e i componenti front-end. È dotato di tutto ciò di cui hai bisogno, comprese 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. Dopo averli 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 intestazioni, piè di pagina, loghi e pulsanti diversi. Tuttavia, quando si lavora con React.js, invece di utilizzare più elementi HTML per ciascun componente della pagina, è possibile utilizzare un singolo elemento HTML per rappresentarli tutti. Questo può sembrare controintuitivo; dopotutto, non è quello che facciamo da anni?

Potrebbe piacerti: Il motore JavaScript di Facebook (Hermes) aumenta la reazione nativa 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 puoi usarlo. 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 puoi padroneggiarlo facilmente, leggi il nostro tutorial ReactJS completo!

Per iniziare a costruire 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 stai utilizzando macOS o Linux. Se neanche questo funziona, Google dovrebbe essere in grado di aiutare a capire cosa c'è che non va! Una volta che Node è stato installato correttamente con la versione 10+, siamo pronti per procedere con la creazione del nostro progetto da zero!

Statico vs dinamico vs PureComponent

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

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

Metodi del ciclo di vita nei componenti ReactJS

Esistono alcuni 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 del 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. Il metodo componentDidMount() viene anche chiamato immediatamente dopo che un componente è stato montato e renderizzato. Qui puoi aggiungere codice che dovrebbe essere eseguito una volta che un componente è stato completamente inizializzato (ad esempio, creando nuove richieste di rete).

Stato di gestione 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, ha bisogno di un riferimento (props) a quell'altro componente per farlo. E se vuoi che i tuoi oggetti di stato o gli array 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 mentre può essere abbastanza semplice per i componenti di 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 dei dati dal componente padre al componente figlio

Esistono due modi per passare i dati da un componente padre a un componente figlio: tramite oggetti di scena o lo stato. Il passaggio di dati tramite props può essere utile per definire variabili per i tuoi componenti, come definire quanti elementi ci sono in un array. D'altra parte, il passaggio dei 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 è opportuno utilizzarli nel nostro codice!

Potrebbe piacerti anche: Quali sono i miglioramenti che reagiscono alle offerte JS in WordPress senza testa?

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 di reazione. 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 crei 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.