Een React-project opzetten met Create React App

React is een van de meest populaire JavaScript-bibliotheken voor het ontwikkelen van front-end apps. Het is een open-source bibliotheek die oorspronkelijk is ontwikkeld door Facebook. React werd al snel populair voor het maken van snelle applicaties met JSX – een programmeerparadigma dat JavaScript combineert met een HTML-achtige syntaxis.

Voorheen was het opzetten van een React-project een complex proces. Het vereiste het handmatig configureren van de volgende componenten:

• Een build-systeem
• Code-transpiler (converteert moderne syntaxis naar door de browser leesbare codes)
• De basismapstructructuur voor het project

Gelukkig zijn die dagen allang voorbij, dankzij de Create React App. Het is een geweldige tool die al deze stappen automatiseert. Create React App zorgt voor code-transpilatie, linting, testen en build-systemen. Daarnaast wordt het geleverd met een server die hot reloading ondersteunt, wat betekent dat de webpagina's worden vernieuwd zodra er wijzigingen worden aangebracht. Uiteraard gebeurt dit allemaal binnen een georganiseerde mapstructuur.

Kortom, het is niet nodig om de handmatige moeite te nemen om build-systemen te configureren zoals Webpack, of een transpiler zoals Babel. Met minder dingen om je zorgen over te maken, ben je vrij om je volledig te concentreren op de front-end ontwikkeling. Create React App zorgt ervoor dat je met minimale voorbereiding aan de slag kunt met React.

In deze handleiding laten we zien hoe je Create React App gebruikt en een basis React-applicatie up and running krijgt. Het kan dienen als basis voor elk toekomstig applicatieproject.

Vereisten

Om de stappen in deze handleiding uit te voeren, moet de volgende software vooraf zijn geconfigureerd.

• • Een correct geconfigureerde Ubuntu server. Je kunt de stappen volgen voor het configureren van een Ubuntu-server op CloudSigma.
  • De nieuwste versie van Node.js geïnstalleerd. Hier is een stapsgewijze handleiding voor het installeren van Node.js op Ubuntu.

Stap 1: Maak een speciale npm-projectmap aan

Voor Node.js-pakketten is npm de standaard pakketbeheerder. We gebruiken npm om een speciale projectmap te maken. Deze zal belangrijke bestanden bevatten zoals package.json die alle metadata over het project en aanvullende Node.js-afhankelijkheidsmodules opslaan. JSON is een standaardformaat voor het delen van gegevens op basis van JavaScript-objecten. Raadpleeg deze handleiding als je meer wilt weten over JSON.

Maak eerst een speciale map aan:

Vervolgens vertellen we npm om een ontwikkelomgeving in het bestand te initiëren. Het zal het package.json bestand maken dat nodig is voor het project. Wijzig de huidige map:

Voer het npm init commando uit:

Let op: als je wilt dat deze map deel uitmaakt van een git-repo, is het aan te raden deze eerst in te stellen. Het initialisatiescript zal dit automatisch detecteren en alles dienovereenkomstig configureren. Zodra dit is voltooid, zou er een package.json bestand in de map moeten staan. Bekijk het met een teksteditor:

Stap 2: Maak een React-project met Create React App

In deze stap roepen we de Create React App aan om ons voorbeeld-React-project op te zetten. Dit script kopieert alles wat nodig is naar een nieuwe map, samen met alle afhankelijkheden. De npm pakketbeheerder wordt ook geleverd met de tool npx. Deze wordt gebruikt om uitvoerbare pakketten uit te voeren. We gebruiken het om het Create React App-script uit te voeren zonder het project daadwerkelijk te downloaden.

De uitvoering zal create-react-app op de opgegeven map. Het zal ook npm install commando's uitvoeren om de afhankelijkheden te installeren. Voor het gemak gebruiken we de naam cloudsigma-react-react-tutorial. Voer het volgende commando uit:

Aan het einde van het proces zie je de volgende melding. Dit is het succesbericht als de installatie is geslaagd. Het meldt ook de locatie waar het project is gemaakt.

Stap 3: React-Scripts toepassen

