React: i moduli ES6

Nel processo di sviluppo con React è fondamentale comprendere l'uso dei moduli ES6 di JavaScript.

I moduli ES6 vengono utilizzati in React durante il processo di sviluppo, vale a dire prima di aver compilato i file JavaScript in un unico file.

In generale, l'utilizzo dei moduli crea un canale di comunicazione tra diversi file JavaScript. C'è sempre un file che importa (la parola chiave import) uno o più funzioni o oggetti da altri file. A loro volta, i file di destinazione (specificati come un percorso utilizzando la parola chiave from). esportano (la parola chiave export) le funzioni o gli oggetti che si vuole importare.

In breve, di solito si ha import Something from "./Something" ( l'estensione .js è stata omessa) in un file (componente). A sua volta, all'interno di Something.js si può avere export default Something alla fine del file. Questo è lo scenario più semplice quando si dispone di una sola funzione o oggetto esportato. Un altro esempio è quando si hanno diverse funzioni in un modulo:

// Amodule.js

export function randomKey() {
    return Math.random().toString().substring(1);
}

export function currentDate() {
    return new Date().toLocaleString();
}

Quindi possiamo importare le funzioni di cui sopra come segue:

import { randomKey } from './Amodule';

console.log(randomKey())

La parola chiave from in React consiste in percorsi relativi per i moduli definiti dall'utente (come quelli che abbiamo visto sopra) o nomi assoluti se il modulo è stato installato tramite NPM. Per esempio:

import { Routes, Route } from 'react-router-dom';
import axios from 'axios';

Questi componenti e oggetti sono disponibili a livello globale tramite NPM, quindi non è necessario specificare un percorso. Si tenga presente che useremo i moduli ES6 solo durante il processo di sviluppo: quando effettueremo il build del progetto, il codice finale sarà raggruppato in un unico file JavaScript.

I moduli ES6 sono piuttosto "nuovi" per gli sviluppatori che usano per lo più l'elemento script, ma se si segue la documentazione e i tutorial, non ci saranno problemi. Durante lo sviluppo, Webpack fornirà avvertimenti utili in modo che si può sempre cercare su Google l'errore o il messaggio di avviso per avere maggiori informazioni sul problema e trovare una soluzione.