Strada per reagire

Dec 01 2022

React è una delle migliori librerie Javascript utilizzate per la creazione di applicazioni web. Per comprendere React, dobbiamo capire come funziona dietro il cofano.

Foto di Ksenia Yakovleva su Unsplash

React è una delle migliori librerie Javascript utilizzate per la creazione di applicazioni web. Per comprendere React, dobbiamo capire come funziona dietro il cofano. In questo articolo, esaminiamo i fondamenti di React, l'API React non elaborata, come funziona internamente e infine creiamo un componente React riutilizzabile.

Presumo che tu abbia una conoscenza di base dei concetti di Javascript e HTML DOM. In caso contrario, puoi esaminare questi concetti qui: Guida Javascript , Introduzione al DOM .

Ora entriamo nel nostro argomento!!

Come viene creata una pagina Web?

Sei mai stato curioso di sapere come funziona il web? Cosa succede dopo aver digitato l'URL di un sito web e fatto clic su Invio? Come puoi vedere quella pagina web sul nostro schermo? Esaminiamolo passo dopo passo.

1. Dopo aver cercato un sito Web, viene inviata una richiesta HTTP al server.

2. Il server invierà i file del sito web.

3. Il browser analizzerà questi file. Inizialmente viene analizzato un file HTML, quindi vengono analizzati i file CSS e JavaScript.

4. Il browser crea il DOM dall'HTML analizzato e lo visualizza sullo schermo.

Questo è il modo in cui una pagina web viene visualizzata sullo schermo (ci sono altri concetti come server DNS e protocollo HTTP, ma questa non è la nostra area di preoccupazione). È così semplice, ma aspetta, cos'è questo DOM? Da dove proviene? Esploriamo un po' il DOM?

DOM fa riferimento al Document Object Model, che rappresenta un documento HTML con un albero logico. Ogni ramo contiene nodi e ogni nodo contiene oggetti. I metodi DOM consentono l'accesso al DOM. Con questi metodi, puoi modificare la struttura e il contenuto del documento.

Come tutti sappiamo, l'HTML è l'elemento costitutivo di base del Web e possiamo creare pagine Web utilizzando l'HTML. Creiamo una semplice pagina web che mostri "Ciao mondo!!" come mostrato di seguito:

<html>
  <body>
    <div id="root">
      <h1 id="greet">Hello World!!</h1>
    </div>
  </body>
</html>

Per consentire a javascript di interagire con il DOM, dobbiamo aggiungere un tag script nel file HTML e puoi scrivere codice per creare, eliminare o aggiornare gli elementi nel DOM (questo è ciò che chiamiamo manipolazione del DOM).

Diamo un'occhiata a un codice JavaScript che interagisce con il codice "Hello World!!" creato sopra. pagina e cambia il suo contenuto in "Wassup World!!".

Creazione di elementi HTML con Javascript:

Poiché abbiamo visto che possiamo modificare elementi HTML tramite javascript, proviamo a creare una pagina web che contenga un div con “root” come id e h1 come child del div. h1 contiene "Hello World!!". Il codice può essere trovato nella sandbox sottostante.

Ma la creazione di elementi tramite Javascript è imperativa. Per eseguire questa operazione, dobbiamo fornire a Javascript le istruzioni passo-passo. Ad esempio, se desideri creare un div con un id, devi prima creare quell'elemento div , quindi impostare l' attributo id e infine aggiungere questo div al suo genitore. È già troppo lavoro. E se ci fosse un modo per dire a JavaScript solo quale elemento creare piuttosto che come crearlo (approccio dichiarativo)? Riduce molto codice JavaScript. Sembra fantastico, vero? Ma come lo raggiungiamo? Cos'è questo approccio imperativo e dichiarativo?

La programmazione imperativa è come fai qualcosa e la programmazione dichiarativa è più simile a quello che fai. Ecco un bellissimo articolo sulla programmazione imperativa e dichiarativa .

React è un linguaggio dichiarativo, ovvero ci consente di scrivere codice senza preoccuparci di come stanno accadendo le cose sotto il cofano.

Quindi, diamo un'occhiata a come la programmazione dichiarativa può semplificarci la vita.

Una panoramica dell'API React:

L'API React include metodi per manipolare il DOM. ad esempio, React.createElement() e ReactDOM.render(). Considera il metodo React.createElement() come equivalente a document.createElement() e ReactDOM.render() come document.append(). Diamo un'occhiata in profondità a questi metodi.

React.createElement() accetta due argomenti: l'elemento da creare e gli oggetti di scena. Se vuoi creare un semplice tag div con l'id "root" e il testo "Hello World!" al suo interno, sarà simile a questo:

const elementType = "div";
const elementProps = {id: "root", children: "Hello World!!"}
const newDiv = React.createElement(elementType, elementProps)

const elementType = "h1";
const elementProps = {className: "heading", children: "Hello World!!"}
const heading = React.createElement(elementType,elementProps)

ReactDOM.render(heading,document.getElementById("root"))

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(heading)

