Een React-project aanmaken en draaien in een lokale macOS-omgeving met ServBay

Wat is React?

React is een open-source JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces (UIs), onderhouden door Meta (voorheen Facebook) en de community. React benadert UI-ontwikkeling op een componentgebaseerde manier, waardoor ontwikkelaars efficiënt complexe en onderhoudbare single-page applications (SPA's) of de viewlaag van grote webapplicaties kunnen bouwen. De kracht van React zit in het declaratieve programmeermodel, een efficiënte virtuele DOM-update, en een bloeiend ecosysteem.

Belangrijkste kenmerken en voordelen van React

• Componentgebaseerde ontwikkeling: Breek complexe UI's op in onafhankelijke, herbruikbare componenten voor betere codeonderhoudbaarheid en hergebruik.
• Declaratieve views: Beschrijf eenvoudig de toestand van de UI en React zorgt ervoor dat de DOM daarop aansluit. Dit vereenvoudigt de logica van de UI-ontwikkeling.
• Virtuele DOM (Virtual DOM): Houdt een virtuele representatie van de DOM in het geheugen bij en brengt minimale wijzigingen aan in de echte DOM, wat prestaties aanzienlijk verhoogt.
• Enkelrichtings-datastroom: Data stroomt van boven naar beneden, waardoor statuswijzigingen van de applicatie gemakkelijker te volgen en begrijpen zijn.
• JSX: Een JavaScript-syntaxtoevoeging die HTML-achtige structuren in JavaScript mogelijk maakt en de code leesbaarder maakt.
• Sterk ecosysteem: Groot community support, plus talloze derde-partij bibliotheken (zoals React Router, Redux/Zustand/MobX, Material UI, etc.) voor onder andere state management, routing en UI-componenten.

Met React bouw je snel en efficiënt moderne, high-performant webapplicaties.

Met ServBay een React ontwikkel- en productieomgeving opzetten

ServBay is een krachtige lokale webontwikkelomgeving voor macOS-gebruikers, met onder andere Node.js support. Deze gids legt stap voor stap uit hoe je met ServBay's Node.js omgeving en de Websites-functie een React-project aanmaakt, configureert en uitvoert, inclusief reverse proxy in de ontwikkelmodus en het serveren van statische bestanden in productie.

Voorwaarden

Voordat je begint, zorg dat je het volgende hebt geregeld:

1. ServBay geïnstalleerd: ServBay moet succesvol geïnstalleerd en draaiend zijn op je macOS-systeem.
2. Node.js-pakket geïnstalleerd: Installeer Node.js via de ServBay-interface of via de commandline. Zie de instructies voor Node.js installatie in ServBay voor details. ServBay beheert automatisch Node.js-versies en omgevingsvariabelen.

Een React-project aanmaken

We gebruiken Vite – een moderne frontend build tool – om snel een React-project te starten. Vite zorgt voor supersnelle opstart en instant hot module replacement (HMR), wat een geweldige ontwikkelervaring oplevert. Dit is het moderne alternatief voor create-react-app.

1. Open Terminal en ga naar de hoofdmap van je websites

   Open je terminal-app. De standaard rootmap voor ServBay-websites is /Applications/ServBay/www. Navigeer hierheen:

   cd /Applications/ServBay/www

2. Start een nieuw React-project met Vite

   Voer het volgende uit – hiermee wordt een nieuw project met de naam servbay-react-demo aangemaakt met het React-template:

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

   • npx is de npm package runner, waarmee je commando's direct van het npm registry uitvoert zonder globale installatie. Zo gebruik je steeds de nieuwste versie van create-vite.
   • create-vite is het officiële scaffolding hulpmiddel van Vite.
   • servbay-react-demo is de naam van de projectmap.
   • --template react zet de basisstructuur voor een nieuw React-project neer.

   Volg de instructies op het scherm om het project klaar te zetten.

3. Navigeer naar de projectmap en installeer de afhankelijkheden

   Ga de nieuw aangemaakte map in en installeer de npm dependencies:

   cd servbay-react-demo
   npm install

   • Je kunt ook yarn install of pnpm install gebruiken als je een andere package manager prefereert.

(Optioneel) De inhoud van het React-project aanpassen

Om te testen of alles werkt, kun je eenvoudig de homepage van je project aanpassen.

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

   Gebruik je favoriete code editor, open het bestand src/App.jsx (bij JavaScript) of src/App.tsx (bij TypeScript) in je projectmap.

2. Bewerk de inhoud

   Zoek het deel van de code waar de hoofdinhoud wordt gerenderd, en verander het zodat er "Hello ServBay!" getoond wordt:

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

   Sla het bestand op.

Naar de ontwikkelmodus gaan

Tijdens development wordt meestal een lokale ontwikkelserver gebruikt met hot module replacement. ServBay kan externe aanvragen via een reverse proxy doorsturen naar deze server.

1. Start de ontwikkelserver vanuit Terminal

   Ga in de projectmap servbay-react-demo en start Vite met een zelfgekozen poort (bijvoorbeeld 8585):

   npm run dev -- --port 8585

   • npm run dev voert het dev script uit zoals omschreven in het project’s package.json, en start normaal gesproken de Vite-ontwikkelserver.
   • -- --port 8585 geeft de poort door aan het Vite-commando.

   De ontwikkelserver laat nu in de terminal een lokaal adres zien, zoals http://localhost:8585. Laat deze terminal openstaan; sluit de server niet af.

2. Website reverse proxy instellen in ServBay

   Open ServBay en ga naar het Websites-gedeelte. Klik op toevoegen om een nieuwe websiteconfiguratie te maken:

   • Naam: ServBay React Dev (een beschrijvende titel)
   • Domein: servbay-react-dev.servbay.demo (een demo domeinnaam op basis van ServBay)
   • Site Type: Kies Reverse Proxy
   • Proxy IP: 127.0.0.1 (de server draait lokaal)
   • Proxy Port: 8585 (dezelfde poort als hierboven ingesteld)

   Bewaar de instelling. ServBay past nu automatisch de ingebouwde webserverconfiguratie (Caddy of Nginx) aan om verkeer dat gericht is aan servbay-react-dev.servbay.demo door te sturen naar http://127.0.0.1:8585.

   Zie de ServBay websitebeheer documentatie voor uitgebreide instructies over het toevoegen van websites.

3. Bezoek de ontwikkelomgeving

   Open je browser en ga naar het zojuist ingestelde domein: https://servbay-react-dev.servbay.demo.

   • Dankzij ServBay wordt er automatisch een SSL-certificaat (uitgegeven door ServBay User CA of ServBay Public CA) geconfigureerd, zodat je het project veilig via HTTPS kunt benaderen. Meer info vind je in Je site beveiligen met SSL.
   • Nu kun je projectbestanden aanpassen en ze opslaan; de wijzigingen verschijnen direct in de browser, oftewel Hot Module Replacement (HMR) werkt!

Een productie build maken

Is je project klaar voor live gebruik? Dan genereer je een geoptimaliseerde productieversie.

1. Voer de productie build uit in Terminal

   In de projectmap servbay-react-demo:

   npm run build

   Dit voert het build script uit. Bij Vite-gebaseerde React-projecten compileert, bundelt en optimaliseert dit je code tot statische bestanden (HTML, CSS, JavaScript enz.), die standaard in de dist map worden geplaatst. Je ziet een melding als de build gelukt is.

2. Statische site instellen in ServBay

   De map dist bevat nu alle benodigde bestanden. Maak in ServBay een statische websiteconfiguratie aan:

   • Naam: ServBay React Prod
   • Domein: servbay-react.servbay.demo (een demodomein, onderscheidend ten opzichte van het ontwikkeldomein)
   • Site Type: Kies Static
   • Website Root Directory: /Applications/ServBay/www/servbay-react-demo/dist (de bouwmap van je project)

   Sla op. ServBay zorgt dat de bestanden uit dist direct via de ingebouwde webserver beschikbaar zijn.

3. Toegang tot het productieproject

   Open je browser en ga naar het nieuwe domein: https://servbay-react.servbay.demo.

   Je bezoekt nu de geoptimaliseerde, productieklare website. Ook deze site wordt automatisch beschermd door SSL dankzij ServBay.

Samenvatting

Met deze stappen heb je succesvol een React-project opgezet in een lokale macOS-omgeving met ServBay, inclusief ontwikkelmodus met reverse proxy en productie met statische files. ServBay vereenvoudigt het opzetten en beheren van de lokale ontwikkelomgeving, vooral dankzij ingebouwde Node.js-support, flexibele websiteconfiguratie (voor reverse proxy en statische hosting) en automatische SSL. Je kunt nu efficiënt verder ontwikkelen, testen en deployen met je React-app.