React Js template

React js structure

🌳 Root folder

.
├── .git / .husky              # Git va pre-commit hook sozlamalari
├── .vscode                    # VSCode sozlamalari (ixtiyoriy)
├── public/                    # Public aktivlar (rasmlar, favicon va h.k.)
├── src/                       # Asosiy ilova kodi
├── .env                       # Muhit o‘zgaruvchilari
├── package.json               # Bog‘liqliklar va script’lar
├── vite.config.ts             # Vite konfiguratsiyasi
├── tsconfig.*.json            # TypeScript konfiguratsiyalari
├── eslint.config.js           # ESLint konfiguratsiyasi
├── .prettierrc                # Prettier konfiguratsiyasi

🧠 src/ – Asosiy qisim

Ilovaning barcha asosiy kodi Feature-Sliced Design (FSD) arxitekturasi asosida shu yerda joylashgan.

🧩 features/ – Funksional modullar

Bu yerda har bir modul o‘ziga xos biznes logikani ifodalaydi va mustaqil ishlaydi.

features/
└── auth/
    ├── lib/                  # Yordamchi funksiyalar yoki xizmatlar
    ├── model/                # State boshqaruvi, typelar, mantiq
    └── ui/                   # Faqat auth uchun UI komponentlar

Har bir feature o‘zida model (mantiq), lib (xizmatlar) va ui (interfeys) qismlarini birlashtiradi.

📦 providers/ – Ilova bo‘ylab ishlovchi Provider’lar

Umumiy kontekstlar, mavzu (theme), va React Query kabi xizmatlar uchun provider’lar.

providers/
├── react-query/
│   └── QueryProvider.tsx      # React Query Provider
├── theme/
│   └── ThemeProvider.tsx      # Mavzu uchun Provider
└── main.tsx                   # Ilovani DOMga o‘rnatish (mount) qismi

Bular yordamida barcha konfiguratsiyalar markaziy ravishda boshqariladi.

🛠️ shared/ – Qayta ishlatiladigan umumiy bloklar

Ilova bo‘ylab har xil joylarda qo‘llanilishi mumkin bo‘lgan hooks, utils, config va boshqa yordamchi vositalar.

shared/
├── config/                 # Global konfiguratsiyalar (masalan: til ro‘yxati)
├── api/                    # API mijozlari va endpoint’lar
├── i18n/                   # Tarjima va i18next sozlamalari
├── constants/              # O‘zgarmas qiymatlar
├── hooks/                  # Qayta foydalaniladigan hook’lar
├── lib/                    # Yordamchi funksiyalar
├── types/                  # Umumiy typelar (tavsiya etiladi)
├── ui/                     # UI komponentlar (qayta ishlatiladigan)

📌 Muhim qismlar:

  • hooks/: useCloser, useMobile, useWindowSize kabi

  • lib/: formatDate, formatPhone, formatPrice

  • ui/: Tugma (Button), DropdownMenu kabi UI elementlar

🧱 widgets/ – Kompozit komponentlar

widgets/ — bu bir nechta features va shared komponentlarni birlashtirib maʼnoli UI bo‘limlari hosil qiladi.

widgets/
├── lang-toggle/
│   ├── lib/                # Til almashtirish mantiqi (ixtiyoriy)
│   └── ui/                 # Til almashtirish interfeysi
├── theme-toggle/
│   └── ui/                 # Light/Dark tema toggle
├── welcome/
│   └── ui/                 # Welcome bo‘limi interfeysi

widgets ko‘p joylarda qayta ishlatiladi, masalan pages yoki layouts.

🚀 Kirish nuqtalari

App.tsx            # Asosiy komponent (Vite kirish nuqtasiga ulangan)
main.tsx           # DOM’ga ilovani joylashtiradi (render qiladi)
index.css          # Global uslublar

✅ Asosiy xususiyatlar

  • 🔧 TypeScript birinchi o‘rinda – kuchli tip nazorati

  • 🎨 Tayyor tema tizimi – Light/Dark toggle bilan

  • 🌍 i18next – Ko‘p tillilik uchun tayyor yechim

  • ⚛️ React Query – Ma’lumot olish uchun tayyor integratsiya

  • ✨ Tailwind CSS + shadcn/ui – Zamonaviy va foydalanuvchi uchun qulay interfeyslar

  • ✅ ESLint, Prettier, Husky – Kod sifatini nazorat qilish uchun sozlangan

  • 📦 Foydali hook’lar va util’lar – Ishga tayyor

🔗 Related Pages

PreviousNext Js templateNextPrettier

Last updated