Crea un'applicazione React da Zero

Di certo la via più semplice per creare un’app React è decisamente tramite l’utilizzo del tool ufficiale create-react-app, ma se volessimo realmente iniziare da zero, quali sono i passi da seguire per una semplice istallazione funzionale di un'applicazione web?

Preambolo

1. Mentalmente dobbiamo immaginare un'app React come una semplice pagina HTML all'interno della quale viene eseguito un file Javascript (per lazy loading e parziali di bundle scriveremo un articolo dedicato in futuro).
2. Nel nostro editor di codice, piuttosto che scrivere il suddetto bundle Javascript tutto d’un pezzo, utilizzeremo la possibilità data da Javascript ES6, di definire blocchi di codice Javascript come moduli da poter successivamente esportare ed importare in diverse parti dell'applicazione. Per processare gli import/export e coniugarli in un singolo file (bundle), utilizzeremo la libreria Webpack. 
3. Nella nostra semplice app, inoltre, utilizzeremo anche la sintassi JSX, nativa di React e react-dom che ci permetterà di scrivere tag HTML all’interno di blocchi di codice Javascript. Per trasformare questa sintassi non nativa di Javascript, utilizzeremo la libreria Babel che altro non fa che tradurre il nostro codice speciale in sintassi di base Javascript. In questo modo diversi browser potranno fruire e facilmente invocare le funzioni Javascript definite. 

Cartelle e strutture dei file

Per prima cosa dobbiamo creare un progetto con npm o yarn. (Per mia preferenza personale utilizzerò yarn ma i comandi sono simili a npm). Iniziamo col creare la nostra cartella e lanciamo il comando yarn init da terminale.

Premiamo invio per tutte le domande ricevute sul prompt dei comandi:

question name (react-starter):
question version (1.0.0):
question description: A React starter experiment
question entry point (index.js): './src/index.js'
question repository url:
question author:
question license (MIT):
question private:
--------------
success Saved package.json
✨  Done in 137.23s.

A questo punto la nostra cartella conterrà solo il file package.json. Procediamo creando due cartelle nella root del progetto:

• /public (Conterrà il file statico HTML entro il quale includeremo il bundle generato da Webpack e altri asset statici se necessario, come immagini);
• /src La cartella con tutti i moduli source per il nostro progetto.

Ricontrolliamo ancora una volta la struttura delle cartelle e dei file:

.
+-- public
+-- src
package.json

Babel

Come già indicato precedentemente, la sintassi JSX proprietaria di React non riesce ad essere interpretata dal processore Javascript dei browser, quindi per poter utilizzare React dobbiamo pre processare le parti di codice definite in JSX e trasformarle (il termine corretto è traspilazione) in un modo che permetta al browser di evaluare il codice Javascript e renderizzarlo come se fosse Javascript di base. Ci viene in aiuto Babel, che attraverso dei plugin (la lista delle trasformazioni possibili è infinita) trasformerà il codice in una maniera più comprensibile per i Browser. I plugin che useremo sono:

• @babel/preset-react (Link)
• @babel/preset-env (Link - Permette di impostare modifiche di base di Babel per i moduli ES6)

Concentriamoci su @babel/preset-react e controlliamo un piccolo esempio:

const profile = (
  // Sintassi JSX
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
  </div>
  // Fine Sintassi JSX
);

verrà trasformato da Babel in:

const profile = React.createElement(
  "div",
  null,   
  React.createElement("img", { src: "avatar.png", className: "profile" }),   
  React.createElement("h3", null, [user.firstName, user.lastName].join(" ")) 
);

Come potete ben capire, il JSX viene trasformato in classi e funzioni Javascript che sono fruibili dai browser.

Tags

• React
• Javascript