Foydalanish

FIAS (Frontend Initial Architecture System) starter kitga xush kelibsiz. Ushbu sahifa sizga birinchi loyihangizni yaratishga va FIAS bilan ishlash asoslarini tushunishga yordam beradi.

Start using

📦 1. Talablar

Loyihani boshlashdan oldin quyidagi dasturlar kompyuteringizda o‘rnatilganligiga ishonch hosil qiling:

  • Node.js (versiyasi 18 yoki undan yuqori)

  • npm (versiyasi 9 yoki undan yuqori) yoki yarn / pnpm

  • Git

Versiyalarni quyidagi buyruqlar bilan tekshirishingiz mumkin:

node -v
npm -v

🚀 2. Yangi loyiha yaratish

FIAS sizga tez va qulay yangi loyiha yaratish uchun CLI vositasini taqdim etadi. Quyidagi buyruqni terminalda bajarish kifoya:

npx create-fias

Buyruq bajarilgach, quyidagi savollarga javob bering:

  • Loyiha nomini tanlang

  • Next.js yoki React shablonlaridan birini tanlang

🧱 3. Loyiha tuzilmasi

Yangi loyiha yaratilgach, u Feature-Sliced Design (FSD) metodologiyasi asosida quyidagi tuzilma bo‘yicha tashkil etiladi:

  • app/ – Next.js App Router uchun (faqat Next.js’da)

  • shared/ – umumiy komponentlar, hook’lar va util’lar

  • entities/, features/, widgets/, pages/ – FSD bo‘yicha tashkil etilgan asosiy bo‘limlar

  • public/ – statik fayllar (rasmlar, favicon va h.k.)

  • styles/ – global uslublar va Tailwind CSS konfiguratsiyasi

Tuzilma haqida batafsil “Project Structure” bo‘limida tanishishingiz mumkin.

🧪 4. Ishga tushirish

Loyihangiz katalogiga o‘ting va dev serverni ishga tushiring:

cd your-project-name
npm run dev

Brauzeringizda http://localhost:3000 sahifasiga o‘ting va ilovangizni ishda ko‘ring.

🧰 5. Nimalar tayyor holatda keladi?

Loyihangiz quyidagi zamonaviy texnologiyalar va konfiguratsiyalar bilan tayyor holatda taqdim etiladi:

  • TypeScript

  • Tailwind CSS va shadcn/ui

  • Yorug‘ / qorong‘i rejim tugmasi

  • i18n (tilni avtomatik aniqlovchi xalqaro ko‘p tillilik tizimi)

  • React Query orqali API chaqiruvlar

  • Oldindan sozlangan ESLint va Prettier

  • Husky yordamida Git hook’lar:

    • pre-commit → kodni lint va format qiladi

    • pre-push → build jarayonini tekshiradi

🔧 Foydali hook’lar va util’lar:

Hook’lar:

  • useCloser

  • useMobile

  • useWindowSize

Funktsiyalar:

  • formatDate

  • formatPhone

  • formatPrice

✅ 6. Keyingi qadamlar

Loyihangiz tayyor bo‘lgach, hujjatlar bilan tanishing:

  • Kod yozish standartlari va linting haqida bilib oling

  • Routing va layout tushunchalarini o‘rganing

  • Mavzular va UI komponentlarni sozlang

Agar ishlash jarayonida muammolarga duch kelsangiz, “Troubleshooting” bo‘limiga qarang yoki github issues bo'limiga savol yuboring.

PreviousFIASga xush kelibsiz!NextStructure

Last updated