React

Overzicht

React is een JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces. Dit sjabloon gebruikt Create React App (CRA), wat een comfortabele opstelling biedt om React te leren en een solide basis voor single-page applicaties.

Snelstart

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>

npm install

npm start

npm run build
git add .
git commit -m "Initial setup"
git push origin main

Lokale ontwikkeling met Docker

Als je geen Node.js lokaal hebt geïnstalleerd, kun je Docker gebruiken om React-commando's uit te voeren.

Vereisten

Installeer Docker Desktop voor jouw besturingssysteem (Windows, Mac of Linux).

Commando's uitvoeren met Docker

# Run npm install
docker run --rm -v $(pwd):/app -w /app node:18 npm install

# Run development server (accessible at localhost:3000)
docker run --rm -v $(pwd):/app -w /app -p 3000:3000 node:18 npm start

# Build for production
docker run --rm -v $(pwd):/app -w /app node:18 npm run build

Projectstructuur

Begrijpen waar bestanden zich bevinden:

├── src/
│   ├── components/           # React-componenten
│   ├── hooks/                # Aangepaste React-hooks
│   ├── pages/                # Paginacomponenten
│   ├── services/             # API-services
│   ├── store/                # Redux store-configuratie
│   ├── App.js                # Hoofdcomponent
│   ├── App.css               # App-stijlen
│   └── index.js              # Applicatie-startpunt
├── public/                   # Statische bestanden
├── package.json              # Afhankelijkheden en scripts
├── tailwind.config.js        # Tailwind CSS-configuratie
└── Dockerfile                # Docker build-configuratie
        

Veelvoorkomende taken

Een component aanmaken

Maak .js-bestanden in src/components/:

// src/components/Button.js
export default function Button({ label, onClick }) {
  return (
    <button
      className="bg-blue-500 text-white px-4 py-2 rounded"
      onClick={onClick}
    >
      {label}
    </button>
  );
}

React-hooks gebruiken

Veelgebruikte hooks voor state en side-effects:

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

React Router gebruiken

React Router is vooraf geconfigureerd voor navigatie:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Tailwind CSS gebruiken

Tailwind CSS is vooraf geconfigureerd. Gebruik klassen direct in je JSX:

<div className="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Handige commando's

Probleemoplossing

Implementatie-workflow

Elke keer dat je code naar Git pusht, wordt je applicatie automatisch gebouwd en geïmplementeerd:

De URL van je geïmplementeerde applicatie volgt dit formaat:

https://<your-subdomain>-<repo-name>.<session-domain>

Voorbeeld: https://student01-module-a.demo.nstrim.app