React-project creëren en uitvoeren met ServBay

Wat is React?

React is een open-source JavaScript-bibliotheek ontwikkeld door Meta (voorheen Facebook) en de community, speciaal voor het bouwen van gebruikersinterfaces (UI). React gebruikt een component-gebaseerde aanpak voor het maken van interactieve UI's, waardoor ontwikkelaars efficiënt complexe en onderhoudbare single-page applicaties (SPA's) of grote webapplicaties kunnen bouwen. De kernvoordelen van React zijn de declaratieve programmeerstijl, het efficiënte virtual DOM-update-mechanisme en het sterke ecosysteem.

Belangrijkste kenmerken en voordelen van React

• Component-gebaseerde ontwikkeling: Verdeelt complexe UI's in zelfstandige, herbruikbare componenten, wat de onderhoudbaarheid en hergebruik van code verbetert.
• Declaratieve view: Beschrijf de status van je UI eenvoudig; React zorgt automatisch dat de DOM overeenkomt met die status, waardoor de ontwikkellogica eenvoudiger wordt.
• Virtual DOM: Houdt een virtuele DOM-weergave in het geheugen bij en gebruikt een diff-algoritme om DOM-updates tot een minimum te beperken, wat de prestaties aanzienlijk verhoogt.
• Eénrichtings dataflow: Data stroomt van boven naar beneden, waardoor het eenvoudiger is om de toestand en veranderingen in je applicatie te volgen en te begrijpen.
• JSX: Een JavaScript-syntaxisuitbreiding waarmee je HTML-achtige structuren direct in je JS-code kunt schrijven, voor betere leesbaarheid.
• Sterk ecosysteem: Groot, actief community en een uitgebreide collectie third-party libraries (zoals React Router, Redux/Zustand/MobX, Material UI), voor state management, routing, UI componenten etc.

Met React kunnen ontwikkelaars sneller en efficiënter moderne, high-performance webapplicaties bouwen.

React-ontwikkel- en productiemilieu opzetten met ServBay

ServBay is een krachtige lokale webontwikkelomgeving met diverse softwarepakketten, inclusief Node.js, beschikbaar voor macOS en Windows. In deze gids leer je hoe je ServBay's Node.js-omgeving en Websites-functionaliteit gebruikt om een React-project te maken, configureren en draaien — inclusief het instellen van een reverse proxy voor ontwikkelmodus en het hosten van statische bestanden voor productie.

Vereisten

Zorg eerst dat je de volgende voorbereidingen hebt getroffen:

1. Installeer ServBay: ServBay moet succesvol geïnstalleerd en actief zijn op jouw systeem.
2. Installeer het Node.js-pakket: Installeer Node.js via de ServBay-interface of commandline. Zie de ServBay documentatie over Node.js installeren voor stapsgewijze instructies. ServBay beheert Node.js-versies en omgevingsvariabelen automatisch.

React-project creëren

We gebruiken de moderne frontend tooling Vite om snel een React-project te genereren. Vite biedt snelle opstart, directe Hot Module Reloading (HMR) en een uitstekende ontwikkelervaring, en is inmiddels de voorkeursmethode voor nieuwe React-projecten (in plaats van create-react-app).

1. Open een terminal en ga naar de webroot

   Start je terminal. ServBay's aanbevolen standaard webroot directory:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Maak een nieuw React-project met Vite

   Voer het volgende commando uit om via de create-vite scaffolder een nieuw project aan te maken met de naam servbay-react-demo en kies de react template:

   npx create-vite servbay-react-demo --template react

   • npx is de pakket-runner van npm, waarmee je CLI-tools kunt uitvoeren zonder ze globaal te installeren. Je gebruikt zo altijd de nieuwste versie van create-vite.
   • create-vite is de officiële scaffolding-tool van Vite.
   • servbay-react-demo is de naam van je projectdirectory.
   • --template react selecteert het React-template voor de basisstructuur van je project.

   Volg de aanwijzingen in de terminal om het project aan te maken.

3. Ga naar de projectmap en installeer dependencies

   Ga naar de nieuw aangemaakte projectdirectory en installeer benodigde packages met npm:

   cd servbay-react-demo
   npm install

   • Je kunt ook yarn install of pnpm install gebruiken als je liever Yarn of pnpm gebruikt als pakketbeheerder.

Projectinhoud wijzigen (optioneel)

Om te controleren of alles werkt, kun je de homepage van het project eenvoudiger aanpassen.

1. Open het bestand src/App.jsx of src/App.tsx

   Open src/App.jsx (voor JavaScript-template) of src/App.tsx (voor TypeScript-template) in je favoriete editor.

