Гузариш ба мундариҷа
Мавзӯи 13 аз 13
Назария

Лоиҳаи ҳақиқӣ: Vite, модулҳо ва мағозаи ниҳоӣ

Аз сайт — ба компютери худ

То ҳол React рост дар саҳифаи курс кор мекард: китобхона пайваст буд, ва JSX дар паси парда ба JavaScript табдил меёфт. Барномаҳои воқеиро дигар хел месозанд: лоиҳа — ин ҷузвдон бо файлҳо дар компютер аст, ки дар он ҳар компонент дар файли худ меистад, ва асбоби махсус — ҷамъоваранда (bundler) — онҳоро ба сайти тайёр ҷамъ мекунад. Дар ин мавзӯъ — ин чӣ гуна сохта шудааст ва лоиҳаи худро чӣ тавр оғоз кардан.

Node.js ва npm

Ҷамъоваранда ва асбобҳои дигари барномасоз бо JavaScript навишта шудаанд ва дар Node.js — JavaScript берун аз браузер кор мекунанд. Якҷоя бо Node.js npm насб мешавад — мудири бастаҳо: вай китобхонаҳоро (React, React Router ва ҳазорон дигар) аз каталоги умумии npmjs.com зеркашӣ мекунад.

Node.js-ро аз сайти nodejs.org (версияи LTS) насб кунед ва дар терминал санҷед:

node --version
npm --version

Сохтани лоиҳа бо Vite

Vite — ҷамъоварандаи зуд ва маъмултарин барои лоиҳаҳои React. Лоиҳаро бо як фармон созед:

npm create vite@latest my-shop -- --template react
cd my-shop
npm install
npm run dev
  • npm create vite@latest my-shop — ҷузвдони my-shop-ро бо қолаби лоиҳа сохтан;
  • npm install — ҳамаи китобхонаҳоеро, ки ба лоиҳа лозиманд, зеркашӣ кардан;
  • npm run dev — сервери коркардро оғоз кардан. Вай суроғаро менависад, масалан http://localhost:5173 — онро дар браузер кушоед.

Сервери коркард файлҳоро назорат мекунад: тағйиротро нигоҳ доштед — саҳифа худаш дар як ҳиссаи сония нав мешавад, ва ҳолати компонентҳо то имкон нигоҳ дошта мешавад.

Дар дохили лоиҳа чӣ ҳаст

my-shop/
├── index.html          ← ягона саҳифаи HTML бо <div id="root">
├── package.json        ← тасвири лоиҳа: вобастагиҳо ва фармонҳо
├── package-lock.json   ← версияҳои дақиқи ҳамаи бастаҳои насбшуда
├── vite.config.js      ← танзимоти ҷамъоваранда
├── node_modules/       ← китобхонаҳои зеркашишуда (таҳрир намекунанд ва дар git нигоҳ намедоранд)
├── public/             ← файлҳо «чӣ хеле ки ҳастанд»: нишона, расмҳо
└── src/
    ├── main.jsx        ← нуқтаи вуруд: createRoot(...).render(<App />)
    ├── App.jsx         ← компоненти решагӣ
    ├── App.css
    └── index.css

package.json — шиносномаи лоиҳа:

