Node.js-tutorial deel 2: frontend met React!

In deel 1 van deze Node.js-tutorial legde ik uit hoe je een REST API opzet met de Node.js-selector. In deel 2 ga je vanaf dat punt verder en werk je aan de frontend. Leer hoe je met behulp van React een applicatie ontwikkelt om met de REST API te praten. Aan de slag!

Doel en benodigdheden

Na het doorlopen van deze stappen heb je een werkende frontendapplicatie gemaakt. Hiermee kun je op de website met een knop een GET request sturen naar je API. Die gegevens tonen direct op het scherm, zodra de API de opgevraagde data terugstuurt.

Je kunt in feite met ieder Node.js frontend framework een Node.js-applicatie maken. Hier kiezen we voor React – een populaire JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces. We halen in deze applicatie gegevens op vanaf onze reeds opgezette REST API uit deel 1.

Deel 1 uitgevoerd?
Om mee te doen met deze stappen, moet je deel 1 van de tutorial hebben uitgevoerd of zelf een werkende API hebben opgezet.

Stap 1. Frontend code schrijven

We beginnen met onze applicatie vanaf het eindpunt van deel 1.

1. Start Visual Studio Code. Klik op File en klik vervolgens op Open Folder… Selecteer de gewenste map met je project en klik op Open.

Vraagt Visual Studio of je de auteur van de code vertrouwt?
Kies voor ‘Yes, I trust the author’.

2. Open nu een nieuwe terminal en voer het volgende commando in.

npx create-react-app mijnapp

Met dit commando genereert React een standaardproject die je zelf naar wens kunt aanpassen. Meer dan deze kale opzet hebben we op dit moment niet nodig. Nadat de applicatie is gegenereerd, word je begroet met dit bericht:

We suggest that you begin by typing: 
cd mijnapp
npm start

3. Voer daarom deze twee genoemde commando’s uit:

cd mijnapp
npm start

Visual Studio Code opent dan je internetbrowser op de pagina http://localhost:3000/. Dit toont de applicatie zoals hij nu is. Hier pas je het bestand src/App.js naar wens aan als je de app wilt wijzigen.

4. Ga terug naar Visual Studio Code en open App.js.

Vervang de code in App.js met het volgende:

import logo from './logo.svg';import './App.css'; import React, { useState } from "react"; 
function App() { 
const [renderData, setRenderData] = useState([]) 
const fetchData = () => { fetch("https://jgplus.nl/api/cijfers") .then(r => r.text()).then(t => setRenderData(t)); } 
return (<div className="App">
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
       <p> Get from API </p>
       <button onClick={fetchData} >GET</button>
       <p> {renderData} </p>
     </header>
   </div>
 );
}

export default App;

5. Sla de code op en ga terug naar http://localhost:3000/.

Er is nu een GET- knop toegevoegd aan de pagina. Wanneer je op die knop klikt, stuurt de browser een GET-request naar de API om de cijfers op te halen. Nu wacht je op een reactie. In deze korte tijd worden in de API’s meerdere authenticatiechecks uitgevoerd. Uiteindelijk bepaalt de API of de opgevraagde data wordt teruggestuurd aan de hand van de vrijgegeven routes (uit deel 1). Een request voor bijvoorbeeld klantgegevens wordt hiermee geweigerd.

Zodra de API de opgevraagde data terugstuurt, wordt het scherm automatisch ververst om die data te laten zien. De frontendapplicatie is nu goed zoals hij is. Daarom kunnen we verder met het compilen van de build.

Stap 2. Compile je app

Het proces van compilen klinkt ingewikkeld, maar dat valt gelukkig best mee. Het houdt in dat je jouw code uit verschillende bestanden vertolkt naar een formaat dat internetbrowsers makkelijk kunnen verwerken.

Breid je je applicatie uit, dan ontstaan meerdere bestanden haast vanzelf. Met ons menselijk brein kunnen we zo overzichtelijk werken. Echter, internetbrowsers ontvangen en verwerken een hele website in één bestand. Er is daarom een vertaalslag nodig.

Gelukkig past de code in onze applicatie binnen één bestand. Met het onderstaande commando vertolkt Node.js al jouw website-bestanden en plaatst ze in een map genaamd ‘build’ binnen je project.

npm run build

Zo compile je alle benodigde code voor de applicatie naar één enkel bestand in een formaat dat browsers makkelijk kunnen verwerken.

Stap 3. Upload je app

De build-map is nu gevuld met een gecompileerde versie van je website. Deze versie hoef je alleen nog te uploaden naar je hostingpakket en dan ben je klaar! Ga je daarna naar je website om de Node.js-applicatie live te zien.

• Is de inhoud van deze map kleiner dan 10 MB?
  Pak de inhoud in met 7-Zip of een ander compressieprogramma. Upload vervolgens dit archief naar de public_html-map via het bestandsbeheer in DirectAdmin. Pak daar ten slotte het archief uit.
• Is de inhoud van deze map groter dan 10 MB?
  Gebruik een FTP-programma om de bestanden in je build-map te uploaden naar de public_html-map op je pakket.

Denk aan beveiliging

In deel 1 van dit blog schreef ik al over de veiligheid van de API. Met authenticatie is die veel beter te beveiligen. Nu is een frontendapplicatie vaak een stuk kwetsbaarder dan een afgeschermde API. Het is niet moeilijk om bepaalde parameters binnen een browser te veranderen. Zo kan bijvoorbeeld de administrator-pagina bruikbaar worden voor een bezoeker die hier geen toegang tot mag hebben. Dat is uiteraard een groot veiligheidsprobleem voor je website. Wees daarom voorzichtig met wat je uploadt en hanteer de volgende vuistregel:

“Als informatie niet 100% publiekelijk mag zijn, upload het dan niet naar je frontend.”

Veel succes gewenst!

Hiermee zit het tweede deel van deze tutorial erop. Beginnen met een nieuwe programmeertaal of ander framework kan overweldigend zijn. Laat dit je niet tegenhouden! Node.js biedt veel voordelen. Zo ontwikkel je server-side-applicaties, schrijf je schaalbare code en werk je met populaire webtechnieken. Bovendien heeft Node.js een grote community van ontwikkelaars. Die dragen actief bij aan de ontwikkeling en het onderhoud van de Node.js packages en modules. Ga daarom aan de slag met Node.js en leer van deze community. Zo verbeter je jouw vaardigheden en lukt het je vast snel om mooie projecten te bouwen. Veel succes!

P.S. Blijf op de hoogte en volg ons via Facebook, X, Instagram, e-mail en RSS. Heb je vragen, tips of opmerkingen? Laat het achter als reactie. Vond je het artikel nuttig? Deel het dan met anderen!