Nu zullen we een kort overzicht geven van de verschillende react-scripts die tijdens de installatie zijn geïnstalleerd.

• • We zullen het test script uitvoeren om de testcode uit te voeren.
  • Het build script zal een geminimaliseerde versie van ons project maken (voor de productieomgeving).
  • Ten slotte biedt het eject script volledige controle over aanpassingen.

Controleer eerst de inhoud van de React-projectmap:

Hier is een beschrijving van elk bestand:

• • node_modules/: Deze map bevat alle externe JavaScript-bibliotheken die door de app worden gebruikt. Het is zelden nodig om hierin te sleutelen.
  • public/: Het bevat enkele basis-HTML-, JSON- en afbeeldingsbestanden. Het dient als de root van het project.
  • src/: Deze map bevat de React JavaScript-codes voor ons project. Dit is waar we de meeste tijd zullen doorbrengen. We zullen deze map verder verkennen in het volgende deel van de gids.
  • .gitignore: Het is een bestand dat beschrijft welke mappen git zal negeren, bijvoorbeeld de node_modules map. Over het algemeen is het beter om mappen uit te sluiten die grote bestanden bevatten of logbestanden hosten die niet in versiebeheer hoeven te worden opgenomen. In dit geval zal het ook enkele React-specifieke mappen bevatten.
  • README.md: Het is een markdown-bestand met veel nuttige informatie over Create React App. Het bevat bijvoorbeeld een samenvatting van opdrachten en links voor geavanceerde configuratie. Voorlopig hebben we er niets mee te maken. Naarmate het project vordert, zul je echter meer documentatie over het project toevoegen.

De bestanden package.json en package-lock.json worden gebruikt door npm. Bij het uitvoeren van het initiële npx commando, werd het basisproject gemaakt. Toen de extra afhankelijkheden werden geïnstalleerd, creëerde het package-lock.json. npm gebruikt package-lock.json om ervoor te zorgen dat pakketten exact overeenkomen met de versies. Op deze manier krijgt iemand anders die jouw project installeert, ook identieke afhankelijkheden. Omdat het automatisch wordt gemaakt en beheerd, hoef je er zelden aan te komen.

Het laatste bestand waar we het over moeten hebben is package.json. Het bevat metadata over het project. De metadata kan bijvoorbeeld een projecttitel, versienummer en afhankelijkheden bevatten. Het bevat ook de scripts die je kunt gebruiken om het project uit te voeren. Bekijk de inhoud van het package.json bestand:

Het is een JSON-bestand met verschillende objecten. Bekijk het object scripts. Het bevat vier verschillende scripts:

• • start
  • build
  • test
  • eject

Deze scripts zijn gerangschikt op basis van hun belang. Het start script start de lokale ontwikkelingsserver. Vervolgens zullen we dieper ingaan op hoe je de rest van de scripts kunt gebruiken.

• • Het Build-script

Voor het uitvoeren van een npm script is de commandostructuur als volgt:

Om het build script uit te voeren, gebruik je het volgende commando:

Het zal het proces starten om de codes te compileren in een bruikbare bundel. Als dit klaar is, bekijk dan de uitvoermap:

Merk op dat er een nieuwe map build/ beschikbaar is. Deze bevat een geminimaliseerde en geoptimaliseerde versie van de andere bestanden. Het wordt aanbevolen om deze in het .gitignore bestand te zetten, omdat we deze altijd kunnen genereren met behulp van het build script.

• • Het Test-script

Het test script is een van die scripts die de run-parameter niet vereisen voor npm om het uit te voeren. Het zal er echter nog steeds prima mee werken. Wanneer het wordt uitgevoerd, start dit script een testrunner genaamd Jest. De tester zoekt naar elk projectbestand met de bestandsextensies .spec.js of test.js en voert die bestanden uit.

Het volgende npm commando zal het test script uitvoeren:

Er zijn een paar dingen om op te letten in de uitvoer. Onthoud dat de testrunner alleen zoekt naar bestanden met specifieke extensies? In dit geval is er slechts één enkele testsuite (slechts één bestand met .test.js extensie). Het bevat slechts een enkele test. Jest kan tests automatisch detecteren in de codestructuur, dus je bent vrij om tests in een map te nesten.

