Introduzione a React

React è una libreria JavaScript per la creazione di interfacce utente. È stato votato come il più amato nella categoria "Framework, librerie e altre tecnologie" del sondaggio per sviluppatori 2017 di Stack Overflow.

React è una libreria JavaScript e le applicazioni React costruite su di essa vengono eseguite nel browser, NON sul server. Applicazioni di questo tipo comunicano con il server solo quando necessario, il che le rende molto veloci rispetto ai siti web tradizionali che costringono l'utente ad attendere che il server renda intere pagine e le invii al browser.

React viene utilizzato per creare interfacce utente: ciò che l'utente vede sul proprio schermo e con cui interagisce per utilizzare la tua app web. Questa interfaccia è suddivisa in componenti, invece di avere una pagina enorme la suddividi in parti più piccole note come componenti. In termini più generali, questo approccio è chiamato Modularità.

• È dichiarativo: React utilizza un paradigma dichiarativo che rende più facile ragionare sulla tua applicazione.
• È efficiente: React calcola il set minimo di modifiche necessarie per mantenere aggiornato il tuo DOM.
• Ed è flessibile: React funziona con le librerie e i framework che già conosci.

React coinvolge la Composizione, ovvero molti componenti che avvolgono le funzionalità in un contenitore incapsulato.

Molti siti Web popolari utilizzano React implementando il modello architettonico MVC. Facebook (parzialmente), Instagram (completamente), Khan Academy (parzialmente), New York Times (parzialmente), Yahoo Mail (completamente), la nuova app per gallerie di foto e video di Dropbox Carousel (completamente) sono i popolari siti Web noti per l'utilizzo di React.

const Component2 = () => {
return <div></div>;
};
const Component3 = () => {
return <div></div>;
};
const Component1 = () => {
return (
<div>
<Component2 />
<Component3 />
</div>
);
};
ReactDOM.render(
<Component1 />,
document.getElementById(“app”)
);

L'approccio del codice imperativo istruisce JavaScript su come eseguire ogni passaggio. Con l'approccio del codice dichiarativo, diciamo a JavaScript cosa vogliamo che venga fatto e lasciamo che JavaScript si occupi di eseguire i passaggi.

La programmazione dichiarativa è un paradigma di programmazione che esprime la logica di un calcolo senza descriverne il flusso di controllo. La programmazione dichiarativa presenta alcuni vantaggi come effetti collaterali ridotti (si verifica quando modifichiamo uno stato o mutiamo qualcosa o effettuiamo una richiesta API), mutabilità ridotta al minimo (poiché gran parte di essa è astratta), leggibilità migliorata e meno bug.

React ha anche un flusso di dati unidirezionale. L'interfaccia utente in React è in realtà la funzione dello stato. Ciò significa che quando lo stato si aggiorna, aggiorna anche l'interfaccia utente. Quindi la nostra interfaccia utente progredisce man mano che lo stato cambia.

Caratteristiche di ReactJS

JSX: JSX è un'estensione di javascript. Sebbene non sia obbligatorio utilizzare JSX in React, è una delle buone caratteristiche e facile da usare.

Componenti : i componenti sono come funzioni javascript pure che aiutano a semplificare il codice suddividendo la logica in codice indipendente riutilizzabile. Possiamo usare componenti come funzioni e componenti come classi. I componenti hanno anche uno stato, oggetti di scena che rendono la vita facile. All'interno di una classe, lo stato di ciascuno degli oggetti di scena viene mantenuto.

DOM virtuale: React crea un dominio virtuale, ovvero una cache della struttura dei dati in memoria. Solo le modifiche finali del DOM sono state successivamente aggiornate nei browser DOM.

Espressioni Javascript: le espressioni JS possono essere utilizzate nei file jsx utilizzando parentesi graffe, ad esempio {}.

Vantaggi di ReactJS

Ecco alcuni importanti vantaggi / vantaggi dell'utilizzo di ReactJS:

• ReactJS utilizza dom virtuale che utilizza la cache della struttura dei dati in memoria e solo le modifiche finali vengono aggiornate nei browser dom. Questo rende l'app più veloce.
• È possibile creare componenti di propria scelta utilizzando la funzione dei componenti di reazione. I componenti possono essere riutilizzati e sono anche utili nella manutenzione del codice.
• Reactjs è una libreria javascript open source, quindi è facile iniziare.
• ReactJS è diventato molto popolare in un breve lasso di tempo e mantenuto da Facebook e Instagram. È utilizzato da molte aziende famose come Apple, Netflix, ecc.
• Facebook mantiene ReactJS, la libreria, quindi è ben mantenuta e aggiornata.
• ReactJS può essere utilizzato per sviluppare un'interfaccia utente ricca per app desktop e mobili.
• Facile da eseguire il debug e testare in quanto la maggior parte della codifica viene eseguita in Javascript anziché in Html.

Ecco i contro / svantaggi dell'utilizzo di ReactJS:

• La maggior parte del codice è scritto in JSX, cioè, Html e css fanno parte di javascript, può creare confusione poiché la maggior parte degli altri framework preferisce mantenere Html separato dal codice javascript.
• La dimensione del file di ReactJS è grande.

La magia di React deriva dalla sua interpretazione del DOM e dalla sua strategia per la creazione di interfacce utente.

Durante la creazione di app lato client, un team degli sviluppatori di Facebook si è reso conto che il DOM è lento (il Document Object Model (DOM) è un'API (application programming interface) per documenti HTML e XML. Definisce la struttura logica dei documenti e il modo in cui si accede a un documento e lo si manipola.). Quindi, per renderlo più veloce, React implementa un DOM virtuale che è fondamentalmente una rappresentazione ad albero DOM in Javascript. Quindi, quando ha bisogno di leggere o scrivere sul DOM, ne userà la rappresentazione virtuale. Quindi il DOM virtuale proverà a trovare il modo più efficiente per aggiornare il DOM del browser.

A differenza degli elementi DOM del browser, gli elementi React sono oggetti semplici e sono economici da creare. React DOM si occupa di aggiornare il DOM in modo che corrisponda agli elementi React. La ragione di ciò è che JavaScript è molto veloce e vale la pena tenere un albero DOM al suo interno per accelerarne la manipolazione.

Sebbene React sia stato concepito per essere utilizzato nel browser, grazie al suo design può essere utilizzato anche nel server con Node.js.