React

Översikt

React är ett JavaScript-bibliotek för att bygga användargränssnitt. Den här mallen använder Create React App (CRA), som ger en bekväm uppsättning för att lära sig React och en stabil grund för single-page-applikationer.

Kom igång

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 utveckling med Docker

Om du inte har Node.js installerat lokalt kan du använda Docker för att köra React-kommandon.

Förutsättningar

Installera Docker Desktop för ditt operativsystem (Windows, Mac eller Linux).

Köra kommandon 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

Förstå var filerna finns:

├── src/
│   ├── components/           # React-komponenter
│   ├── hooks/                # Anpassade React-hooks
│   ├── pages/                # Sidkomponenter
│   ├── services/             # API-tjänster
│   ├── store/                # Redux store-konfiguration
│   ├── App.js                # Rotkomponent
│   ├── App.css               # App-stilar
│   └── index.js              # Applikationens ingångspunkt
├── public/                   # Statiska filer
├── package.json              # Beroenden och skript
├── tailwind.config.js        # Tailwind CSS-konfiguration
└── Dockerfile                # Docker-byggkonfiguration
        

Vanliga uppgifter

Skapa en komponent

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

Använda React Hooks

Vanliga hooks för state och sidoeffekter:

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

Använda React Router

React Router är förkonfigurerat för navigering:

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

Använda Tailwind CSS

Tailwind CSS är förkonfigurerat. Använd klasser direkt i din JSX:

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

Användbara kommandon

Felsökning

Distributionsflöde

Varje gång du pushar kod till Git byggs och distribueras din applikation automatiskt:

Din distribuerade applikations-URL följer detta format:

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

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