Daarnaast voert Jest de test niet slechts één keer uit om vervolgens af te sluiten. Het blijft de test uitvoeren in de terminal. Als er wijzigingen in de broncode zijn aangebracht, zal het de tests opnieuw uitvoeren. Jest maakt het ook mogelijk om te beperken welke tests worden uitgevoerd. Door bijvoorbeeld op 0 te drukken, kun je Jest opdracht geven om alleen de gewijzigde bestanden te testen. Naarmate testsuites groter worden, bespaart deze optie veel tijd. Om de Jest-testrunner af te sluiten, druk op q.

• • Het Eject-script

Het eject-script kopieert alle afhankelijkheden en configuratiebestanden naar het project, waardoor je volledige controle over de code krijgt. Door dit te doen, haal je het project echter uit de geïntegreerde toolchain van Create React App. Eenmaal uitgevoerd, is er geen manier om dit ongedaan te maken.

Het voordeel van Create React App is dat het de last van talloze configuraties wegneemt. Het bouwen van een moderne JavaScript-applicatie vereist veel tools die samenwerken. Create React App regelt alle configuraties voor je, dus het ejecten van het project betekent dat je dit daarna allemaal handmatig moet doen.

Een opvallend nadeel van Create React App is dat, omdat het alle configuraties zelf beheert, het geen volledige aanpassing van het project biedt. Voor de meeste projecten is dat geen probleem. Als je echter de volledige controle over het project wilt hebben, moet je de code ejecten. Eenmaal ge-eject, kun je niet meer updaten naar nieuwe versies van Create React App. Je moet alle verbeteringen handmatig beheren.

Stap 4: Server starten

Nu zullen we de lokale server starten en het project in een webbrowser uitvoeren. Om de server te starten, hebben we een ander script bij de hand. Het uitvoeren ervan vereist niet de npm run -opdracht. Wanneer het script wordt uitgevoerd, start het een lokale server, voert het de projectcode uit, start het een watcher en luistert het naar codewijzigingen. De wijzigingen worden direct in de browser getoond. De volgende opdracht start de server:

De uitvoer toont de URL om het project in een browser te bezoeken. Het toont ook diverse informatie over het actieve project. Open de URL in een browser:

Zoals de uitvoer laat zien, gebruikt Create React App poort 3000 om het project te serveren. Als de poort al in gebruik was, zal Create React App de eerstvolgende beschikbare poort gebruiken. Als je een firewall hebt geconfigureerd, moet deze verkeer toestaan naar poort 3000 (of de poort die Create React App rapporteert). Je kunt hier meer lezen over het beheren van de UFW-firewall.

Om de server af te sluiten, druk op Ctrl+C vanuit het terminalvenster. Dit zal het actieve proces (de serverinstantie) beëindigen.

Stap 5: Homepage aanpassen

Vervolgens leren we hoe we code kunnen aanpassen die is opgeslagen in de public/ map. Deze bevat de basis-HTML-pagina en dient als de root van het project. Hoewel je deze in de toekomst wellicht niet meer hoeft te bewerken, vormt het de basis van het project.

Start eerst de server met npm, ga dan naar de public/ map:

De map zal bestanden bevatten zoals favicon.ico, logo192.png, logo512.png, enz. Dit zijn pictogrammen die een gebruiker die de webpagina bezoekt, zou zien op hun tabblad, browser of telefoon. De browser selecteert automatisch de juiste grootte. Uiteindelijk zul je ze vervangen door pictogrammen die geschikt zijn voor jouw project. Voor nu laten we ze voor wat ze zijn.

Het bestand manifest.json bevat een gestructureerde set van metadata. Het beschrijft het project, toont beschikbare pictogrammen en meer.

Het bestand robots.txt bevat informatie voor webcrawlers. Webcrawlers “crawlen” over het World Wide Web en indexeren pagina's voor zoekmachines. Het is niet nodig om het bestand aan te passen, tenzij je daar een specifieke reden voor hebt. Je wilt bijvoorbeeld bepaalde URL's naar specifieke inhoud minder gemakkelijk toegankelijk maken. Voeg de locatie toe aan robots.txten het zal niet worden geïndexeerd door zoekmachines.

