react-vite

Pārskats

React Vite ir moderna React konfigurācija, kas izmanto Vite kā būvēšanas rīku. Tā piedāvā zibenīgi ātru izstrādi ar karsto moduļu aizstāšanu (HMR), optimizētas produkcijas būves un modernu izstrādes pieredzi ar React 19.

Ātrais sākums

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

Lokālā izstrāde ar Docker

Ja jums nav lokāli instalēts Node.js, varat izmantot Docker, lai palaistu React komandas. Projekts ietver Dockerfile produkcijas būvēm ar nginx.

Priekšnoteikumi

Instalējiet Docker Desktop savai operētājsistēmai (Windows, Mac vai Linux).

Komandu palaišana ar Docker

# 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

Projekta struktūra

Izpratne par failu atrašanās vietām:

├── src/
│   ├── App.jsx               # Saknes komponente
│   ├── App.css               # Lietotnes specifiskie stili
│   ├── main.jsx              # Lietojumprogrammas ieejas punkts
│   ├── index.css             # Globālie stili (Tailwind)
│   └── assets/               # Statiskie resursi (attēli utt.)
├── public/                   # Publiskie statiskie faili
├── index.html                # HTML ieejas punkts
├── vite.config.js            # Vite konfigurācija
├── package.json              # Atkarības un skripti
├── nginx.conf                # Nginx konfigurācija produkcijai
└── Dockerfile                # Docker būves konfigurācija
        

Bieži veicamie uzdevumi

Komponentes izveide

Izveidojiet .jsx failus mapē 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 izmantošana

React Router ir iepriekš konfigurēts. Pievienojiet maršrutus savā App:

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 izmantošana

Redux Toolkit ir iepriekš instalēts stāvokļa pārvaldībai:

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 izmantošana

Tailwind CSS 4 ir iepriekš konfigurēts. Izmantojiet klases tieši savā JSX:

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

Noderīgas komandas

Problēmu novēršana

Izvietošanas darbplūsma

Katru reizi, kad augšupielādējat kodu Git, jūsu lietojumprogramma tiek automātiski būvēta un izvietota:

Jūsu izvietotās lietojumprogrammas URL seko šim formātam:

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

Piemērs: https://student01-module-a.demo.nstrim.app