react-vite

Áttekintés

A React Vite egy modern React konfiguráció, amely a Vite-ot használja build eszközként. Villámgyors fejlesztést kínál Hot Module Replacement (HMR) támogatással, optimalizált production buildeket és modern fejlesztési élményt React 19-cel.

Gyors kezdés

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

Helyi fejlesztés Dockerrel

Ha nincs Node.js telepítve helyileg, használhatja a Dockert a React parancsok futtatásához. A projekt tartalmaz egy Dockerfile-t az nginx-szel történő production buildekhez.

Előfeltételek

Telepítse a Docker Desktop-ot az operációs rendszeréhez (Windows, Mac vagy Linux).

Parancsok futtatása Dockerrel

# 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

Projekt struktúra

A fájlok elhelyezkedésének megértése:

├── src/
│   ├── App.jsx               # Gyökér komponens
│   ├── App.css               # App-specifikus stílusok
│   ├── main.jsx              # Alkalmazás belépési pont
│   ├── index.css             # Globális stílusok (Tailwind)
│   └── assets/               # Statikus erőforrások (képek, stb.)
├── public/                   # Nyilvános statikus fájlok
├── index.html                # HTML belépési pont
├── vite.config.js            # Vite konfiguráció
├── package.json              # Függőségek és szkriptek
├── nginx.conf                # Nginx konfig production-höz
└── Dockerfile                # Docker build konfiguráció
        

Gyakori feladatok

Komponens létrehozása

Hozzon létre .jsx fájlokat a src/ mappában:

// 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 használata

A React Router előre konfigurálva van. Adjon hozzá útvonalakat az App-ban:

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 használata

A Redux Toolkit előre telepítve van az állapotkezeléshez:

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 használata

A Tailwind CSS 4 előre konfigurálva van. Használja az osztályokat közvetlenül a JSX-ben:

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

Hasznos parancsok

Hibaelhárítás

Telepítési munkafolyamat

Minden alkalommal, amikor kódot küld a Git-re, az alkalmazás automatikusan buildelődik és telepítésre kerül:

A telepített alkalmazás URL-je ezt a formátumot követi:

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

Példa: https://student01-module-a.demo.nstrim.app