Het bestand index.html is de root van onze applicatie. Wanneer je de app opent, is dit het bestand dat wordt geladen. Dit is het bestand dat je op het scherm ziet. Laten we er snel even naar kijken. Open het in een teksteditor:

Het is een vrij kort bestand. Merk op dat er geen afbeelding of woorden in de <body> staan. React bouwt die inhoud met zijn eigen engine en injecteert deze met behulp van JavaScript. React moet echter wel weten waar de code geïnjecteerd moet worden. Het bestand index.html dient hiervoor.

Laten we de <title> veranderen in Mijn React App:

Sla vervolgens het bestand op en sluit de editor. Controleer nu de webpagina in de browser:

Zoals je kunt zien, is de titel van het tabblad gewijzigd in Mijn React App. Als dit niet automatisch is gebeurd, herlaad de pagina dan door te drukken op F5 of Ctrl+R.

Laten we teruggaan naar de teksteditor. Alle React-projecten moeten starten vanaf een root-element. Er kan er meer dan één op een enkele pagina staan. Er is er echter minimaal één verplicht. Dit vertelt React waar alle gegenereerde HTML-code moet worden geplaatst. Zoek in onze index.html naar de locatie van het element <div id="root">. Dit is de <div> die React zal gebruiken voor toekomstige wijzigingen. Probeer de waarde van id te veranderen van root naar base:

 

 

Herlaad daarna de pagina in de browser. Er zal geen inhoud worden getoond. Zoals de Web Developer Tools van Firefox laat zien, treedt er een fout op:

Ga terug naar de teksteditor en verander de waarde van id terug naar root:

Stap 6: Heading-tag en stijlwijzigingen

Tot nu toe hebben we de lokale server gestart en kleine wijzigingen aangebracht in het root-HTML-bestand. Nu gaan we werken met de React-componenten in de src/ map. We gaan wijzigingen aanbrengen in de CSS- en JavaScript-code. De wijzigingen worden automatisch toegepast met behulp van hot reloading.

Als de server is gestopt, start deze dan met npm. Bekijk vervolgens de inhoud van de src/ map:

Er staan hier meerdere JavaScript- en CSS-bestanden. We lopen ze één voor één langs.

• ServiceWorker.js

Dit is een belangrijk bestand als je progressive web apps wilt maken. Deze service worker biedt verschillende functionaliteiten zoals pushmeldingen, offline caching, enz. Voor nu laten we dit bestand voor wat het is.

• SetupTests.js and App.test.js

Zoals de namen van deze bestanden al doen vermoeden, worden ze gebruikt voor het testen van bestanden. Telkens wanneer we het test-script uitvoerden met npm, werden deze bestanden uitgevoerd. Het bestand setupTests.js bevat een paar aangepaste expect-methoden.

Laten we eens kijken naar App.test.js. Open het in een teksteditor:

Het bevat een basistest die zoekt naar de zin learn react in het document. Als je het tabblad van de browser open hebt staan, kun je de zin op de pagina zien. In tegenstelling tot andere unit-tests zijn React-tests anders. Omdat componenten visuele informatie zoals markup (en logica voor datamanipulatie) kunnen bevatten, werkt traditionele unit-testing niet zo eenvoudig. In dat opzicht kan het testen van React beter worden omschreven als een vorm van functionele of integratietesten.

• CSS-bestanden

Er zijn verschillende stylingbestanden beschikbaar: App.css, index.css, en logo.svg. Je kunt meerdere methoden volgen om te stylen in React. De eenvoudigste manier is om gewone CSS te schrijven, aangezien er geen extra configuratie vereist is.

Je kunt CSS rechtstreeks in een component importeren. Hierdoor kun je de CSS-bestanden opsplitsen, zodat ze alleen van toepassing zijn op een individuele component. Je scheidt de CSS niet echt van de JavaScript. In plaats daarvan groepeer je alle relevante onderdelen (CSS, JavaScript, afbeeldingen en markup) samen.