{
  "name": "my-shop",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

Китобхонаи навро бо фармони npm install ном илова мекунанд — вай ба node_modules зеркашӣ мешавад ва дар dependencies сабт мешавад. Масалан, npm install react-router-dom.

Модулҳо: import ва export

Дар сайт тамоми код дар як файл буд. Дар лоиҳа ҳар файл — модул-и алоҳида бо доираи намоёнии худ аст: тағйирёбандаҳои як файл дар дигараш намоён нестанд, то онҳоро ошкоро содир (export) ва ворид (import) накунанд.

Содироти номдор — модул якчанд чизро аз рӯи ном медиҳад:

// src/utils/money.js
export function formatPrice(price) {
  return price.toFixed(2) + " сомонӣ";
}

export const CURRENCY = "TJS";

// src/components/ProductCard.jsx
import { formatPrice, CURRENCY } from "../utils/money.js";

Содироти пешфарз — як чизи асосии модул. Компонентҳоро одатан ҳамин тавр содир мекунанд:

// src/components/ProductCard.jsx
import { formatPrice } from "../utils/money.js";

export default function ProductCard({ product }) {
  return (
    <div className="card">
      <h3>{product.title}</h3>
      <p>{formatPrice(product.price)}</p>
    </div>
  );
}

// src/App.jsx
import ProductCard from "./components/ProductCard.jsx";   // номро ҳангоми import интихоб мекунед
Чӣ Export Import
Номдор export function f() {} / export const x = 1 import { f, x } from "./file.js"
Пешфарз export default function App() {} import App from "./App.jsx"
Ном иваз кардан — import { f as format } from "./file.js"
Аз китобхона — import { useState } from "react"
Услубҳо — import "./App.css"

Роҳҳо: ./ — ҳамон ҷузвдон, ../ — як сатҳ болотар. Агар роҳ бе нуқта сар шавад ("react", "react-router-dom"), ин баста аз node_modules аст.

Акнун фаҳмо аст, ки сатри const { useState } = React; дар ҳамаи мисолҳои курс аз куҷост: дар лоиҳа онро import { useState } from "react"; иваз мекунад.

Лоиҳаро ба файлҳо чӣ тавр тақсим кардан

Ягона сохтори дуруст нест, вале барои оғоз чунин кифоя аст:

src/
├── main.jsx
├── App.jsx                 ← масирҳо
├── api/products.js         ← функсияҳои дархост ба сервер
├── context/CartContext.jsx ← CartProvider ва хуки useCart
├── hooks/useFetch.js       ← хукҳои худ
├── components/             ← қисмҳои такроран истифодашаванда: Header, ProductCard, Button
└── pages/                  ← саҳифаҳо: HomePage, ProductPage, CartPage

Қоида: компоненте, ки аз ~100 сатр калонтар аст ё дар якчанд ҷой истифода мешавад, — сабаби ба файли худ баровардани он аст.

Услубҳо

Дар Vite файли CSS-ро танҳо ба компонент import мекунанд — ва услубҳо ба саҳифа меафтанд:

import "./ProductCard.css";

Барои он ки синфҳои компонентҳои гуногун бо ҳам бархӯрд накунанд, модулҳои CSS-ро истифода мебаранд: файли ProductCard.module.css ва import styles from "./ProductCard.module.css" → className={styles.card}. Tailwind CSS ҳам маъмул аст — синфҳои хурди тайёр рост дар нишонагузорӣ.

Ҷамъоварӣ ва нашр

npm run dev — барои коркард. Барои гузоштани сайт онро ҷамъ мекунанд:

npm run build

Vite JSX-ро ба JavaScript табдил медиҳад, ҳамаи модулҳоро ба якчанд файл мечаспонад, онҳоро фишурда мекунад ва натиҷаро ба ҷузвдони dist/ мегузорад. Инҳо файлҳои оддии статикӣ — HTML, CSS ва JS мебошанд. Онҳоро ба ҳар хостинг гузоштан мумкин аст, бисёрашон ройгонанд: Netlify, Vercel, Cloudflare Pages, GitHub Pages. Одатан пайваст кардани репозиторий дар GitHub кифоя аст — хостинг баъд аз ҳар тағйир npm run build-ро худаш иҷро мекунад.

Танзим барои React Router аз мавзӯи гузаштаро фаромӯш накунед: хостинг бояд барои ҳар суроға index.html-ро диҳад.

Асбобҳои муфид

  • React Developer Tools — васеъкунандаи браузер: дарахти компонентҳо, props ва ҳолати онҳо, Profiler.
  • ESLint (дар қолаби Vite аллакай танзим шудааст) — хатоҳоро меёбад, аз ҷумла вайрон кардани қоидаҳои хукҳо ва вобастагиҳои фаромӯшшудаи эффектҳо.
  • Git — таърихи тағйироти лоиҳа; node_modules ва dist-ро ба он илова намекунанд (файли .gitignore).
  • TypeScript — қолаби --template react-ts: навъҳо барои props ва ҳолат хатоҳоро ҳатто пеш аз иҷро медоранд.
  • Next.js — фреймворк бар React: масирҳо аз рӯи файлҳо, бор кардани маълумот дар сервер, SEO. Ин сайт бо он сохта шудааст.

Лоиҳаи ниҳоӣ

Вазифаи охирини мавзӯъ — мағозаи хурд аст, ки дар он қариб ҳама чиз аз курс вомехӯрад: компонентҳо ва props, рӯйхатҳо ва key, ҳолат ва навсозиҳои тағйирнопазир, эффект бо бор кардани маълумот, масирҳо бо параметрҳо, ҳисобҳо ҳангоми кашидан. Онро ҳал кунед, ва баъд кӯшиш кунед онро дар компютери худ дар лоиҳаи Vite такрор кунед, ба файлҳо тақсим карда: pages/, components/, context/CartContext.jsx. Ин аввалин лоиҳаи ҳақиқии React-и шумо барои портфолио мешавад.

Хулоса

  • Node.js + npm — муҳит ва мудири бастаҳо; npm create vite@latest, npm install, npm run dev.
  • package.json — вобастагиҳо ва фармонҳо; китобхонаҳо — npm install ном.
  • Ҳар файл — модул: export / export default ва import.
  • Бастаҳоро аз рӯи ном ("react"), файлҳои худро аз рӯи роҳ ("./App.jsx") import мекунанд.
  • npm run build → ҷузвдони dist/ → хостинги ройгон.

Каталог бо филтрҳо

Осон+10 XP

Компоненти Catalog-ро бо prop-и products (массиви { id, title, category, price }) нависед. Вай нишон медиҳад:

  • <select>-и категорияҳо: банди аввал all, баъд — ҳамаи категорияҳо аз молҳо бе такрор, бо тартиби пайдоиши аввал;
  • <input> барои ҷустуҷӯ аз рӯи ном (бе назардошти регистр);
  • <ul> бо <li> барои ҳар моли мувофиқ, матн — <title> — <price>.

Рӯйхати филтршуда ва рӯйхати категорияҳоро ҳангоми кашидан ҳисоб кунед — дар ҳолат танҳо категорияи интихобшуда ва матни ҷустуҷӯ.

категорияи fruit                 → Apple — 10, Banana — 5
ҷустуҷӯи "an" (ҳамаи категорияҳо) → Banana — 5, Mango juice — 20

Барои ҳал кардани масъалаҳо коннекторро пайваст кун

Коди масъалаҳо дар компютери худат иҷро мешавад — ин аз браузер тезтар ва боэътимодтар аст. Барои ин барномаи ройгони коннектори CodeWithMe лозим аст. Онро як бор пайваст кардан кифоя аст.

Коннекторро дар ин компютер ҷустуҷӯ мекунем…

  1. 1
    Коннекторро барои системаи худ (Windows, macOS ё Linux) зеркашӣ кун.Зеркашии коннекторДар саҳифаи зеркашӣ файлеро интихоб кун, ки дар номаш системаи ту ҳаст, масалан windows-amd64.
  2. 2Онро иҷро кун ва ҷузвдонеро интихоб кун, ки ҳалҳоят дар он ҷо меистанд. Python ва Node.js-ро ӯ худаш ҳангоми зарурат ба он ҷо мегузорад.
  3. 3
    Дар поён рамзи 6-рақамаро ворид кун — он дар равзанаи коннектор навишта шудааст («Рамз барои сайти CodeWithMe»). Агар браузер дар бораи дастрасӣ ба шабакаи маҳаллӣ пурсад — иҷозат деҳ.

Коннектор кушода аст (рамзи манбаъ дар GitHub), танҳо дар компютери ту кор мекунад ва кодро танҳо пас аз ворид кардани рамзи пайвастшавӣ иҷро мекунад.