React: барои чӣ лозим аст. Vite, JSX ва компоненти аввал

01 Барои чӣ React: DOM-и дастӣ аз куҷо халал мерасонад

Ҳар чизе, ки Шумо то ҳол бо экран мекардед, — ин равиши императивӣ аст: Шумо ба браузер қадам ба қадам фармон медиҳед. «Ин унсурро ёб. Нав эҷод кун. Матнро ба он сабт кун. Ин ҷо ҷойгир кун». Барои корт бо сарлавҳа ин чунин менамояд:

<div id="app"></div>

.card { border: 2px solid #1f6feb; border-radius: 12px; padding: 12px 16px; max-width: 280px; }
.card h2 { margin: 0 0 6px; }

const app = document.querySelector("#app");

const card = document.createElement("div");
card.className = "card";

const title = document.createElement("h2");
title.textContent = "JavaScript с нуля";

const info = document.createElement("p");
info.textContent = "24 урока · 8 недель";

const button = document.createElement("button");
button.textContent = "Записаться";

card.append(title, info, button);
app.append(card);

console.log(app.innerHTML);

Ҳамин натиҷа бо React. Муқоиса кунед: инҷо на як createElement ва на як querySelector ҳаст. Шумо он чиро менависед, ки мехоҳед бинед, — функсия танҳо аломатгузориро «бармегардонад».

export default function App() {
  return (
    <div className="card">
      <h2>JavaScript с нуля</h2>
      <p>24 урока · 8 недель</p>
      <button>Записаться</button>
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML), 100);

.card { border: 2px solid #1f6feb; border-radius: 12px; padding: 12px 16px; max-width: 280px; }
.card h2 { margin: 0 0 6px; }

Дар консоли ҳарду қуттии регӣ — як аломатгузории ҳамонанд. Фарқ дар он аст, ки Шумо ба он чӣ тавр расидед: дар ҳолати аввал 12 сатри фармон, дар дуюм — «тасвир»-и он чӣ лозим аст.

Чор дарди DOM-и дастӣ

1. Аломатгузорӣ намоён нест

Сохтори саҳифа дар паси даҳҳо createElement ва append пинҳон аст. Барои фаҳмидани он ки чӣ мешавад, бояд кодро дар зеҳн «иҷро» кард.

2. Нав кардан осон фаромӯш мешавад

Як маълумот дар якчанд ҷой нишон дода мешавад. Дар як ҷо тағйир додед — дар ҷои дигар кӯҳна монд, ва экран дурӯғ мегӯяд.

3. «Тегҳои худӣ» нестанд

Корти курс дар даҳ ҷо лозим аст — функсияҳои корхона навиштан ва бо даст пайваст кардан лозим мешавад. Роҳи ягона барои гуфтан «ин блоки ман аст, онро мисли теги оддӣ истифода бар» нест.

4. Ҳолат ва экран аз ҳам мераванд

Дар дарси 11 Шумо инро бо функсияи render() ҳал кардед, ки экранро пурра аз нав месозад. Кор мекунад, аммо ҳангоми ҳар тағйирот браузер ҳама чизро аз нав эҷод мекунад — ва фокус дар майдони воридот, прокрутка ва интихоб гум мешаванд.

Дарди дуюмро зинда бинед. Нархи курс дар ду ҷой нишон дода шудааст, аммо танҳо дар як ҷо нав шудааст:

document.body.innerHTML = `
  <p>Курс: <b id="price-top">500</b> сомони</p>
  <p>Итого: <b id="price-total">500</b> сомони</p>`;

let price = 500;
price = 450; // тахфиф кардем

document.querySelector("#price-top").textContent = price;
// дар бораи #price-total фаромӯш кардем

console.log(document.querySelector("#price-top").textContent);
console.log(document.querySelector("#price-total").textContent);

Дар боло 450, дар «Итого» ҳанӯз 500. Дар саҳифаи хурд ин фавран намоён аст, дар барномаи калон бо сад экран — не. React чунин сохта шудааст, ки экран ҳамеша аз маълумот ҳисоб карда мешавад, ва «фаромӯш кардан»-и нав кардани ҷой чизе надорад.

React чист

React — китобхонаи сохтани интерфейсҳо аст, онро ширкати Meta (Facebook-и пешина) офаридааст, ва ҳоло он шояд маъмултарин дар ҷаҳон барои сайтҳо ва барномаҳо бошад. Ғояи асосӣ: интерфейс — функсия аз маълумот аст. Маълумот тағйир ёфт — React худаш «буд» ва «шуд»-ро муқоиса мекунад ва дар DOM танҳо он чизеро, ки лозим аст, иваз мекунад. Ҳама чизи дигар (масиррӯбиҳо, рендери серверӣ) алоҳида пайваст мешавад: дар сатҳи оянда Шумо бо Next.js вомехӯред — ин фреймворк дар асоси React аст.

const list = document.createElement("ul");

for (const dish of ["Оши палав", "Самбуса", "Курутоб"]) {
  const li = document.createElement("li");
  li.textContent = dish;
  list.append(li);
}

console.log(list.children.length);
console.log(list.firstElementChild.textContent);
console.log(list.outerHTML);

3
Оши палав
<ul><li>Оши палав</li><li>Самбуса</li><li>Курутоб</li></ul>

document.body.innerHTML = `
  <p>Курс: <b id="price-top">500</b> сомони</p>
  <p>Итого: <b id="price-total">500</b> сомони</p>
  <p>Взнос в месяц: <b id="price-month">125</b> сомони</p>`;

const state = { price: 500 };

function render() {
  // TODO: ҳар се ҷойро аз рӯи state.price нав кунед
}

state.price = 480;
render();

console.log(document.querySelector("#price-top").textContent);
console.log(document.querySelector("#price-total").textContent);
console.log(document.querySelector("#price-month").textContent);

480
480
120

const plan = document.createElement("section");
plan.className = "plan";

const h = document.createElement("h3");
h.textContent = "Тариф «Старт»";

const ul = document.createElement("ul");
const li1 = document.createElement("li");
li1.textContent = "24 урока";
const li2 = document.createElement("li");
li2.textContent = "Проект в портфолио";
ul.append(li1, li2);

plan.append(h, ul);

export default function App() {
  return (
    // TODO: аломатгузории тарифро баргардонед
    <div></div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<section class="plan">
<h3>Тариф «Старт»</h3>
<ul>
<li>24 урока</li>
<li>Проект в портфолио</li>
</ul>
</section>

Муфассал хонед: react.dev — Quick Start · learn.javascript.ru — дарахти DOM

02 Бо компонентҳо фикр мекунем

Ҳар сайтеро кушоед ва дар зеҳн «хиштҳо»-ро бо чорчӯба иҳота кунед: сарлавҳа, меню, корти мол, тугма, поёнӣ. Ин худи компонентҳо ҳастанд. Компонент — функсияест, ки порчаи интерфейсро бармегардонад. Азбаски ин функсия аст, Шумо аллакай бо он муомила карда метавонед: як маротиба эълон кунед, ба қадри лозим даъват намоед.

Саҳифа — дарахт аст

Компонентҳо дар якдигар мисли қуттиҳои дарунгузашта ҷойгир мешаванд. Берунитарин — App, компоненти асосии барнома. Дар дохили он боқӣ ҷойгиранд:

Ҳудуди компонентҳоро чӣ тавр ёфтан

• Блок такрор мешавад (корти курс, банди меню) — қариб ҳамеша ин компоненти алоҳида аст.
• Блок вазифаи худро дорад («сарлавҳаро нишон деҳ», «поёниро нишон деҳ») — компоненти алоҳида, мисли функсияи алоҳида дар дарси 5.
• Файл калон шуд, ва дар он чизи лозимиро ёфтан мушкил аст — ба қисмҳо мебурем.
• То заррачаҳо бурида накунед. Теги <h2>-ро компонент кардан лозим нест. Қоидаи хуб: агар барои блок номи фаҳмо ихтироъ кардан мумкин бошад, он барои компонент ҳам мебарояд.

Компоненти аввал

Компонент мисли функсияи дарси 5 менамояд, танҳо он на рақам, балки аломатгузориро бармегардонад. Ду қоида: ном бо ҳарфи калон оғоз мешавад ва онро мисли теги истифода бурдан лозим аст:

function Header() {
  return (
    <header className="top">
      <h1>MakeFirstStep</h1>
    </header>
  );
}

function Footer() {
  return <footer>© MakeFirstStep, Душанбе</footer>;
}

export default function App() {
  return (
    <div className="page">
      <Header />
      <main>Здесь будут курсы</main>
      <Footer />
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.page { border: 2px solid #1f6feb; border-radius: 12px; overflow: hidden; }
.top { background: #1f6feb; color: #fff; padding: 4px 16px; }
main { padding: 16px; }
footer { background: #f3f4f6; padding: 8px 16px; color: #6b7280; }

Ба се чиз диққат диҳед. <Header /> бо ҳарфи калон — ин компоненти мо аст: React функсияи Header-ро даъват мекунад ва натиҷаро ҷойгир менамояд. <main> бо ҳарфи хурд — теги оддии HTML. App ҳам компонент аст, танҳо аз ҳама асосӣ. Онро мо ҳамчун export default function App() менависем: маҳз онро қуттии регӣ (ва лоиҳаи Vite) дар саҳифа нишон медиҳад.

function isComponentName(name) {
  // TODO: true ё false баргардонед
  return false;
}

for (const name of ["Header", "footer", "CourseCard", "nav", "App"]) {
  console.log(name + ": " + isComponentName(name));
}

Header: true
footer: false
CourseCard: true
nav: false
App: true

function Header() {
  return (
    <header>
      <h1>MakeFirstStep</h1>
    </header>
  );
}

// TODO: компоненти Footer-ро эълон кунед

export default function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Курсы скоро</p>
      </main>
      <Footer />
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<div>
<header>
<h1>MakeFirstStep</h1>
</header>
<main>
<p>Курсы скоро</p>
</main>
<footer>© MakeFirstStep, Душанбе</footer>
</div>

function menu() {
  return (
    <ul>
      <li>Оши палав</li>
      <li>Самбуса</li>
    </ul>
  );
}

export default function App() {
  return (
    <div>
      <h2>Меню</h2>
      <menu />
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<div>
<h2>Меню</h2>
<ul>
<li>Оши палав</li>
<li>Самбуса</li>
</ul>
</div>

Муфассал хонед: react.dev — Your First Component · react.dev — Thinking in React

03 Лоиҳа месозем: Vite + React

Дар дарси 17 Шумо лоиҳаро дар Vite бо қолаби vanilla сохта будед. Барои React як параметр — қолаб — иваз мешавад. Ҳама чизи дигар ба Шумо шинос аст: npm, package.json, сервери dev.

Дастури қадам ба қадам

1. Терминалро дар папкаи лоиҳаҳо кушоед (бе кирилликаю фосила дар роҳ; на дар OneDrive/iCloud). Node.js аллакай аз дарси 17 насб шудааст — санҷед: node -v.
2. Лоиҳаро созед. Қисми -- --template react ба Vite мегӯяд: «қолаби React-ро гир». ---и дукарата опсияро минбаъд ба create-vite мегузаронад (мо инро дар дарси 17 дида будем).
3. Ба папка гузаред ва вобастагиҳоро насб кунед — npm install React ва Vite-ро ба node_modules мекашад.
4. Серверро барои таҳия оғоз кунед ва суроғаи терминалро кушоед.

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Агар npm create vite@latest-ро бе опсияҳо оғоз кунед, ёвар саволҳо медиҳад: номи лоиҳа, фреймворк (React-ро интихоб кунед), вариант (JavaScript). Вобаста аз версия он метавонад боз пешниҳод кунад, ки фавран вобастагиҳоро насб кунад ва серверро оғоз намояд — метавон розӣ шуд, ва метавон «не» гуфт ва фармонҳоро мисли боло бо даст иҷро кард. Пас аз npm run dev Шумо мебинед:

> my-react-app@0.0.0 dev
> vite

  VITE v8.3.4  ready in 210 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

http://localhost:5173/-ро кушоед: Шумо саҳифаи оғозии React-ро бо ҳисобкунак мебинед. Дар src/App.jsx чизеро иваз кунед ва нигоҳ доред — саҳифа худаш нав мешавад, бе аз нав боркунӣ (HMR аз дарси 17).

Vite чӣ сохт

Маҷмӯи дақиқи файлҳо аз версияи қолаб вобаста аст (масалан, он ҷо танзимоти линтер буда метавонад), аммо се файл ҳамеша якхелаанд: index.html, src/main.jsx ва src/App.jsx. Онҳоро аз рӯи занҷира дида мебароем.

Занҷираи оғоз: index.html → main.jsx → App.jsx

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

Саҳифа холӣ аст: танҳо контейнери #root ва модули пайвастшудаи main.jsx. Ҳама чизи дигарро React мекашад.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

1. import … from 'react-dom/client' — қисми React-ро пайваст мекунем, ки бо DOM-и браузер кор карда метавонад. Ном бе ./ — ин бастаест аз node_modules (дарси 17).
2. import App from './App.jsx' — компоненти асосиро аз файли ҳамсоя мегирем. Он тавассути export default содир шудааст, бинобар ин дар воридот қавсҳои фигурӣ нестанд.
3. document.getElementById('root') — шиноси кӯҳна: контейнерро аз index.html меёбем. Ин охирин маротибаест, ки Шумо унсурро дар DOM бо даст меҷӯед.
4. createRoot(…).render(…) — «компоненти <App />-ро дар дохили ин контейнер бикаш». Минбаъд React аз паси тамоми DOM мебарояд.
5. StrictMode — реҷаи ишораҳо барои таҳия: он қасдан компонентҳоро ду маротиба даъват мекунад, то хатоҳоро зудтар ошкор кунад. Дар сайти ҷамъшуда (npm run build) ин нест.

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>Get started</h1>
      <button onClick={() => setCount((count) => count + 1)}>
        Count is {count}
      </button>
    </>
  )
}

export default App

Дар қолаб аллакай ҳисобкунак бо useState ҳаст — ин мавзӯи дарси 23 аст, имрӯз он ба мо лозим нест. Аввалин коре, ки бо лоиҳаи нав мекунанд, — қолабро тоза кардан аст.

Қолабро тоза мекунем

1. Тасвирҳоро аз src/assets/ нест кунед (ва воридотҳои онҳоро дар App.jsx).
2. src/App.css-ро тоза кунед (холӣ гузоред) — услубҳои худро баъдтар менависем.
3. Мундариҷаи src/App.jsx-ро ба компоненти ҳадди ақал иваз кунед:

function App() {
  return (
    <div>
      <h1>Привет, MakeFirstStep!</h1>
    </div>
  )
}

export default App

Нигоҳ доред: дар браузер сарлавҳаи Шумо пайдо мешавад. Мо function App() ва бо сатри алоҳида export default App менависем — қолаби Vite маҳз ҳамин тавр мекунад, ва қуттии регӣ дар саҳифа варианти кӯтоҳи export default function App()-ро иҷозат медиҳад. Ҳарду вариант як чизро мекунанд.

const raw = `{
  "name": "my-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" },
  "dependencies": { "react": "^19.2.8", "react-dom": "^19.2.8" },
  "devDependencies": { "@vitejs/plugin-react": "^6.1.1", "vite": "^8.3.0" }
}`;

const pkg = JSON.parse(raw);

// TODO: номи лоиҳа
// TODO: фармони dev
// TODO: номҳои вобастагиҳо бо вергул

my-react-app
vite
react, react-dom

const order = ["npm create", "cd", "npm install", "npm run dev"];

const typed = [
  "npm run dev",
  "cd my-react-app",
  "npm create vite@latest my-react-app -- --template react",
  "npm install",
];

// TODO: typed-ро аз рӯи тартиби order ҷудо кунед ва чоп кунед

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Муфассал хонед: vite.dev — Scaffolding Your First Vite Project · react.dev — Build a React app from Scratch

04 JSX: ба HTML монанд, аммо HTML нест

JSX — ин роҳи навиштани аломатгузорӣ бевосита дар дохили JavaScript аст. Браузер JSX-ро намефаҳмад: Vite (ва дар қуттии регии мо — компилятори дарунсохт) ҳар тегро ба даъвати функсия табдил медиҳад. Барои Шумо ин маънои яктоиро дорад: JSX — ин JavaScript аст, пас қоидаҳояш аз HTML сахттаранд.

// Шумо менависед:
const title = <h1 className="big">Салом</h1>;

// ҷамъкунанда ба JS-и оддӣ табдил медиҳад:
const title = jsx("h1", { className: "big", children: "Салом" });

Шаш фарқи JSX аз HTML

1–3. className, htmlFor ва тегҳои пӯшида

export default function App() {
  return (
    <form className="signup">
      <label htmlFor="name">Ваше имя</label>
      <input id="name" type="text" placeholder="Мадина" />
      <br />
      <button type="button">Записаться</button>
    </form>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.signup { display: flex; flex-direction: column; gap: 8px; max-width: 260px; }
input { padding: 8px; font-size: 16px; }

Дар консол намоён аст, ки дар аломатгузории ниҳоӣ ҳама чиз HTML-и оддӣ шуд: class, for. className-ро ба class иваз кунед ва оғоз намоед: дар React 19 саҳифа ҳанӯз кор мекунад, аммо ин хатои услуб ҳисоб мешавад — дар JSX-и дуруст className менависем.

<div>
  <input type="text">     {/* ✖ таг пӯшида нашудааст */}
  <br>                    {/* ✖ ва ин ҳам */}
</div>

<div>
  <input type="text" />   {/* ✓ */}
  <br />                  {/* ✓ */}
</div>

4. Як унсури реша

Компонент — ин функсия аст, ва функсия як қимат бармегардонад. Бинобар ин ду тегро паҳлӯ ба паҳлӯ баргардондан мумкин нест: онҳоро печондан лозим аст. Агар <div>-и зиёдатӣ лозим набошад, фрагмент — тегҳои холии <>…</>-ро истифода мебаранд. Он кӯдаконро гурӯҳбандӣ мекунад, аммо дар HTML-и ниҳоӣ чизе илова намекунад.

// ✖ хато: "Adjacent JSX elements must be wrapped in an enclosing tag"
return (
  <h2>Расписание</h2>
  <p>Пн, Ср, Пт — 18:00</p>
);

// ✓ бо печонанда
return (
  <div>
    <h2>Расписание</h2>
    <p>Пн, Ср, Пт — 18:00</p>
  </div>
);

// ✓ бо фрагмент: div-и зиёдатӣ дар HTML нахоҳад буд
return (
  <>
    <h2>Расписание</h2>
    <p>Пн, Ср, Пт — 18:00</p>
  </>
);

Қавсҳои мудаввар пас аз return на барои React, балки барои JavaScript лозиманд: агар пас аз return бе қавсҳо ба сатри нав гузаред, JS мепиндорад, ки баргардондан чизе нест (return;), ва undefined-ро бармегардонад. Қавсҳо — суғурта барои аломатгузории бисёрсатра.

5. Қавсҳои фигурӣ: JavaScript дар дохили аломатгузорӣ

Ҳар чизе, ки дар дохили { } аст, — ифодаи JS-и оддӣ мебошад: тағйирёбанда, арифметика, даъвати функсия, оператори сегона ? :. Натиҷа ба аломатгузорӣ гузошта мешавад. Қавсҳоро ҳам дар матн ва ҳам дар қимати атрибут гузоштан мумкин аст.

export default function App() {
  const student = "Мадина";
  const lessons = 24;
  const hour = 19;

  return (
    <div className="box" title={"Студент " + student}>
      <h2>Салом, {student}!</h2>
      <p>Осталось уроков: {lessons - 22}</p>
      <p>Имя в верхнем регистре: {student.toUpperCase()}</p>
      <p>{hour < 20 ? "Занятия ещё идут" : "Занятия закончились"}</p>
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.box { border: 2px dashed #1f6feb; border-radius: 12px; padding: 4px 16px; }

Дар {…} мумкин аст

Тағйирёбандаҳо, рақамҳо, сатрҳо, арифметика, даъватҳои функсияҳо, ? :, &&, ||, методҳои сатрҳо ва массивҳо.

Дар {…} мумкин нест

Дастурҳо: if, for, const x = …. Ин ифодаҳо нестанд. Шартро дар дохили аломатгузорӣ тавассути ? : ё && менависем; ва if ва тағйирёбандаҳо — боло, пеш аз return.

Шарҳ дар JSX

{/* ин тавр */} — ин ифодаи холӣ бо шарҳ дар дохил аст. // …-и оддӣ дар дохили аломатгузорӣ ба матн дар саҳифа табдил меёбад.

React чиро мекашад ва чиро не

Қиматҳои true, false, null ва undefined-ро React умуман нишон намедиҳад — намоиши шартӣ ба ҳамин асос ёфтааст. Аммо рақами 0 нишон дода мешавад, ва дар ин бора аксар фаромӯш мекунанд.

export default function App() {
  const isOpen = true;
  const messages = 0;

  return (
    <div>
      <p>true: [{true}]</p>
      <p>null: [{null}]</p>
      <p>0: [{0}]</p>
      <p>{isOpen && "Мы открыты"}</p>
      <p>Новых сообщений: {messages && <b>есть</b>}</p>
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

Дар сатри охирин Шумо холигиро интизор будед, ва 0 гирифтед: ифодаи 0 && … ба 0 баробар аст, ва сифрро React мекашад. Варианти бехатар — шартро булии ҳақиқӣ кардан: messages > 0 && … ё оператори сегона.

6. style — ин объект аст

Дар HTML услуб — сатр аст. Дар JSX style объект мегирад, яъне қавсҳои фигурӣ дукарата мешаванд: берунӣ — «инҷо JS», дарунӣ — худи объект. Хосиятҳо дар camelCase навишта мешаванд (backgroundColor), рақамҳо бе воҳид ҳамчун пиксел ҳисоб мешаванд.

export default function App() {
  const badge = {
    backgroundColor: "gold",
    padding: 8,
    borderRadius: 8,
    fontWeight: "bold",
  };

  return (
    <div>
      <p style={badge}>Новинка</p>
      <p style={{ color: "crimson", fontSize: 20 }}>Скидка 10%</p>
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

Барои тарроҳии асосӣ ба ҳар ҳол классҳои CSS-ро истифода баред (className + style.css): style вақте муфид мешавад, ки қимат аз маълумот ҳисоб карда мешавад (бари пешрафт, ранг аз рӯи шарт).

<label for="name">Ваше имя</label>
<input id="name" type="text" placeholder="Мадина">
<br>
<p class="hint">Мы перезвоним</p>

export default function App() {
  return (
    <div className="form">
      {/* TODO: аломатгузориро инҷо ба намуди JSX гузоред */}
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<div class="form">
<label for="name">Ваше имя</label>
<input id="name" placeholder="Мадина" type="text">
<br>
<p class="hint">Мы перезвоним</p>
</div>

export default function App() {
  const student = "Мадина";
  const price = 480;
  const lessons = 24;

  return (
    <div>
      <h2>Добро пожаловать, ???!</h2>
      <p>Курс стоит ??? сомони, это ??? сомони за урок.</p>
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<div>
<h2>Добро пожаловать, Мадина!</h2>
<p>Курс стоит 480 сомони, это 20 сомони за урок.</p>
</div>

export default function App() {
  return (
    <div style="background-color: gold; padding: 12px; border-radius: 8px;">
      Акция недели
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML), 100);

<div style="background-color: gold; padding: 12px; border-radius: 8px;">Акция недели</div>

export default function App() {
  return (
    <h2>Расписание</h2>
    <p>Пн, Ср, Пт — 18:00</p>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<h2>Расписание</h2>
<p>Пн, Ср, Пт — 18:00</p>

const prediction = "";   // масалан: "[1] [] [x] …" — дар ҳар ҷуфти қавс як қимат

export default function App() {
  return (
    <p>
      [{5 + 3}] [{false}] [{null}] [{0}] [{"a" + "b"}] [{true ? "да" : "нет"}] [{undefined}] [{10 > 5}]
    </p>
  );
}

// санҷиши худкор: пешгӯии Шуморо бо он чӣ React сохтааст, муқоиса мекунад
setTimeout(() => console.log(document.getElementById("root").textContent.trim() === prediction.trim() ? "Верно!" : "Не угадали, подумайте ещё"), 100);

Верно!

const cart = [];

export default function App() {
  return (
    <div>
      <h3>Корзина</h3>
      {cart.length && <p>Товаров: {cart.length}</p>}
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<div>
<h3>Корзина</h3>
<p>Корзина пуста</p>
</div>

Муфассал хонед: react.dev — Writing Markup with JSX · react.dev — JavaScript in JSX with Curly Braces · react.dev — Conditional Rendering

05 App.jsx: содир ва ворид кардани компонентҳо

То ҳол компонентҳо дар як файл меистоданд. Дар лоиҳаи воқеӣ ин тавр намекунанд: як компонент — як файл. Ин ҳамон модулҳои дарси 17 аст: як файл функсияро содир мекунад, файли дигар онро ворид мекунад. Барои компонентҳо export default маъмул аст.

Сохтори лоиҳа бо компонентҳо

• Номи файл = номи компонент, бо ҳарфи калон: Header.jsx, CourseCard.jsx.
• Пасванди .jsx — нишонаи он аст, ки дар дохил JSX ҳаст. Vite онро барои файлҳои дорои аломатгузорӣ талаб мекунад.
• Папкаи components — танҳо мувофиқа аст, то ҳама чизро дар src/ нарезем.

Ин дар файлҳо чӣ тавр менамояд

export default function Header() {
  return (
    <header className="top">
      <h1>MakeFirstStep</h1>
    </header>
  )
}

export default function Footer() {
  return <footer>© MakeFirstStep, Душанбе</footer>
}

import Header from './components/Header.jsx'
import Footer from './components/Footer.jsx'

export default function App() {
  return (
    <div className="page">
      <Header />
      <main>Здесь будут курсы</main>
      <Footer />
    </div>
  )
}

Сатри import Header from './components/Header.jsx' чунин хонда мешавад: «он чизеро, ки Header.jsx бо пешфарз содир мекунад, гир ва Header ном бигузор». Роҳ бо ./ оғоз мешавад (дар паҳлуи ин файл), пасванди .jsx-ро пурра менависем — чунон ки дар дарси 17 мувофиқа кардем. Агар export default намебуд — ворид кардан чизе намебуд.

Содири номдор низ кор мекунад

// 1) бо пешфарз — як компонент дар як файл (интихоби мо)
export default function Header() { … }
import Header from './components/Header.jsx'

// 2) номдор — якчанд донаро аз як файл содир кардан мумкин аст
export function Header() { … }
import { Header } from './components/Header.jsx'

Асосӣ — он аст, ки содир ва ворид аз рӯи сабк мувофиқ бошанд: дар export default воридот бе қавс аст, дар номдор — бо қавс. Дар ин курс компонентҳоро бо пешфарз содир мекунем.

Як компонент — бисёр маротиба

Фоидаи асосии компонентҳо — истифодаи такрорӣ аст: як маротиба эълон кардед, ба қадри лозим ҷойгир кардед. Компонентро тағйир додед — ҳамаи нусхаҳо тағйир ёфтанд.

function CourseCard() {
  return (
    <article className="card">
      <h3>JavaScript</h3>
      <p>24 урока</p>
    </article>
  );
}

export default function App() {
  return (
    <main className="grid">
      <CourseCard />
      <CourseCard />
      <CourseCard />
    </main>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.grid { display: flex; gap: 10px; flex-wrap: wrap; }
.card { border: 2px solid #1f6feb; border-radius: 12px; padding: 4px 16px; background: #eef4ff; }
.card h3 { margin: 8px 0; }

Матни дохили CourseCard-ро тағйир диҳед — ҳар се корт тағйир меёбад. Фавран савол пайдо мешавад: агар номҳои гуногун лозим бошанд — «HTML», «JavaScript», «React»? Барои ин компонентҳо props доранд, мо онҳоро дар дарси оянда таҳлил мекунем.

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Нажато раз: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

Бо дарси 11 муқоиса кунед: он ҷо state, render(), querySelector ва addEventListener буданд. Инҷо — як компонент, ва ягон сатр дар бораи ҷустуҷӯи унсурҳо нест. Маълумот дар count меистад, экран дар return тавсиф шудааст, ва пайвасти «маълумотро тағйир додем → аз нав кашидем»-ро React худаш таъмин мекунад.

const components = ["Header", "CourseCard", "Footer"];

function importLine(name) {
  // TODO: сатри намуди import Ном from "./components/Ном.jsx"; баргардонед
  return "";
}

for (const name of components) {
  console.log(importLine(name));
}

import Header from "./components/Header.jsx";
import CourseCard from "./components/CourseCard.jsx";
import Footer from "./components/Footer.jsx";

function CourseCard() {
  console.log("CourseCard готов");
  return (
    <article className="card">
      <h3>JavaScript</h3>
      <p>24 урока</p>
    </article>
  );
}

export default function App() {
  return (
    <main>
      <article className="card">
        <h3>JavaScript</h3>
        <p>24 урока</p>
      </article>
      <article className="card">
        <h3>JavaScript</h3>
        <p>24 урока</p>
      </article>
      <article className="card">
        <h3>JavaScript</h3>
        <p>24 урока</p>
      </article>
    </main>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

CourseCard готов
CourseCard готов
CourseCard готов
<main>
<article class="card">
<h3>JavaScript</h3>
<p>24 урока</p>
</article>
<article class="card">
<h3>JavaScript</h3>
<p>24 урока</p>
</article>
<article class="card">
<h3>JavaScript</h3>
<p>24 урока</p>
</article>
</main>

// TODO: Logo, Navbar, Hero ва Footer-ро эълон кунед

export default function App() {
  return (
    <div>
      <p>Соберите страницу из компонентов</p>
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<nav>
<span class="logo">MakeFirstStep</span>
<a href="#courses">Курсы</a>
</nav>
<section class="hero">
<h1>Frontend + ИИ</h1>
</section>
<footer>© 2026 MakeFirstStep</footer>

Муфассал хонед: react.dev — Importing and Exporting Components · learn.javascript.ru — Содир ва ворид кардан

06 Блоки ЗС: JS-и шиносро ба React аз нав менависем

Беҳтарин роҳи фаҳмидани равиши нав — гирифтани коде аст, ки Шумо онро аллакай мефаҳмед, ва муқоиса кардани он бо версияи React. ЗС инҷо тарҷумон аст, ва Шумо — санҷанда. Шумо аслро медонед, пас фавран мебинед, ки тарҷума дар куҷо носаҳеҳ аст.

Блоки аслӣ бо JS-и тоза

Ин блоке монанд ба онҳое аст, ки Шумо дар дарсҳои 8 ва 11 навиштед: корти донишҷӯ бо даст сохта мешавад.

const app = document.querySelector("#app");
const student = { name: "Мадина", group: "JS-12", score: 87 };

const box = document.createElement("div");
box.className = "profile";

const h = document.createElement("h2");
h.textContent = student.name;

const p = document.createElement("p");
p.textContent = `Группа ${student.group}, баллы: ${student.score}`;

box.append(h, p);
app.append(box);

Промпти бад ва хуб

Чаро бад аст: ЗС намедонад, ки Шумо дар куҷо меомӯзед, кадом абзорҳо доред, ва «ҳама чизро якбора» медиҳад — бо ҳолат, эффектҳо ва китобхонаҳои тарафи сеюм, ки мо ҳанӯз нагузаштаем. Ва Шумо шарҳҳо намегиред.

Ин варианти густурдаи қолаби шпаргалкаи курс аст: «Инак коди JS-и тоза: [код]. Ҳамчун компоненти React аз нав навис ва сатр ба сатр шарҳ деҳ, ки чӣ ба ҷои querySelector ва addEventListener омад». Мо контекст, маҳдудиятҳо ва формат илова кардем — ва ҳодисаҳоро, ки дар дарси 23 пайдо мешаванд, хориҷ кардем.

ЗС бояд чӣ баргардонад

export default function App() {
  const student = { name: "Мадина", group: "JS-12", score: 87 };

  return (
    <div className="profile">
      <h2>{student.name}</h2>
      <p>Группа {student.group}, баллы: {student.score}</p>
    </div>
  );
}

Таҳлили сатр ба сатр: чӣ ба ҷои чӣ омад

Чек-лист: ҷавоби ЗС-ро чӣ тавр санҷидан лозим

• Номҳои компонентҳо бо ҳарфи калон ҳам дар эълон ва ҳам дар истифода.
• className, htmlFor, тегҳои пӯшида, як реша — ҷадвал аз бахши 04.
• style — объект аст, на сатр.
• Зиёдатӣ. Агар ЗС useState, useEffect, axios ё styled-components-ро илова карда бошад, гарчанде ки бе онҳо хоста будед, — бипурсед «ин ҷо барои чӣ?» ва хоҳиш кунед хориҷ кунад.
• Оғоз. Ба қуттии регӣ ё лоиҳа гузоред ва консолро кушоед: хато нест, натиҷа бо аслӣ мувофиқ аст.

function profile() {
  const student = { name: "Мадина", group: "JS-12", score: 87 };
  return (
    <div class="profile" style="border: 1px solid gray">
      <h2>{student.name}</h2>
      <p>Группа {student.group}, баллы: {student.score}</p>
    </div>
  );
}

export default function App() {
  return (
    <profile />
    <p>Данные студента</p>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<div class="profile" style="border: 1px solid gray;">
<h2>Мадина</h2>
<p>Группа JS-12, баллы: 87</p>
</div>
<p>Данные студента</p>

Муфассал хонед: react.dev — Writing Markup with JSX

07 Амалиёт дар дарс: саҳифаро ба компонентҳо тақсим мекунем

Саҳифаи тайёри «MakeFirstStep»-ро, ки пурра дар як компоненти App навишта шудааст, мегирем ва онро ба компонентҳо мебурем. Се марҳала аст, ҳар кадом бо санҷиш дар консол анҷом меёбад. Дар охир Шумо ҳамин корро дар лоиҳаи воқеии Vite такрор мекунед — аллакай аз рӯи файлҳои алоҳида.

Марҳалаи 1. Header-ро ҷудо мекунем

Порчаи <header>…</header>-ро ба функсияи алоҳидаи Header интиқол диҳед ва ба ҷои он <Header /> гузоред.

// TODO: компоненти Header-ро эълон кунед

export default function App() {
  console.log("render App");
  return (
    <div className="page">
      <header className="top">
        <h1>MakeFirstStep</h1>
        <nav>
          <a href="#courses">Курсы</a>
          <a href="#contacts">Контакты</a>
        </nav>
      </header>
      <main id="courses">
        <h2>Наши курсы</h2>
        <ul>
          <li>HTML и CSS</li>
          <li>JavaScript</li>
          <li>React</li>
        </ul>
      </main>
      <footer id="contacts">Душанбе · MakeFirstStep</footer>
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.page { border: 2px solid #1f6feb; border-radius: 12px; overflow: hidden; }
.top { background: #1f6feb; color: #fff; padding: 4px 16px; display: flex; justify-content: space-between; align-items: center; }
.top a { color: #fff; margin-left: 12px; }
main { padding: 4px 16px; }
footer { background: #f3f4f6; padding: 8px 16px; color: #6b7280; }

render App
render Header
<div class="page">
<header class="top">
<h1>MakeFirstStep</h1>
<nav>
<a href="#courses">Курсы</a>
<a href="#contacts">Контакты</a>
</nav>
</header>
<main id="courses">
<h2>Наши курсы</h2>
<ul>
<li>HTML и CSS</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</main>
<footer id="contacts">Душанбе · MakeFirstStep</footer>
</div>

Марҳалаи 2. Courses-ро ҷудо мекунем

Акнун ҳамин корро бо блоки курсҳо. Он Courses номида мешавад.

function Header() {
  console.log("render Header");
  return (
    <header className="top">
      <h1>MakeFirstStep</h1>
      <nav>
        <a href="#courses">Курсы</a>
        <a href="#contacts">Контакты</a>
      </nav>
    </header>
  );
}

// TODO: компоненти Courses-ро эълон кунед

export default function App() {
  console.log("render App");
  return (
    <div className="page">
      <Header />
      <main id="courses">
        <h2>Наши курсы</h2>
        <ul>
          <li>HTML и CSS</li>
          <li>JavaScript</li>
          <li>React</li>
        </ul>
      </main>
      <footer id="contacts">Душанбе · MakeFirstStep</footer>
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.page { border: 2px solid #1f6feb; border-radius: 12px; overflow: hidden; }
.top { background: #1f6feb; color: #fff; padding: 4px 16px; display: flex; justify-content: space-between; align-items: center; }
.top a { color: #fff; margin-left: 12px; }
main { padding: 4px 16px; }
footer { background: #f3f4f6; padding: 8px 16px; color: #6b7280; }

render App
render Header
render Courses
<div class="page">
<header class="top">
<h1>MakeFirstStep</h1>
<nav>
<a href="#courses">Курсы</a>
<a href="#contacts">Контакты</a>
</nav>
</header>
<main id="courses">
<h2>Наши курсы</h2>
<ul>
<li>HTML и CSS</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</main>
<footer id="contacts">Душанбе · MakeFirstStep</footer>
</div>

Марҳалаи 3. Footer ва Nav-и дарунгузошта

Компонент метавонад компоненти дигарро дар бар гирад. Дар сарлавҳа менюро ба Nav-и алоҳида ҷудо мекунем — дарахти бахши 02 ҳосил мешавад.

// TODO: Nav ва Footer-ро эълон кунед

function Header() {
  console.log("render Header");
  return (
    <header className="top">
      <h1>MakeFirstStep</h1>
      <nav>
        <a href="#courses">Курсы</a>
        <a href="#contacts">Контакты</a>
      </nav>
    </header>
  );
}

function Courses() {
  console.log("render Courses");
  return (
    <main id="courses">
      <h2>Наши курсы</h2>
      <ul>
        <li>HTML и CSS</li>
        <li>JavaScript</li>
        <li>React</li>
      </ul>
    </main>
  );
}

export default function App() {
  console.log("render App");
  return (
    <div className="page">
      <Header />
      <Courses />
      <footer id="contacts">Душанбе · MakeFirstStep</footer>
    </div>
  );
}

// санҷиши худкор: аломатгузориро, ки React сохтааст, чоп мекунад
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.page { border: 2px solid #1f6feb; border-radius: 12px; overflow: hidden; }
.top { background: #1f6feb; color: #fff; padding: 4px 16px; display: flex; justify-content: space-between; align-items: center; }
.top a { color: #fff; margin-left: 12px; }
main { padding: 4px 16px; }
footer { background: #f3f4f6; padding: 8px 16px; color: #6b7280; }

render App
render Header
render Nav
render Courses
render Footer
<div class="page">
<header class="top">
<h1>MakeFirstStep</h1>
<nav>
<a href="#courses">Курсы</a>
<a href="#contacts">Контакты</a>
</nav>
</header>
<main id="courses">
<h2>Наши курсы</h2>
<ul>
<li>HTML и CSS</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</main>
<footer id="contacts">Душанбе · MakeFirstStep</footer>
</div>

Дар лоиҳаи Vite такрор мекунем

Акнун ҳамин корро «ба таври калонсолон» — ҳар компонент дар файли худ. Лоиҳаи my-react-app-ро аз бахши 03 кушоед (ё нав эҷод кунед), қолабро тоза кунед ва чунин кунед:

1. Папкаи src/components/-ро ва чор файлро дар он эҷод кунед: Header.jsx, Nav.jsx, Courses.jsx, Footer.jsx.
2. Ба ҳар кадом компоненти худро аз қуттии регӣ интиқол диҳед ва export default-ро илова кунед.
3. Дар ҷое, ки компонент компоненти дигарро истифода мебарад, import илова кунед (Header Nav-ро ворид мекунад).
4. Дар App.jsx Header, Courses, Footer-ро ворид кунед ва саҳифаро ҷамъ намоед.
5. Услубҳоро аз ҷадвали style.css ба src/App.css интиқол диҳед ва боварӣ ҳосил кунед, ки App.jsx онро ворид мекунад: import './App.css'.
6. npm run dev-ро оғоз кунед, консоли браузерро кушоед ва санҷед: сатрҳои render … чоп мешаванд, ва (аз сабаби StrictMode) ҳар кадом — дукарата.

import Nav from './Nav.jsx'

export default function Header() {
  return (
    <header className="top">
      <h1>MakeFirstStep</h1>
      <Nav />
    </header>
  )
}

import './App.css'
import Header from './components/Header.jsx'
import Courses from './components/Courses.jsx'
import Footer from './components/Footer.jsx'

export default function App() {
  return (
    <div className="page">
      <Header />
      <Courses />
      <Footer />
    </div>
  )
}

08 Вазифаи хонагӣ: саҳифа аз 5 компонент

Саҳифаи худро дар React ҷамъ кунед: визиткаи шахсӣ, саҳифаи қаҳвахона, афишаи чорабинӣ — ба хоҳиши Шумо. Ин лоиҳаи аввал дар React + Vite аст. Модули «React Lite» — бонус аст, баҳо ба журнал гузошта намешавад, аммо таҳлилро аз рӯи меъёрҳои поён Шумо аз омӯзгор мегиред.

Чӣ кор кардан лозим аст

• ☐ Лоиҳаро бо фармони npm create vite@latest бо қолаби React (JavaScript) эҷод кунед, қолабро тоза намоед: ҳисобкунак, тасвирҳо ва услубҳои зиёдатиро хориҷ кунед.
• ☐ Саҳифа ҳадди ақал аз 5 компонент иборат аст, ҳар кадом дар файли худ дар src/components/, бо export default.
• ☐ Ҳадди ақал як компонент дар дигаре ҷойгир аст (масалан, Logo дар дохили Header), ва ҳадди ақал як компонент дар саҳифа ду маротиба ва бештар истифода мешавад.
• ☐ App.jsx танҳо саҳифаро аз компонентҳо ҷамъ мекунад: «аломатгузории калони худӣ» надорад.
• ☐ Дар JSX className, htmlFor (агар шакл бошад), тегҳои пӯшида, ифодаҳо дар {…} (масалан, сол дар поёнӣ) ва ҳадди ақал як style={{…}} ё намоиши шартӣ истифода шудаанд.
• ☐ Услубҳои худӣ дар App.css ё файлҳои алоҳидаи .css; саҳифа дар телефон ҳам озода менамояд (паҳно 390 px).
• ☐ npm run build бе хато мегузарад. Дар репозиторий node_modules ва dist нестанд, package-lock.json ҳаст.
• ☐ На камтар аз 3 коммити пурмазмун; репозиторий дар GitHub.
• ☐ README.md: ин кадом саҳифа аст, чӣ тавр оғоз кардан, дарахти компонентҳои Шумо ва 2–3 ҷумла бо суханони худӣ: равиши компонентӣ аз DOM-и дастӣ чӣ тавр қулайтар аст.

Чӣ супоридан лозим

• Истиноди репозиторийи GitHub-ро ба чати гурӯҳ.
• Скриншоти саҳифа ва скриншоти ҷадвали Components (React Developer Tools) бо дарахти компонентҳо.
• Дар паём: чанд компонент баромад ва кадомашро такроран истифода мебаред.

Таҳлил аз рӯи меъёрҳо (барои худсанҷӣ)

Холҳо барои худсанҷӣ лозиманд: модули бонусӣ ба баҳои ниҳоии курс таъсир намерасонад.