Vontor CZ

Welcome to Vontor CZ!

frontend Folder Overview

The frontend folder contains all code and assets for the client-side React application. Its structure typically includes:

src/
Tady se ukladají věci, které uživateli se nepředavají přímo spíš takové stavební kostky.
- api/ TypeScript/JS soubory které se starají o API a o JWT tokeny. Čistě pracují s backendem
- context/
  Kontext si načte data které mu předáš a můžeš si je předávat mezi komponenty rychleji.
- hooks/ Pracuje s API a formátují to do výstupu který potřebujeme.
- components/
  Konktrétní komponenty které se vykreslují na stránce.
  
  Už využívají už hooky a contexty pro vykreslení informaci bez složite logiky (ať je komponenta hezky čistá a né moc obsáhla).
- features/ Nejsou to celé stránky, ale hotové komponenty.
  
  Obsahuje všechny komponenty plus její hooky, API, state a utils potřebné pro jednu konkrétní funkcionalitu aplikace. (použijí se jenom jednou)
  
  Features zajišťují modularitu a přehlednost aplikace.
  
  Příklad: komponenta košík, která zahrnuje API volání, state management a UI komponenty.
- layouts/ Tohle je jenom komponenta, která načte další komponenty, ale používá se jako layout kde jsou například navigace footer a ostatní se opakující prvky stránky, ale hlavní obsah ještě není součastí! Ten se načte skrz v pages.
- pages/
  Tady se jde do finále tady se vkládají samostatné komponenty a tvoří se už hlavní obsah stránky a vkládají se komponenty a tvoří se logika mezi ně.
- routes/ tady se ukládají routy které například zabraňuji načtení stránky nepříhlášeným uživatelům nebo jenom pro ty s určitou roli/oprávněním... tyhle route komponenty se pak využívají v
- assets/
  Obrázky, fonty, a ostatní statické soubory.
- App.tsx
  Root komponenta pro aplikaci, kde se nastavují routy pro jednotlivé stránky. Pozor nemyslím ty routy ze složky routes/ ... to jsou jenom obaly pro konktrétní routy pro jednotlivé stránky.
- main.tsx Vstupní bod pro načítaní aplikace (načíta se první komponenta App.jsx)
- utils/ Sběrné místo pro pomocné funkce, které nejsou přímo komponenty nebo hooky, ale jsou znovupoužitelné napříč aplikací.
- index.css
  globální styly
- App.css obsahuje stylovaní layoutu, navigace, footer, error okna atd. takové věci které zůstavjí vždy stejně
public/
Složka public obsahuje statické soubory dostupné přímo přes URL (např. index.html, favicon, obrázky), které React přímo nereenderuje ani neoptimalizuje.
package.json
něco jak requirements.txt v pythonu
vite.config.js / vite.config.ts
Vite konfigurace pro building a serving frontend aplikace.
Dockerfile Konfigurace pro Docker

Getting Started :3

Instalace balíčku (bere z package.json):
```
npm install
```
Start dev server:
```
npm run dev
```
Build pro produkci(finále):
```
npm run build
```
Preview production build:
```
npm run preview
```

Creating a New React Project with Vite

If you want to start a new project:

npm create vite@latest
# Choose 'react' or 'react-ts' for TypeScript
cd your-project
npm install
npm run dev

3.5 KiB Raw Blame History

Vontor CZ

frontend Folder Overview

Getting Started :3

Creating a New React Project with Vite

3.5 KiB

Raw Blame History