Come creare un'app React da zero utilizzando Webpack 4

Nelle ultime tre settimane, ho cercato di creare un'app React da zero per capire la configurazione con Webpack. Il mio obiettivo era quello di creare una configurazione semplice che può essere poi sviluppata. È stata una lotta per capire Webpack. Ma grazie a questo tutorial di Valentino Gagliardi, sono molto illuminato.

Quello che sto pensando di fare è realizzare una funzionalità di ricerca con alcuni dati JSON falsi (o reali). In questo post del blog, passerò attraverso l'impostazione del mio progetto. Nel prossimo, ho intenzione di mostrare come impostare i test. Vorrei anche aggiungere un server a questo usando Node.js, ma non sono sicuro se l'ambito del mio progetto ne avrebbe bisogno.

(Nota: ho fornito la mia configurazione Webpack alla fine di questo post sul blog)

Senza ulteriori indugi, andiamo avanti con la configurazione!

Crea un nuovo progetto e inseriscilo in un cd:

mkdir reaction_search
cd detect_search

Crea un file package.json:

npm init

Se vuoi saltare tutte le domande, aggiungi il flag -y:

npm init -y

Dobbiamo installare webpack come dipendenza dev e webpack-cli in modo da poter usare webpack nella riga di comando:

npm i webpack webpack-cli -D
  • i: install
  • -D: - save-dev

Crea una cartella src con index.js e inserisci il seguente codice come esempio:

console.log ( "ciao");

Ora aggiungi i seguenti script a package.json (in grassetto):

{
  "name": "reply_search",
  "versione": "1.0.0",
  "descrizione": "Cerca app usando React",
  "main": "index.js",
  "script": {
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "parole chiave": [],
  "autore": "",
  "licenza": "ISC",
  "devDependencies": {
    "webpack": "^ 4.0.1",
    "webpack-cli": "^ 2.0.10"
  }
}

Webpack 4 ora ha due modalità, sviluppo e produzione in cui il codice è ridotto al minimo in quest'ultimo.

Guardalo da solo eseguendo:

npm inizio corsa

Questo creerà una cartella dist con all'interno il file main.js (contenente il tuo codice src).

Se ora corri:

npm run build

Il seguente output è ora così:

Configurare React e Babel

Per lavorare con React, dobbiamo installarlo insieme a Babel. In questo modo il codice verrà trasferito da ES6 a ES5, poiché non tutti i browser supportano ancora ES6 (ad esempio Internet Explorer).

Installa reagire e reagire come una dipendenza

npm reagisco reagire-dom -S
  • -S: - salva

Quindi installare babel-core, babel-loader, babel-preset-env e babel-preset-reazioni come dipendenza dev:

npm i babel-core caricatore di babele babel-preset-env babel-preset-reazioni -D
  • babel-core: trasforma il tuo codice ES6 in ES5
  • babel-loader: helper Webpack per trasformare le tue dipendenze JavaScript (ad esempio, quando importi i tuoi componenti in altri componenti) con Babel
  • babel-preset-env: determina quali trasformazioni / plugin utilizzare e polyfill (forniscono funzionalità moderne su browser meno recenti che non lo supportano in modo nativo) in base alla matrice del browser che si desidera supportare
  • babel-preset-reazioni: preset Babel per tutti i plugin React, ad esempio trasformando JSX in funzioni

Dobbiamo creare un file webpack.config.js per indicare le regole per il nostro caricatore di babele.

Dobbiamo quindi creare un file separato chiamato .babelrc per fornire le opzioni per babel-loader. Puoi includerlo nel file webpack.config.js, ma ho visto che molti progetti lo hanno separato. Ciò si traduce in una leggibilità più chiara e può essere utilizzato da altri strumenti non correlati al webpack. Quando dichiari di utilizzare babel-loader nella configurazione del tuo webpack, cercherà il file .babelrc se ce n'è uno.

Quindi, modifica il tuo file index.js per renderizzare un componente:

Dovremo anche creare un file index.html nella cartella src dove possiamo aggiungere il nostro elemento di sezione con l'indice id. Qui è dove rendiamo il nostro principale componente di reazione:

Ora dobbiamo installare html-webpack-plugin e usarlo nel nostro file di configurazione webpack. Questo plugin genera un file HTML con