react-vite

Übersicht

React Vite ist ein modernes React-Setup mit Vite als Build-Tool. Es bietet blitzschnelle Entwicklung mit Hot Module Replacement (HMR), optimierte Produktions-Builds und eine moderne Entwicklungserfahrung mit React 19.

Schnellstart

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

npm install

npm run dev

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

Lokale Entwicklung mit Docker

Wenn Sie Node.js nicht lokal installiert haben, können Sie Docker verwenden, um React-Befehle auszuführen. Das Projekt enthält eine Dockerfile für Produktions-Builds mit nginx.

Voraussetzungen

Installieren Sie Docker Desktop für Ihr Betriebssystem (Windows, Mac oder Linux).

Befehle mit Docker ausführen

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

# Run development server (accessible at localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm run dev

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

Projektstruktur

Verstehen, wo sich Dateien befinden:

├── src/
│   ├── App.jsx               # Root-Komponente
│   ├── App.css               # App-spezifische Styles
│   ├── main.jsx              # Anwendungs-Einstiegspunkt
│   ├── index.css             # Globale Styles (Tailwind)
│   └── assets/               # Statische Assets (Bilder usw.)
├── public/                   # Öffentliche statische Dateien
├── index.html                # HTML-Einstiegspunkt
├── vite.config.js            # Vite-Konfiguration
├── package.json              # Abhängigkeiten und Skripte
├── nginx.conf                # Nginx-Konfiguration für Produktion
└── Dockerfile                # Docker-Build-Konfiguration
        

Häufige Aufgaben

Komponente erstellen

Erstellen Sie .jsx-Dateien in src/:

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

React Router verwenden

React Router ist vorkonfiguriert. Fügen Sie Routen in Ihrer App hinzu:

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

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

Redux Toolkit verwenden

Redux Toolkit ist für State-Management vorinstalliert:

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Tailwind CSS verwenden

Tailwind CSS 4 ist vorkonfiguriert. Verwenden Sie Klassen direkt in Ihrem JSX:

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

Nützliche Befehle

Fehlerbehebung

Deployment-Workflow

Jedes Mal, wenn Sie Code zu Git pushen, wird Ihre Anwendung automatisch gebaut und deployt:

Ihre deployte Anwendungs-URL folgt diesem Format:

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

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