# React Js template

<figure><img src="https://2732173407-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT4YO4oylbhJSf6A9M9vf%2Fuploads%2F7RoxtCrM1IQyLnilylos%2Fstart%20(2).svg?alt=media&#x26;token=8f9c3bef-8c34-4910-b044-8a09a318b142" alt=""><figcaption><p>React js structure</p></figcaption></figure>

## 🌳 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

* [Project Structure (Next.js)](https://fias.gitbook.io/docs/boshlash/structure/next-js-template)
* [Getting Started](https://fias.gitbook.io/docs/boshlash/structure)
