Import ed Export in React

Torniamo alla nostra applicazione. Nel file App.jsx, a parte il componente che abbiamo creato, ci sono un altro paio di righe: import “./App.css”; ed export default App;. Di seguito attueremo un paragone con Node e CommonJS; nel caso li conoscessi già, puoi saltare la parte successiva che, invece, spiega il funzionamento partendo da zero.

Paragone con CommonJS

• module.exports = myValue; diventa export default myValue;
  Allo stesso modo, const myValue = require(“path”) diventa import myValue from “path”;
• module.exports.named = named; diventa export named;
  Allo stesso modo, const { named } = require(“path”); diventa import { named } from “path”;
• Così come con CommonJS, possiamo dichiarare ed esportare qualcosa in un colpo solo, sempre utilizzando export default ed export. Per esempio, export default function myFunction() {}; equivale a module.exports.myFunction = function myFunction() {};

Spiegazione completa

Nel linguaggio JavaScript, come in molti linguaggi di programmazione, è utile dividere il codice in moduli (i.e.: file separati).

Una volta, questo si faceva agganciando i moduli a oggetti globali (tipicamente window con i browser e process con i server Node), dando origine a un incubo di variabili globali di cui era difficilissimo capire il funzionamento senza documentazione.

Per fortuna, oggi le cose sono diverse. Supponiamo di aver scritto una funzione che calcola la somma di numeri:

function sum(a, b) {
  return a + b;
}

Questa funzione viene utilizzata continuamente e non ha senso riscriverla ogni volta che ci serve. Possiamo, allora, metterla in un file, esportarla e importarla in altri file, ogni volta che vogliamo, in questo modo:

// Esempio di percorso: src/utils/sum.js
export default function sum(a, b) {
  return a + b;
}

// Esempio di percorso: src/index.js
import mySum from "./utils/sum";

const four = mySum(1, 3);

Notiamo tre cose:

1. Il percorso al file è relativo (comincia per ./). In React, i percorsi assoluti hanno a che fare con pacchetti Node, mentre quelli relativi hanno a che fare con parti dell’applicazione. Per esempio, nel file src/index.js della nostra applicazione possiamo trovare un import dal percorso react-dom/client, che è un pacchetto che è stato installato durante la creazione dell’app (con Create React App o Vite) ed esterno alla nostra applicazione:

   // File: src/index.js
   import ReactDOM from "react-dom/client";

2.  Non c’è bisogno di specificare l’estensione .js del file. In React, quando importiamo file .js o .jsx, non serve specificare l’estensione. Più correttamente, React dà per scontato che, se non specifichiamo l’estensione di un file, allora stiamo intendendo un file .js o .jsx. Partendo da questa regola, se stiamo importando un file index.js o index.jsx, possiamo omettere completamente il nome del file. Per esempio, per importare un file in ./some-folder/index.js o ./some-folder/index.jsx, possiamo scrivere from ‘./some-folder.
3. Nonostante la funzione originale sia stata esportata con il nome sum, è stata importata con il nome mySum. Questo è permesso quando si esporta con default. Di contro, si può esportare con default solo una volta per ogni file.

Supponiamo, adesso, di scrivere una seconda funzione, che esegue la moltiplicazione, nello stesso file. Ha ancora senso esportare sum come default? La somma non è più o meno importante dalla moltiplicazione.

Possiamo, allora, decidere di esportare entrambe le funzioni con il loro nome, allo stesso livello:

// Esempio di percorso: src/utils/math.js
export function sum(a, b) {
  return a + b;
}

export function product(a, b) {
  return a * b;
}

// Esempio di percorso: src/index.js
import { sum as mySum, product } from "./utils/math";

const four = mySum(1, 3);
const alsoFour = product(2, 2);

Abbiamo tolto default, perché non possiamo scrivere export default function sum e anche export default function multiply nello stesso file. È concesso un solo default per file.

Possiamo comunque creare un alias per le funzioni esportate per nome, come nel caso di sum as mySum, con cui potremo usare la funzione sum chiamandola mySum nel file in cui l’abbiamo importata.

Approfondimento: nel primo esempio, verrà creato un oggetto interno del tipo const module = { default: sum };, mentre l’istruzione di import corrisponde a const mySum = module.default;. Nel secondo caso, l’oggetto interno contiene le proprietà il cui nome è indicato nell’istruzione di export: const module = { sum: sum, product: product }; (o per usare una sintassi alternativa: const module = { sum, product };). Quando viene effettuato un import per nome, la sintassi è la stessa della destrutturazione di oggetti: import { sum as mySum, product } from “./utils/math.js” corrisponde a const { sum: mySum, product } = module;.

Import/export in React

Import ed export si possono usare in React come abbiamo appena visto. L’unica regola aggiuntiva è che i componenti dovrebbero essere esportati utilizzando default. Questo perché c’è una tecnica di ottimizzazione, che vedremo alla fine di questa guida, che funziona solo con questa modalità di export.

Import di file non JavaScript

I file JavaScript, che possono contenere componenti React o classi, valori e funzioni JavaScript, non sono gli unici che possiamo importare. Sia Create React App che Vite ci permettono di importare anche file CSS (come abbiamo visto in precedenza), JSON, immagini e SVG.