Share
React is in het verleden al bekend omdat het moeilijk was om aan de slag te gaan met het maken van apps, omdat je echt moest weten hoe je build-tools handmatig moest configureren. Dit is zelfs voordat u een enkele regel met React-code schrijft.
De create-react-app tool helpt enorm met dit probleem omdat het iedereen in staat stelt om een volledig werkende React-app te maken zonder dat je enige kennis nodig hebt over het configureren van de build-tools. De realiteit is dat create-react-app prima zal zijn voor de meeste apps, vooral als je nog niet bekend bent met Reageren.
Naarmate u meer ervaring opdoet met React, heeft u mogelijk bepaalde vereisten voor uw apps die aangepaste configuratie van de installatiebestanden nodig hebben. In dit geval moet u React-buildhulpprogramma's handmatig kunnen instellen, want create-react-app verbergt deze standaard van u.
In deze zelfstudie laat ik je zien hoe je een React-app instelt door handmatig bouwtools te configureren. Dit zal je hopelijk het vertrouwen geven om door te gaan en te experimenteren met complexere opstellingen.
Hoewel het in het begin misschien een beetje intimiderend lijkt, zult u genieten van alle voordelen van volledige controle over elke configuratie-instelling. En u kunt precies bepalen welke hulpprogramma's in uw app worden opgenomen, die kunnen variëren van project tot project. Met deze aanpak kunt u gemakkelijk nieuwbouwgereedschappen opnemen wanneer deze zich voordoen (wat ze vaak doen).
Ben je klaar om je eerste React-app helemaal vanaf nul te maken? Laten we het doen.
Om te demonstreren hoe een React-app kan worden opgezet via handmatige configuratie van de build-tools, zullen we dezelfde, zeer eenvoudige, React-app bouwen van eerdere zelfstudies in deze reeks.
Begin met het maken van een map met de naam my-first-componenten-build, en open vervolgens een opdrachtregelvenster dat naar deze map verwijst.
Type npm init om een te maken package.json het dossier. Dit bestand bevat alle informatie over de hulpmiddelen die zijn gebruikt om uw app te bouwen, plus bijbehorende instellingen. Accepteer alle standaardinstellingen en blijf gewoon slaan invoeren (ongeveer tien keer) tot het voltooid is.
Als u alle standaardinstellingen hebt geaccepteerd, package.json ziet er zo uit:
"naam": "my-first-components-build", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test" : "echo \" Fout: geen test opgegeven \ "&& exit 1", "author": "", "license": "ISC"
We moeten nu de React en ReactDOM scripts aan ons project toevoegen. We doen dit via npm, de pakketbeheerder voor Node.js.
Voer in dezelfde opdrachtregeldirectory het volgende in:
npm install - bewaar reactantie
Dit installeert zowel React en ReactDom, plus afhankelijkheden die door deze twee modules worden vereist. Je zult merken dat we nu een nieuwe hebben node_modules directory waaraan de modules zijn toegevoegd.
Als je de package.json bestand, een nieuw afhankelijkheden eigenschap is toegevoegd met informatie over de knoopmodules die we hebben geïnstalleerd.
"dependencies": "react": "^ 15.6.1", "react-dom": "^ 15.6.1"
Dit is gebeurd omdat we het hebben opgegeven --opslaan optie in onze npm installeren commando. Dit meldde npm dat we onze geïnstalleerde projectafhankelijkheden wilden bijhouden. Dit is belangrijk als we ons project willen delen.
Typisch, omdat de node_modules map is zo groot dat u niet wilt proberen dit direct te delen. In plaats daarvan deel je je project zonder de node_modules map. Wanneer iemand vervolgens uw project downloadt, hoeft u alleen maar te typen npm installeren om de setup rechtstreeks vanuit te dupliceren package.json.
Opmerking: In npm 5.x worden geïnstalleerde modules automatisch opgeslagen in package.json. U hoeft niet langer handmatig het --opslaan keuze.
Binnen in de my-first-componenten-build map, maak een nieuwe aan src map en voeg een toe index.js bestand naar het bestand. We komen hier later op terug omdat we onze React-app beginnen te maken, nadat we de projectinstellingenbestanden hebben geconfigureerd.
Voeg een index.html-bestand in dezelfde map toe met de volgende code:
Handmatig een reactietoepassing maken met behulp van bouwhulpmiddelen
We willen onze app kunnen samenstellen tot een enkel JavaScript-bestand en ook gebruik kunnen maken van JSX- en ES6-klassen en -modules. Om dit te doen, moeten we Webpack en Babel-modules via npm installeren.
Laten we eerst Babel installeren. Typ het volgende in het opdrachtregelvenster:
npm installeren --save-dev babel-core babel-loader babel-preset-env babel-preset-reageren
Hiermee worden alle modules geïnstalleerd die nodig zijn voor Babel om de ES6- en JSX-code te compileren met standaard JavaScript.
Laten we nu Webpack opnieuw installeren via de opdrachtregel:
npm install --save-dev html-webpack-plug-in webpack webpack-dev-server
Hiermee installeert u alle modules die nodig zijn voor Webpack, een lokale webserver, en stelt ons in staat om Webpack te leiden om een dynamiek te creëren index.html bestand in de openbaar map gebaseerd op degene die we hebben toegevoegd aan de src map. We kunnen ook een dynamische verwijzing toevoegen naar het gebundelde JavaScript-bestand in het HTML-bestand elke keer dat de app wordt gebouwd.
Nadat deze nieuwe modules zijn geïnstalleerd, is uw package.json bestand ziet er nu als volgt uit:
"dependencies": "react": "^ 15.6.1", "react-dom": "^ 15.6.1", "devDependencies": "babel-core": "^ 6.25.0", "babel -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 "
Deze keer worden de afhankelijkheden van Webpack en Babel opgeslagen in package.json als dev-afhankelijkheden.
Dit betekent dat deze specifieke modules nodig zijn tijdens de ontwikkelingsfase (dat wil zeggen de build) van de app. Aan de andere kant zijn de afhankelijkheden (zoals React en ReactDOM) vereist tijdens runtime en worden deze dus direct meegenomen met onze aangepaste app-code.
Om Webpack onze app te laten bouwen en deze in een enkel bestand te bundelen, moeten we de instellingen configureren. Maak in uw hoofdmap van app-map webpack.config.js, die wordt gebruikt om de specifieke build-instellingen van Webpack op te slaan.
We hebben Webpack nodig om drie dingen te doen:
Binnen webpack.config.js, toevoegen:
Accentsconagua
var path = require ('path'); var HtmlWebpackPlugin = require ('html-webpack-plugin'); module.exports = entry: './src/index.js', output: path: path.resolve (__ dirname, 'public'), bestandsnaam: 'build.js', module: rules: [test : /\.(js)$/, gebruik: 'babel-loader'], plug-ins: [new HtmlWebpackPlugin (template: 'src / index.html')]Maak je geen zorgen te veel over de syntaxis die hier wordt gebruikt; begrijp gewoon het overzicht van wat er aan de hand is.
Het enige wat we doen is een JavaScript-object exporteren met bepaalde eigenschappen die bepalen hoe Webpack onze app bouwt. De binnenkomst property specificeert het startpunt van onze React-app, namelijk index.js. Vervolgens de uitgang eigenschap definieert het uitvoerpad en de bestandsnaam van het gebundelde JavaScript-bestand.
Wat het bouwproces zelf betreft, willen we dat Webpack alle JavaScript-bestanden via de Babel-compiler doorgeeft om JSX / ES6 te transformeren naar standaard JavaScript. We doen dit via de module eigendom. Het specificeert eenvoudig een reguliere expressie die Babel-transformaties uitvoert enkel en alleen voor JavaScript-bestanden.
Om de Babel-installatie te voltooien, moeten we een vermelding toevoegen aan de package.json bestand om op te geven welke Babel-transformaties we willen uitvoeren op onze JavaScript-bestanden. Doe open package.json en voeg een toe Babel eigendom:
"babel": "presets": ["env", "react"],
Dit voert twee transformaties uit op elk JavaScript-bestand in ons project. De env transformatie converteert ES6 JavaScript naar standaard JavaScript dat compatibel is met alle browsers. En de Reageer transformatie zal de JSX-code compileren tot createElement () functieaanroepen, dat is volkomen geldig JavaScript.
Nu, terug naar onze webpack.config.js het dossier.
De laatste eigenschap die we hebben is plugins, die speciale bewerkingen bevat die we tijdens het bouwproces willen uitvoeren. In ons geval hebben we Webpack nodig om een index.html bestand met een verwijzing naar het gebundelde JavaScript-bestand. We geven ook een bestaande aan index.html bestand (het bestand dat we eerder hebben gemaakt) om als sjabloon te gebruiken om de uiteindelijke bundel te maken index.html het dossier.
Laten we nu een toevoegen script eigendom aan package.json. Overigens kunt u zoveel scripts toevoegen als u maar wilt om verschillende taken uit te voeren. Voorlopig willen we gewoon Webpack kunnen draaien, dus in package.json verwijder de "test" script en vervang het door:
"scripts": "build": "webpack",,
Voordat we het buildproces testen, laten we een React-component toevoegen aan index.js dus we hebben iets te geven.
import Reageren, Component uit 'reageren'; import ReactDOM van 'react-dom'; class-app breidt component render () terug () ReactDOM.render (Hallo Wereld!
, document.querySelector ('#app'));
Dit zou er nu heel vertrouwd uit moeten zien als je de vorige tutorials in deze serie hebt gevolgd.
Voer vanaf de opdrachtregel het volgende uit:
npm run build
Na een tijdje zou u een nieuwe moeten zien openbaar map gemaakt binnen my-first-componenten-build, bevattende index.html en index.js. Doe open index.html om de uitvoer van onze React-app-test te zien.
U ziet dat het gebundelde JavaScript-bestand voor ons is toegevoegd en dat het testonderdeel wordt weergegeven in het juiste DOM-element.
Zodra u meerdere wijzigingen in uw app gaat aanbrengen, leert u snel dat het nogal vervelend is om een bestand handmatig te bewerken, op te slaan, de opdracht build uit te voeren en vervolgens het browservenster opnieuw te laden om de wijzigingen te bekijken.
Gelukkig kunnen we de Webpack-miniserver die we eerder hebben geïnstalleerd gebruiken om dit proces te automatiseren. Voeg een tweede script toe aan package.json dus de eigenschap 'scripts' ziet er als volgt uit:
"scripts": "build": "webpack", "dev": "webpack-dev-server --open",
Nu uitvoeren:
npm run dev
Na een paar seconden ziet u een nieuw browsertabblad met uw web-app geopend. De URL verwijst nu naar een lokale server in plaats van naar een specifiek lokaal bestand te verwijzen. Breng een kleine wijziging aan index.js in de src map en opslaan. Merk op dat uw app vrijwel onmiddellijk in de browser wordt bijgewerkt om de nieuwe wijzigingen weer te geven.
Webpack controleert nu de bestanden in uw app op wijzigingen. Wanneer een wijziging wordt aangebracht en opgeslagen, zal Webpack uw app opnieuw compileren en automatisch het browservenster opnieuw laden met de nieuwe updates.
Opmerking: de Webpack-server herbouwt uw app niet als zodanig, maar slaat veranderingen in een cache op, waardoor hij de browser zo snel kan bijwerken. Dit betekent dat u de updates niet ziet weerspiegeld in de openbaar map. In feite kunt u deze map volledig verwijderen wanneer u de Webpack-server gebruikt.
Wanneer u uw app moet bouwen, kunt u deze gewoon uitvoeren npm run build om de te maken openbaar map opnieuw (indien nodig) en voer uw app-bestanden uit, klaar voor verspreiding.
Laten we voor de volledigheid de twee eenvoudige componenten toevoegen die we in eerdere zelfstudies hebben gebruikt.
Voeg twee nieuwe bestanden toe in de hoofdmap projectmap genaamd MyFirstComponent.js en MySecondComponent.js naar de hoofdmap van de app. In MyFirstComponent.js, voeg de volgende code toe:
import Reageren, Component uit 'reageren'; class MyFirstComponent breidt Component render () return uit (this.props.number: Hello from React!
) export standaard MyFirstComponent;
En in MySecondComponent.js, toevoegen:
import Reageren, Component uit 'reageren'; class MySecondComponent breidt Component render () return uit (this.props.number: mijn tweede reactiecomponent.
) export standaard MySecondComponent;
Gebruik deze update om deze componenten in onze app te gebruiken index.js Naar het volgende:
import Reageren, Component uit 'reageren'; import ReactDOM van 'react-dom'; importeer MyFirstComponent van './MyFirstComponent'; importeer MySecondComponent van './ MySecondComponent'; class-app breidt component render () terug () ReactDOM.render (Mijn eerste componenten reageren!
, document.querySelector ('#app'));
Dit resulteert in dezelfde uitvoer als we eerder hebben gezien, behalve deze keer door de React-app 100% handmatig in te stellen.
Zodra u eenmaal deze handmatige configuratie hebt doorlopen en configuratie-configuratiebestanden hebt gemaakt, is dit de enige keer dat u dit helemaal opnieuw moet doen. Voor toekomstige projecten kunt u een of meer van uw bestaande setup-bestanden opnieuw gebruiken, waardoor latere React-projecten veel sneller kunnen worden opgezet.
Je zou zelfs een set van speciaal gebouwde React-startersjablonen kunnen maken en deze op GitHub kunnen hosten. Het zou dan een eenvoudig geval zijn van het klonen van een startersproject en het draaien npm init om de vereiste Node.js-modules te installeren.
Het React-project voor deze tutorial is beschikbaar om te downloaden, zodat je ermee kunt spelen of het als een sjabloon voor nieuwe projecten kunt gebruiken.
Klik op de Bijlage downloaden link in de rechterzijbalk om toegang te krijgen tot het .zip-bestand van het project. Eenmaal gedownload, extraheer het en open een opdrachtregelvenster. Zorg ervoor dat je in de my-first-componenten-build directory.
Voer de volgende opdrachten in om de React-app te installeren en te compileren.
npm installeer npm run dev
De eerste opdracht zal alle Node.js-modules downloaden die nodig zijn voor het project, wat een minuut of twee zal duren. De tweede opdracht compileert de React-app en voert de mini-webserver uit en geeft deze weer in de browser.
Probeer enkele wijzigingen aan te brengen in uw React-app. Telkens wanneer u wijzigingen opslaat, wordt uw app opnieuw gecompileerd en wordt het browservenster automatisch bijgewerkt om de nieuwe versie van uw app weer te geven.
Wanneer u uw project wilt bouwen voor distributie, voert u gewoon de volgende opdracht uit.
npm run build
In deze zelfstudieserie hebben we gekeken naar verschillende manieren waarop u React-apps kunt instellen, waarbij elke stap steeds meer insteltaken vereist. Maar het voordeel op de lange termijn is dat u veel meer controle en flexibiliteit hebt over hoe het project precies is opgezet.
Als je eenmaal bent begonnen met het opzetten van React, denk ik dat je het ontwikkelen van apps erg leuk zult vinden. Ik zou graag uw opmerkingen horen. Laat me weten wat je van plan bent om te gaan bouwen met React!