2. Pas de inhoud aan

   Zoek het gedeelte waar de hoofdcontent wordt gerenderd en vervang het zodat er "Hello ServBay!" wordt getoond:

   // ... andere imports ...
   import './App.css';
   
   function App() {
     // ... overige code ...
     return (
       <>
         {/* ... andere elementen ... */}
         <h1>Hello ServBay!</h1>
         {/* ... andere elementen ... */}
       </>
     );
   }
   
   export default App;

   Sla het bestand op.

Ontwikkelmodus activeren

Tijdens ontwikkeling gebruik je meestal een lokale dev-server met hot module reload (HMR), zodat je direct wijzigingen kunt zien. ServBay kan met een reverse proxy requests naar deze dev-server doorsturen.

1. Start de ontwikkelserver via de terminal

   In de root van je project (servbay-react-demo), start je de Vite dev-server op een gekozen poort (bijvoorbeeld 8585) met:

   npm run dev -- --port 8585

   • npm run dev voert de dev-script uit zoals gedefinieerd in je package.json, meestal om Vite te starten.
   • -- --port 8585 geeft het poortnummer door aan Vite.

   Je terminal toont nu een lokaal bereikbaar adres, bijvoorbeeld http://localhost:8585. Laat de terminal open en sluit deze server niet af.

2. Configureer reverse proxy met ServBay

   Open de ServBay-app en ga naar het gedeelte Websites. Klik op 'toevoegen' om een nieuwe siteconfiguratie aan te maken:

   • Naam: ServBay React Dev (beschrijvende naam)
   • Domein: servbay-react-dev.servbay.demo (demo-domein op basis van ServBay)
   • Site Type: selecteer Reverse Proxy
   • Proxy IP: 127.0.0.1 (de dev-server draait lokaal)
   • Proxy Port: 8585 (dezelfde poort als de dev-server)

   Sla je wijzigingen op. ServBay realiseert nu een automatische doorstuur van alle verzoeken aan servbay-react-dev.servbay.demo naar http://127.0.0.1:8585 via zijn ingebouwde webserver (Caddy of Nginx).

   Zie voor gedetailleerde instructies het ServBay document over websitebeheer.

3. Toegang ontwikkelen-website

   Open je browser en bezoek het geconfigureerde domein: https://servbay-react-dev.servbay.demo.

   • Dankzij ServBay's mogelijkheden is je lokale ontwikkelwebsite automatisch voorzien van een SSL-certificaat (ondertekend door ServBay User CA of ServBay Public CA), zodat je veilig via HTTPS werkt. Meer over deze functionaliteit in SSL gebruiken met ServBay.
   • Nu worden pagina-updates in de browser direct doorgevoerd bij het opslaan van bestandwijzigingen, dankzij Hot Module Reload.

Productie-build maken

Als je project klaar is voor deployment, moet je een geoptimaliseerde productie-build genereren.

1. Build het productieproject in de terminal

   Voer in de root van servbay-react-demo volgende commando uit:

   npm run build

   Dit commando voert het build script uit zoals gedefinieerd in package.json. Voor een Vite-gebaseerd React-project betekent dat: compileren, bundelen en optimaliseren van broncode tot statische bestanden (HTML, CSS, JS, en assets), meestal geëxporteerd naar dist. Na succesvolle build krijg je een melding in de terminal.

2. Statische website instellen met ServBay

   De gegenereerde dist-map bevat alle bestanden die direct door een webserver aangeboden kunnen worden. In ServBay configureer je een statische website die naar deze map wijst.

   Open ServBay, ga naar Websites, en maak een nieuwe websiteconfiguratie aan:

   • Naam: ServBay React Prod (beschrijvende naam)
   • Domein: servbay-react.servbay.demo (productiedomein, te onderscheiden van dev-domein)
   • Site Type: kies Static
   • Website Root Directory: wijs deze aan op de build-map:
     • macOS: /Applications/ServBay/www/servbay-react-demo/dist
     • Windows: C:\ServBay\www\servbay-react-demo\dist

   Sla je wijzigingen op. ServBay stelt zijn ingebouwde webserver in om direct alle bestanden uit de dist folder te serven.

3. Toegang productiewebsite

   Open je browser en bezoek het productiedomein: https://servbay-react.servbay.demo.

   Je krijgt nu de geoptimaliseerde productieversie site te zien, inclusief automatische SSL-support van ServBay.

Samenvatting

Met deze stappen heb je succesvol een React-project opgezet in je lokale ServBay-omgeving, en zowel de ontwikkelmodus met reverse proxy als productie-statische hosting geconfigureerd. ServBay vereenvoudigt het opzetten en beheren van een lokale ontwikkelomgeving, voor zowel macOS als Windows, met ingebouwde Node.js, flexibele websites-configuraties (reverse proxy, statisch) en automatische SSL. Dit biedt een ideale workflow voor React-ontwikkelaars. Je kunt nu direct verder ontwikkelen, testen en deployen.