WSL

3 🎨Frontend

🎯 Syfte

Skapa och dockerisera en enkel React-baserad miniräknare (frontend) som kommunicerar med backend via API.

🛠️ Steg 1: Skapa React-appen i frontend/

Använd create-react-app (eller Vite om du föredrar det):

cd frontend
npx create-react-app . --template cra-template

Om npx inte fungerar i WSL: installera Node.js med sudo apt install nodejs npm.

🧮 Steg 2: Skapa en enkel miniräknare

Redigera App.js:

import { useState } from 'react';

function App() {
  const [a, setA] = useState('');
  const [b, setB] = useState('');
  const [result, setResult] = useState(null);

  const calculate = async (op) => {
    const response = await fetch(`http://localhost:5000/calc/${op}?a=${a}&b=${b}`);
    const data = await response.json();
    setResult(data.result);
  };

  return (
    <div>
      <h1>Miniräknare</h1>
      <input value={a} onChange={e => setA(e.target.value)} />
      <input value={b} onChange={e => setB(e.target.value)} />
      <div>
        <button onClick={() => calculate('add')}>+</button>
        <button onClick={() => calculate('sub')}>-</button>
        <button onClick={() => calculate('mul')}>×</button>
        <button onClick={() => calculate('div')}>÷</button>
      </div>
      <h2>Resultat: {result}</h2>
    </div>
  );
}

export default App;

🐳 Steg 3: Skapa Dockerfile för frontend

# frontend/Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

🧪 Steg 4: Kör frontend i container

Testa lokalt:

docker build -t calc-frontend .
docker run -p 3000:3000 calc-frontend

Öppna http://localhost:3000 i webbläsaren

🧩 Steg 5: Lägg till frontend i docker-compose.yml

I projektroten calc-project/docker-compose.yml:

version: '3'
services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    restart: always

🧪 Övning – Testa frontendflödet

  1. Starta projektet med docker-compose up --build
  2. Navigera till http://localhost:3000
  3. Testa UI\:t (även om API-anropen ger fel – backend kommer i nästa modul)
  4. Committa och pusha koden till GitHub
git add .
git commit -m "Lägg till frontend med React och Docker"
git push

✅ Klar med Projektmodul

I nästa modul bygger vi backend med Node/Express som räknar och levererar resultat till frontend via ett REST API.