React è il punto di partenza per usare React nel tuo codice. Puoi installarlo come pacchetto tramite npm o utilizzare i file di script disponibili su unpkg.com . Usiamo i file di script nel nostro codice di esempio, poiché non dobbiamo preoccuparci di installarli.

Ora ricreamo lo stesso "Hello World!!" pagina con l'API React.

L'elica child per React.createElement() può essere testo semplice o può essere un altro elemento, ecco come creiamo elementi nidificati. Per illustrare, si consideri il seguente codice HTML: un div come contenitore che contiene un altro div come figlio. Il tag div figlio contiene due tag span con il testo "Ciao" e "Mondo". Collegamento a codeSandbox

creazione di elementi nidificati con React API

Per creare elementi annidati dobbiamo utilizzare metodi annidati, il che rende molto difficile la lettura e la comprensione del codice.
Quindi abbiamo bisogno di un codice più leggibile. Quindi esiste un modo alternativo per rendere leggibile il codice? E se potessimo scrivere una sintassi simile a HTML invece di utilizzare l'API React? JSX entra in scena qui. Dedichiamo qualche minuto a conoscere JSX.

JSX:

JSX è una sintassi simile a HTML (ma non HTML), che è zucchero sintattico sulla tua API React grezza. Puoi scrivere tutti questi metodi React in una semplice sintassi simile a HTML con l'aiuto di JSX.

Poiché JSX non è Javascript, è necessario trasporlo in JavaScript, che viene compreso dal browser.

Babel è il transpiler che trasforma JSX in Javascript. Tutto il JSX viene convertito nell'API React da Babel, come mostrato di seguito.

Babel trasforma JSX in Javascript

Come visto nell'immagine precedente, <div id=”root”> viene convertito in React.createElement(“div”,{id:”root”},children). Ecco come Babel converte JSX nell'API React.

Per utilizzare Babel nel nostro progetto, dobbiamo utilizzare un file di script da unpkg.com e possiamo iniziare a scrivere JSX all'interno del tag di script menzionando type=” text/babel” . Per maggiore chiarezza, puoi fare riferimento alla sandbox sottostante

Siamo arrivati così lontano dalla modifica imperativa del DOM tramite Javascript all'utilizzo di JSX. A differenza di Javascript, non ci preoccupiamo di come creare elementi durante l'utilizzo di JSX. È compito di Babel convertirli nell'API React, che modificherà il DOM.

È così che l'approccio dichiarativo di React semplifica le nostre vite. Ma non è ancora finita e ci manca l'idea principale di React, ovvero la riusabilità. Creiamo un componente React riutilizzabile.

Creazione di componenti React:

Poiché sappiamo che le funzioni semplificano la nostra vita condividendo il codice, possiamo anche condividere il codice JSX come funzioni, ma queste sono chiamate componenti in React.

Facciamo un esempio.

<div className="container">
  <div className="msg">Hello World!!</div>
  <div className="msg">Bye World!!</div>
</div>

function message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      {message("Hello World!!")}
      {message("GoodBye World!!")}
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

const element = React.createElement("div",{className="container"},
  React.createElement(message,"Hello World!!"),
  React.createElement(message,"GoodBye World!!")
)

Abbiamo passato la funzione messaggio come parametro a React.createElement() invece di un elemento. quando passiamo una funzione come parametro a React.createElement(), React Reconciler chiamerà quella funzione con il parametro che abbiamo passato. Quando il reconciler incontra un elemento host, lascia che il renderer si occupi di montarlo.

I componenti host sono componenti specifici della piattaforma appartenenti all'ambiente host (come browser o dispositivi mobili). Nel caso di un host DOM, questi possono essere elementi HTML come div o img .

Nel nostro caso, si verificheranno due chiamate di funzione, message ("Hello World!!") e message ("GoodBye World!!") , ed entrambe le funzioni restituiranno:

<div className=”msg”> Ciao mondo!! </div>

<div className=”msg”>Arrivederci mondo!! </div>

Proprio come utilizzare JSX per rendere il codice più leggibile rispetto all'utilizzo dell'API React non elaborata, l'utilizzo di JSX per componenti personalizzati (funzioni Javascript) rende il nostro codice più pulito e più leggibile. Ricorda che è Babel che è responsabile di prendere il nostro JSX e di trasferirlo nell'API React, quindi dobbiamo configurare Babel in modo tale che passi la funzione con il suo nome piuttosto che con una stringa.

Per utilizzare un componente personalizzato come tag JSX, dobbiamo scrivere in maiuscolo il primo carattere del nome della funzione in modo che Babel lo riconosca come componente personalizzato. Sembra così:

function Message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      <Message>Hello World!!</Message>
      <Message>GoodBye World!!</Message>
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

Evviva!! abbiamo creato il nostro primo componente React

Conclusione:

Ecco come funziona React dietro le quinte. Ricorda che è solo un articolo fondamentale che spiega come funzionano le cose sotto il cofano, e ci sono molti altri concetti come Stato, DOM virtuale, riconciliazione, ecc. che rendono React potente ed efficiente.