React

Oversigt

React er et JavaScript-bibliotek til at bygge brugergrænseflader. Denne skabelon bruger Create React App (CRA), som giver en behagelig opsætning til at lære React og et solidt fundament for single-page-applikationer.

Kom godt i gang

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

Lokal udvikling med Docker

Hvis du ikke har Node.js installeret lokalt, kan du bruge Docker til at køre React-kommandoer.

Forudsætninger

Installer Docker Desktop til dit operativsystem (Windows, Mac eller Linux).

Kør kommandoer med 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

Projektstruktur

Forstå hvor filerne er placeret:

├── src/
│   ├── components/           # React-komponenter
│   ├── hooks/                # Brugerdefinerede React-hooks
│   ├── pages/                # Side-komponenter
│   ├── services/             # API-services
│   ├── store/                # Redux store-konfiguration
│   ├── App.js                # Rod-komponent
│   ├── App.css               # App-styles
│   └── index.js              # Applikationens entry point
├── public/                   # Statiske filer
├── package.json              # Afhængigheder og scripts
├── tailwind.config.js        # Tailwind CSS-konfiguration
└── Dockerfile                # Docker build-konfiguration
        

Almindelige opgaver

Opret en komponent

Opret .js-filer i 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>
  );
}

Brug af React Hooks

Almindelige hooks til state og 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>
  );
}

Brug af React Router

React Router er forudkonfigureret til navigation:

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>
  );
}

Brug af Tailwind CSS

Tailwind CSS er forudkonfigureret. Brug klasserne direkte i din JSX:

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

Nyttige kommandoer

Fejlfinding

Udrulnings-workflow

Hver gang du pusher kode til Git, bygges og udrulles din applikation automatisk:

Din udrullede applikations-URL har dette format:

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

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