Panoramica di React
React è una delle librerie JavaScript open source. Viene utilizzato per la creazione di interfacce utente interattive. È una libreria efficiente, dichiarativa e flessibile. Si occupa del componente V ie View di Model- View- Controller (MVC). Non è un intero framework ma solo una libreria di frontend. Permette di creare o creare interfacce utente complesse usando pezzi di codice isolati e piccoli noti come componenti. Il vantaggio principale dei componenti è che la modifica apportata a qualsiasi componente non influisce sull'intera applicazione.
Questo è stato sviluppato dall'ingegnere del software, Jordan Walke, che lavora su Facebook. Facebook lo ha distribuito nel suo feed di notizie e lo ha utilizzato per migliorare l'interfaccia utente. È stato reso pubblico a maggio 2013.
È specificamente utilizzato per applicazioni a pagina singola. Il suo scopo è di essere scalabile, semplice e veloce. Questo può essere usato in combinazione con diversi framework JavaScript o librerie come Angular JS.
Caratteristiche di React
Vediamo le caratteristiche essenziali e più esigenti di React:
1. JSX
JSX significa JavaScript XML. È un'estensione della sintassi del linguaggio JS. Fornisce un modo per rendere i componenti usando una sintassi simile all'HTML. React usa JSX per scrivere i suoi componenti. Può usare anche JavaScript puro ma preferisce JSX. Viene utilizzato da Babel, un pre-processore per convertire il testo simile a HTML trovato nei file JavaScript in oggetti JS standard. Il codice HTML può essere incorporato in JavaScript per rendere il codice HTML più e facilmente comprensibile e migliorare le prestazioni di JavaScript e rendere l'applicazione robusta.
2. Modello a oggetti del documento virtuale
React crea una cache della struttura dei dati in memoria, quindi calcola la differenza tra il DOM precedente e quello nuovo e quindi aggiorna le modifiche o le mutazioni eseguite. Aggiorna solo le modifiche, non l'intera applicazione. Questo aiuta ad aumentare la velocità e le prestazioni e riduce lo spreco di memoria.
3. Testabilità
Le viste React sono utilizzate come funzioni dello stato in cui lo stato determina il comportamento del componente. Pertanto, possiamo apportare modifiche allo stato e quindi passarlo a una vista di ReactJS e quindi determinare l'output e le azioni, le funzioni e gli eventi. Ciò semplifica i test e il debug.
4. SSR
È l'acronimo di Server-Side Rendering. Permette di pre-renderizzare lo stato iniziale dei componenti sul lato server. Il browser può eseguire il rendering senza attendere l'esecuzione o il caricamento di tutti i JavaScript. Ciò consente di caricare le pagine Web più velocemente. Aiuta l'utente a visualizzare le pagine Web anche quando React sta ancora scaricando JavaScript, collegando eventi o creando DOM virtuali sul back-end.
5. Rilegatura dati a senso unico
Consente il flusso di dati unidirezionale, ovvero l'associazione di dati unidirezionali. Grazie a questa funzione, c'è un migliore controllo sull'applicazione. Fa in modo che lo stato dell'applicazione sia contenuto in negozi specifici e quindi tutti gli altri componenti rimangano vagamente accoppiati. Ciò migliora la flessibilità e l'efficienza dell'applicazione.
6. Semplicità
I file JSX rendono l'applicazione semplice e comprensibile. JavaScript standard può essere utilizzato per codificare, ma l'utilizzo di JSX lo rende più semplice. Diversi metodi del ciclo di vita e il suo approccio basato sui componenti semplificano l'apprendimento e l'esecuzione.
7. Curva di apprendimento
Rispetto ad altri framework, la curva di apprendimento di React è bassa. I principianti che hanno un linguaggio di programmazione di base possono anche imparare a reagire facilmente.
Come funziona?
Quando il team di sviluppatori di Facebook stava costruendo app sul lato client, ha scoperto che il Document Object Model (DOM) è lento. Per renderlo più veloce, in React è implementato un DOM virtuale che è una rappresentazione ad albero di DOM in JavaScript.
React opera su Virtual DOM. Non manipola il documento sul browser dopo aver apportato le modifiche, apporta modifiche al DOM virtuale. Quando il DOM virtuale viene completamente aggiornato, aggiorna il DOM del browser nel modo più efficiente possibile. Il DOM virtuale di React risiede interamente nella memoria. Rappresenta il DOM del browser Web, quindi quando viene scritto un componente React, viene creato un componente virtuale che è economico da creare e che viene trasformato in DOM da React. React è stato creato per essere utilizzato nel browser ma con Node.js, può essere utilizzato anche con il server.
Come lo usiamo?
L'uso di React è semplice poiché include un file JS in HTML. Vediamo l'uso di React con un semplice esempio:
Codice:
First React Code
ReactDOM. render( First Code, document. querySelector ('#application')
);
First React Code
ReactDOM. render( First Code, document. querySelector ('#application')
);
First React Code
ReactDOM. render( First Code, document. querySelector ('#application')
);
First React Code
ReactDOM. render( First Code, document. querySelector ('#application')
);
Sembra un po 'difficile ma è facile da implementare e da imparare.
Chi usa React?
React sta diventando popolare nel mercato di oggi e le sue caratteristiche stanno aiutando le grandi aziende a migliorare la loro esperienza e le loro interfacce.
Giganti di Internet come Facebook, Instagram, Netflix, New York Times, Yahoo Mail, Khan Academy, WhatsApp, Vivaldi Browser, Codecademy e Dropbox utilizzano React in un modo o nell'altro. Sberbank of Russia ha anche utilizzato React per sviluppare il sito web della propria banca.
Molti siti Web come github.com, reddit.com, outlook.live.com, bitbucket.org, account.godaddy.com e molti altri usano anche React.
Vantaggi di React
- SEO friendly
- È facile creare casi di test per l'interfaccia utente.
- I componenti di React possono essere riutilizzati facilmente.
- Garantisce un rendering più veloce.
- Il debug è semplice.
- Facilità di migrazione.
- Migliora la produttività.
- Scrivere componenti è semplice.
- Codice stabile.
- Ha un utile set di strumenti per sviluppatori.
- React native è disponibile per lo sviluppo di app mobili
- Facile da imparare.
- Migliora le prestazioni.
Svantaggi di React
- Alto ritmo di sviluppo.
- Scarsa documentazione.
- Ulteriore seccatura SEO.
- Solo orientato alla vista.
- Libreria di grandi dimensioni di React.
- Curva di apprendimento per principianti.
- Richiede l'elaborazione manuale delle modifiche ai dati.
- Hai bisogno di più codice in alcuni casi.
Articolo raccomandato
Questa è stata una guida a What is React. Qui abbiamo discusso i concetti, la definizione e la comprensione con il vantaggio e lo svantaggio di React. Puoi anche consultare i nostri altri articoli suggeriti per saperne di più -
- Che cos'è la programmazione agile?
- Che cos'è il multithreading in Java?
- Usi di Raspberry Pi
- Che cos'è JMS? | Definizione | Spiegazione
- React Native vs React
- Creazione di pulsanti di stile in React Native