CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 7 / 41

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.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.