Open App.css met een teksteditor:

Het is een standaard CSS-bestand zonder speciale CSS-preprocessors. Je kunt deze later toevoegen als je wilt. Create React App streeft ernaar neutraal te zijn en tegelijkertijd een solide out-of-the-box ervaring te bieden.

Laten we een wijziging aanbrengen en deze in actie zien. Wijzig de waarde van de background-color naar blue:

Controleer de wijziging in de browser:

• • Index.js

Nu is het tijd om wijzigingen aan te brengen in de React JavaScript-code. Open index.js met een teksteditor:

Bovenaan importeert het React, ReactDOM, index.css, App, en serviceWorker. Door het importeren van React, halen we de code binnen die nodig is om JSX naar JavaScript te converteren. ReactDOM is de code die onze React-code verbindt met het basiselement ( index.html, bijvoorbeeld). Bekijk de volgende regel:

Het instrueert React om een id te vinden met het label root en de React-code daar in te voegen. <App/> is het hoofdelement en alles vertakt zich vanaf daar.

Merk op dat we ook CSS-bestanden hebben geïmporteerd (zoals index.css) maar er eigenlijk niets mee hebben gedaan. Door te importeren, vertellen we Webpack via de React-scripts om de CSS-code op te nemen in de uiteindelijke gecompileerde bundel. Anders worden de CSS-stijlen niet weergegeven.

• App.js

Vervolgens werpen we een blik op App.js. Open het in een teksteditor:

 

Laten we kijken hoe het wijzigen van de inhoud ons project beïnvloedt. Wijzig de inhoud van de <p>tag:

Sla vervolgens het bestand op en controleer de browser op wijzigingen:

Voila! Je hebt je eerste aanpassingen aan een React-component gemaakt!

Er is nog één ding om op te letten. Kijk naar het element <img>:

Merk op dat de logo tussen accolades wordt doorgegeven. Wanneer attributen (die geen strings of getallen zijn) worden doorgegeven, moeten ze tussen accolades worden geplaatst. React zal ze dan behandelen als JavaScript-objecten in plaats van strings.

In dit geval importeert de app de afbeelding niet echt. In plaats daarvan is het een verwijzing naar de afbeelding. Wanneer Webpack het project bouwt, plaatst het de afbeelding op de juiste positie. We kunnen dit verifiëren in de browser. Open de Webontwikkelaarstools in Firefox:

Webpack wil unieke bestandspaden toewijzen voor alle afbeeldingen. Dus zelfs als de afbeeldingen met dezelfde naam zijn geïmporteerd, hebben ze verschillende paden.

Stap 7: Project bouwen

In deze stap leren we hoe we het project kunnen compileren tot een implementeerbaar pakket. Start de terminal en voer het build script van het project uit:

De compiler zal de specifieke map build/aanmaken waarin de uitvoer wordt geplaatst. Om te zien wat het compilatieproces doet, open je het index.html bestand uit de map build/directory:

Zoals je kunt zien, is alle code gecompileerd en geminimaliseerd tot de kleinst bruikbare staat. Leesbaarheid is geen probleem, aangezien dit niet het deel van de code is dat voor het publiek zichtbaar is. Geminimaliseerde code neemt minder ruimte in beslag met behoud van alle functionaliteiten. In tegenstelling tot talen waarin witruimte erg belangrijk is (zoals Python), hebben webtalen (HTML, CSS en JavaScript) geen correcte spatiëring nodig om door de browser te worden geïnterpreteerd.

Tot slot

In deze handleiding hebben we met succes gedemonstreerd hoe je een React-applicatie maakt. We hebben ook enkele basisconfiguraties laten zien met behulp van JavaScript-buildtools zonder complexe technische details. Dit is de belangrijkste waarde die Create React App biedt. Je hoeft niet alles te weten om met React aan de slag te gaan. Je hoeft de ingewikkelde build-stappen niet te leren, zodat je je uitsluitend op de React-code kunt concentreren.

Hier hebben we ook gedemonstreerd hoe je een React-project start, test en bouwt. Deze commando's zijn essentieel voor projecten van elke omvang.

Veel computerplezier!