react-vite

Yleiskatsaus

React Vite on moderni React-asennus, joka käyttää Viteä rakennustyökaluna. Se tarjoaa salamannopean kehityksen Hot Module Replacement (HMR) -ominaisuudella, optimoidut tuotantorakennukset ja modernin kehityskokemuksen React 19:llä.

Pikaopas

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

Paikallinen kehitys Dockerilla

Jos sinulla ei ole Node.js:ää asennettuna paikallisesti, voit käyttää Dockeria React-komentojen suorittamiseen. Projekti sisältää Dockerfilen tuotantorakennuksille nginx:llä.

Vaatimukset

Asenna Docker Desktop käyttöjärjestelmällesi (Windows, Mac tai Linux).

Komentojen suorittaminen Dockerilla

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

# Käynnistä kehityspalvelin (käytettävissä osoitteessa localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm run dev

# Rakenna tuotantoa varten
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build

Projektin rakenne

Tiedostojen sijainnit:

├── src/
│   ├── App.jsx               # Juurikomponentti
│   ├── App.css               # Sovelluksen tyylit
│   ├── main.jsx              # Sovelluksen aloituspiste
│   ├── index.css             # Globaalit tyylit (Tailwind)
│   └── assets/               # Staattiset resurssit (kuvat jne.)
├── public/                   # Julkiset staattiset tiedostot
├── index.html                # HTML-aloituspiste
├── vite.config.js            # Viten konfiguraatio
├── package.json              # Riippuvuudet ja skriptit
├── nginx.conf                # Nginx-konfiguraatio tuotantoon
└── Dockerfile                # Dockerin rakennuskonfiguraatio
        

Yleiset tehtävät

Komponentin luominen

Luo .jsx-tiedostoja src/-kansioon:

// 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 Routerin käyttö

React Router on esikonfiguroitu. Lisää reitit sovellukseesi:

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 Toolkitin käyttö

Redux Toolkit on esiasennettu tilanhallintaan:

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:n käyttö

Tailwind CSS 4 on esikonfiguroitu. Käytä luokkia suoraan JSX:ssä:

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

Hyödyllisiä komentoja

Vianmääritys

Käyttöönoton työnkulku

Joka kerta kun lähetät koodia Gitiin, sovelluksesi rakennetaan ja otetaan käyttöön automaattisesti:

Käyttöönotetun sovelluksesi URL noudattaa tätä muotoa:

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

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