Share
React è stato conosciuto in passato per la difficoltà di iniziare a creare app, in quanto era necessario capire come configurare manualmente gli strumenti di compilazione. Questo è ancora prima di scrivere una singola riga di codice React.
Lo strumento crea-react-app aiuta enormemente questo problema poiché consente a chiunque di creare un'app React funzionante senza alcuna conoscenza su come configurare gli strumenti di compilazione. La realtà è che crea-react-app andrà bene per la maggior parte delle app, soprattutto se sei nuovo in React.
Man mano che acquisisci maggiore esperienza con React, potresti avere determinati requisiti per le tue app che richiedono una configurazione personalizzata dei file di installazione. In questo caso, dovresti essere in grado di configurare manualmente gli strumenti di build di React, dato che l'applicazione crea-react ti nasconde di default.
In questo tutorial ti mostrerò come configurare un'applicazione React configurando manualmente gli strumenti di generazione. Speriamo che questo ti dia la sicurezza di andare avanti e sperimentare configurazioni più complesse.
Sebbene all'inizio possa sembrare un po 'scoraggiante, potrai godere di tutti i vantaggi di avere il controllo totale su ogni singola impostazione di configurazione. E puoi decidere esattamente quali strumenti includere nella tua app, che possono variare da progetto a progetto. Questo approccio ti consente anche di incorporare facilmente nuovi strumenti di build man mano che vengono (cosa che fanno spesso).
Sei pronto a creare la tua prima app React completamente da zero? Facciamolo.
Per dimostrare come configurare un'applicazione React tramite la configurazione manuale degli strumenti di costruzione, creeremo la stessa, molto semplice, app React delle precedenti esercitazioni in questa serie.
Inizia creando una cartella chiamata my-first-componenti-build, e quindi aprire una finestra della riga di comando che punta a questa cartella.
genere npm init creare un package.json file. Questo file conterrà tutte le informazioni sugli strumenti utilizzati per creare la tua app, oltre alle impostazioni associate. Accetta tutte le impostazioni predefinite e continua a colpire accedere (circa dieci volte) fino al completamento.
Se hai accettato tutti i valori predefiniti, package.json sarà simile a questo:
"nome": "my-first-components-build", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test" : "echo \" Errore: nessun test specificato \ "&& exit 1", "author": "", "license": "ISC"
Ora dobbiamo aggiungere gli script React e ReactDOM al nostro progetto. Lo faremo tramite npm, il gestore pacchetti per Node.js.
All'interno della stessa directory della riga di comando, immettere:
npm install --save react-dom
Questo installa sia React che ReactDom, più eventuali dipendenze richieste da questi due moduli. Noterai che ora abbiamo un nuovo node_modules directory in cui sono stati aggiunti i moduli.
Se dai un'occhiata al package.json file, un nuovo dipendenze è stata aggiunta una proprietà contenente informazioni sui moduli del nodo che abbiamo installato.
"dipendenze": "react": "^ 15.6.1", "react-dom": "^ 15.6.1"
Questo è successo perché abbiamo specificato il --salvare opzione nel nostro installazione di npm comando. Questo npm notificato che volevamo tenere traccia delle nostre dipendenze del progetto installato. Questo è importante se vogliamo condividere il nostro progetto.
In genere, perché il node_modules la cartella è così grande che non vuoi provare a condividerla direttamente. Invece, condividi il tuo progetto senza il node_modules cartella. Quindi, quando qualcuno scarica il tuo progetto, tutto ciò che devono fare è digitare installazione di npm duplicare la configurazione direttamente da package.json.
Nota: in npm 5.x, i moduli installati vengono automaticamente salvati in package.json. Non è più necessario specificare manualmente il --salvare opzione.
Dentro il my-first-componenti-build cartella, creane una nuova src cartella e aggiungere un index.js file ad esso. Torneremo su questo più tardi mentre iniziamo a creare la nostra app React, una volta configurati i file di installazione del progetto.
Aggiungi un file index.html all'interno della stessa cartella con il seguente codice:
Creazione manuale di un'applicazione di React utilizzando gli strumenti di compilazione
Vogliamo essere in grado di compilare la nostra app in un unico file JavaScript e utilizzare anche classi e moduli JSX ed ES6. Per fare questo, abbiamo bisogno di installare moduli Webpack e Babel via npm.
Iniziamo ad installare Babel. Digitare quanto segue nella finestra della riga di comando:
npm installa --save-dev babel-core babel-loader babel-preset-env babel-preset-react
Questo installa tutti i moduli necessari per Babel per compilare il codice ES6 e JSX su JavaScript standard.
Ora, installiamo Webpack, sempre tramite la riga di comando:
npm install --save-dev html-webpack-plugin webpack webpack-dev-server
Questo installa tutti i moduli necessari per Webpack, un server web locale, e ci consente di dirigere Webpack per creare una dinamica index.html file nel pubblico cartella basata su quella che abbiamo aggiunto al src cartella. Possiamo inoltre aggiungere un riferimento dinamico al file JavaScript in bundle all'interno del file HTML ogni volta che viene creata l'app.
Dopo che questi nuovi moduli sono stati installati, il tuo package.json il file ora sarà simile a questo:
"dipendenze": "react": "^ 15.6.1", "react-dom": "^ 15.6.1", "devDependencies": "babel-core": "^ 6.25.0", "babele" -loader ":" ^ 7.1.0 "," babel-preset-env ":" ^ 1.5.2 "," babel-preset-react ":" ^ 6.24.1 "," html-webpack-plugin ":" ^ 2.28.0 "," webpack ":" ^ 3.0.0 "," webpack-dev-server ":" ^ 2.5.0 "
Questa volta, tuttavia, le dipendenze di Webpack e Babel vengono salvate package.json come dipendenze dev.
Ciò significa che questi particolari moduli sono necessari durante la fase di sviluppo (es. Build) dell'app. D'altra parte, le dipendenze (come React e ReactDOM) sono richieste durante il runtime, e quindi saranno incluse direttamente insieme al nostro codice app personalizzato.
Per ottenere Webpack per creare la nostra app e raggrupparla in un unico file, dobbiamo configurare le impostazioni. All'interno della cartella dell'app root, creare webpack.config.js, che viene utilizzato per memorizzare le impostazioni di build specifiche di Webpack.
Abbiamo bisogno di Webpack per fare tre cose:
Dentro webpack.config.js, Inserisci:
Accentsconagua
var path = require ('percorso'); var HtmlWebpackPlugin = require ('html-webpack-plugin'); module.exports = entry: './src/index.js', output: percorso: path.resolve (__ dirname, 'public'), nome file: 'build.js', module: rules: [test : /\.(js)$/, usa: 'babel-loader'], plugin: [nuovo HtmlWebpackPlugin (template: 'src / index.html')]Non preoccuparti troppo della sintassi usata qui; basta capire la panoramica di ciò che sta succedendo.
Tutto quello che stiamo facendo è l'esportazione di un oggetto JavaScript con determinate proprietà che controllano il modo in cui Webpack crea la nostra app. Il iscrizione proprietà specifica il punto di partenza della nostra app React, che è index.js. Quindi, il produzione proprietà definisce il percorso di output e il nome file del file JavaScript associato.
Per quanto riguarda il processo di compilazione stesso, vogliamo che Webpack trasmetta tutti i file JavaScript tramite il compilatore Babel per trasformare JSX / ES6 in JavaScript standard. Lo facciamo tramite il modulo proprietà. Specifica semplicemente un'espressione regolare che esegue le trasformazioni di Babel solo per i file JavaScript.
Per completare la configurazione di Babel, è necessario aggiungere una voce al package.json file per specificare quali trasformazioni Babel vogliamo eseguire sui nostri file JavaScript. Aprire package.json e aggiungere un Babele proprietà:
"babele": "presets": ["env", "react"],
Questo eseguirà due trasformazioni su ogni file JavaScript nel nostro progetto. Il ENV trasformazione convertirà ES6 JavaScript in JavaScript standard compatibile con tutti i browser. E il reagire trasformazione comporterà il codice JSX fino a createElement () chiamate di funzione, che è JavaScript perfettamente valido.
Ora, torna al nostro webpack.config.js file.
L'ultima proprietà che abbiamo è plugins, che contiene tutte le operazioni speciali che vogliamo vengano eseguite durante il processo di compilazione. Nel nostro caso, abbiamo bisogno di Webpack per creare un index.html file che include un riferimento al file JavaScript in bundle. Indichiamo anche un esistente index.html file (quello che abbiamo creato in precedenza) da utilizzare come modello per creare il pacchetto finale index.html file.
Aggiungiamo ora a copione proprietà a package.json. A proposito, puoi aggiungere tutti gli script che vuoi per eseguire varie attività. Per ora, vogliamo solo essere in grado di eseguire Webpack, quindi package.json elimina il "test" script e sostituirlo con:
"script": "build": "webpack",,
Prima di testare il processo di compilazione, aggiungiamo un componente React a index.js quindi abbiamo qualcosa da rendere.
import React, Component da 'react'; importare ReactDOM da 'react-dom'; la classe App estende Component render () return () ReactDOM.render (Ciao mondo!
, document.querySelector ('#app'));
A questo punto dovrebbe sembrare molto familiare se hai seguito le esercitazioni precedenti in questa serie.
Dalla riga di comando, esegui:
npm esegue build
Dopo un po 'dovresti vedere un nuovo pubblico cartella creata all'interno my-first-componenti-build, contenente index.html e index.js. Aprire index.html per vedere l'output della nostra app React test.
Si noti che il file JavaScript in bundle è stato aggiunto per noi, e il componente di test è reso all'elemento DOM corretto.
Una volta che inizierai a fare più modifiche alla tua app, imparerai presto che è piuttosto noioso dover modificare manualmente un file, salvarlo, eseguire il comando build e quindi ricaricare la finestra del browser per vedere le modifiche.
Fortunatamente, possiamo utilizzare il mini server Webpack che abbiamo installato in precedenza per automatizzare questo processo. Aggiungi un secondo script a package.json quindi la proprietà 'scripts' assomiglia a questo:
"script": "build": "webpack", "dev": "webpack-dev-server --open",
Ora esegui:
npm run dev
Dopo pochi secondi, vedrai una nuova scheda del browser aperta con la tua app web in esecuzione. L'URL punta ora a un server locale invece di puntare a un file locale specifico. Apporta una piccola modifica a index.js nel src cartella e salvare. Si noti che l'app si aggiorna automaticamente nel browser quasi istantaneamente per riflettere le nuove modifiche.
Webpack ora monitorerà i file nella tua app per le modifiche. Quando vengono apportate modifiche e salvato, Webpack ricompilerà la tua app e ricaricherà automaticamente la finestra del browser con i nuovi aggiornamenti.
Nota: il server Webpack non ricostruirà la tua app in quanto tale, piuttosto memorizzerà le modifiche in una cache, motivo per cui può aggiornare il browser in così poco tempo. Ciò significa che non vedrai gli aggiornamenti riflessi in pubblico cartella. In effetti, è possibile eliminare completamente questa cartella quando si utilizza il server Webpack.
Quando hai bisogno di costruire la tua app, puoi semplicemente eseguire npm esegue build creare il pubblico cartella di nuovo (se necessario) e uscita i tuoi file di app, pronti per la distribuzione.
Per completezza, aggiungiamo i due componenti semplici che abbiamo utilizzato nelle esercitazioni precedenti.
Aggiungi due nuovi file nella cartella del progetto root chiamata MyFirstComponent.js e MySecondComponent.js alla cartella dell'app principale. Nel MyFirstComponent.js, aggiungi il seguente codice:
import React, Component da 'react'; classe MyFirstComponent estende Component render () return (this.props.number: Ciao da React!
) export default MyFirstComponent;
E in MySecondComponent.js, Inserisci:
import React, Component da 'react'; class MySecondComponent estende Component render () return (this.props.number: My Second React Component.
) esporta MySecondComponent predefinito;
Per utilizzare questi componenti nella nostra app, aggiorna index.js al seguente:
import React, Component da 'react'; importare ReactDOM da 'react-dom'; importare MyFirstComponent da './MyFirstComponent'; importare MySecondComponent da './MySecondComponent'; la classe App estende Component render () return () ReactDOM.render (I miei primi componenti di reazione!
, document.querySelector ('#app'));
Ciò si traduce nello stesso risultato che abbiamo visto prima, tranne questa volta tramite l'impostazione manuale dell'app React al 100%.
Una volta che hai eseguito questa configurazione manuale una volta e hai creato i file di configurazione, questa è l'unica volta in cui dovrai eseguire tutto da capo. Per i progetti futuri, è possibile riutilizzare uno o più dei file di installazione esistenti, rendendo i successivi progetti React molto più veloci da configurare.
Potresti anche creare una serie di modelli di avviamento React creati appositamente e ospitarli su GitHub. Sarebbe quindi un semplice caso di clonazione di un progetto iniziale e di esecuzione npm init per installare i moduli Node.js richiesti.
Il progetto React per questo tutorial è disponibile per il download, quindi puoi giocarci o usarlo come modello per nuovi progetti.
Clicca il Scarica allegato link nella barra laterale destra per accedere al file .zip del progetto. Una volta scaricato, estrailo e apri una finestra della riga di comando. Assicurati di essere nel my-first-componenti-build elenco.
Immettere i seguenti comandi per installare e compilare l'app React.
npm install npm run dev
Il primo comando scaricherà tutti i moduli Node.js necessari per il progetto, che richiederà un minuto o due. Il secondo comando compilerà l'app React ed eseguirà il mini server web, visualizzandolo nel browser.
Prova ad apportare alcune modifiche alla tua app React. Ogni volta che salvi le modifiche, la tua app verrà ricompilata e la finestra del browser si aggiorna automaticamente per riflettere la nuova versione della tua app.
Quando vuoi costruire il tuo progetto per la distribuzione, basta eseguire il seguente comando.
npm esegue build
Nel corso di questa serie di tutorial, abbiamo esaminato diversi modi in cui puoi accedere alla configurazione delle app React, ognuna delle quali richiede progressivamente più attività di impostazione. Ma il vantaggio a lungo termine è che hai molto più controllo e flessibilità su come esattamente il progetto è impostato.
Una volta che hai imparato a configurare React, penso che troverai le app in sviluppo molto divertenti. Mi piacerebbe sentire i tuoi commenti. Fammi sapere che cosa pensi di costruire con React!
