React

React.js bilan Zamonaviy Web Ilovalar

📅 30 Yanvar, 2026 | ⏱️ 8 daqiqa o'qish | ✍️ Muallif: Otabek Shodiyorov

React - Facebook (Meta) tomonidan yaratilgan eng mashhur JavaScript kutubxonalaridan biri. Agar siz zamonaviy, tez va interaktiv web ilovalar yaratmoqchi bo'lsangiz, React - eng yaxshi tanlovdir. Keling, React dunyosini birga o'rganaylik!

React nima?

React - bu foydalanuvchi interfeysi (UI) yaratish uchun mo'ljallangan JavaScript kutubxonasi. U komponentlarga asoslangan arxitektura bilan ishlaydi va virtual DOM texnologiyasidan foydalanadi.

React ning asosiy afzalliklari:

  • Komponentlar: Qayta foydalanish mumkin bo'lgan kod bloklari
  • Virtual DOM: Tez va samarali render qilish
  • Bir yo'nalishli ma'lumot oqimi: Ma'lumotlarni boshqarish oson
  • Katta ekotizim: Minglab tayyor kutubxonalar va vositalar
  • React Native: Mobil ilovalar yaratish imkoniyati
  • Keng jamoa: Meta va millionlab dasturchilarning qo'llab-quvvatlashi

React ni boshlash

1. Node.js ni o'rnatish

React bilan ishlash uchun avval Node.js kerak bo'ladi. Uni nodejs.org saytidan yuklab oling.

2. Create React App

Eng oson yo'l - Create React App vositasidan foydalanish:

npx create-react-app mening-ilovam
cd mening-ilovam
npm start

Bu buyruqlar yangi React loyihasini yaratib, uni ishga tushiradi. Brauzeringizda localhost:3000 ochiladi.

💡 Maslahat: Vite yoki Next.js kabi zamonaviy vositalardan ham foydalanishingiz mumkin - ular tezroq va ko'proq imkoniyatlarga ega.

Birinchi Komponentingiz

React da hamma narsa komponentlardan iborat. Keling, oddiy komponent yarataylik:

import React from 'react';

function Salom() {
return (
<div>
<h1>Salom, React!</h1>
<p>Bu mening birinchi komponentim</p>
</div>
);
}

export default Salom;

Bu yerda biz Salom nomli funksiya komponenti yaratdik. U JSX qaytaradi - bu JavaScript va HTML ning kombinatsiyasi.

JSX - JavaScript XML

JSX React ning maxsus sintaksisi bo'lib, u HTML ni JavaScript ichida yozish imkonini beradi:

const ism = "Aziz";
const element = <h1>Salom, {ism}!</h1>;

JSX ichida JavaScript ifodalarini jingalak qavslar {} ichida yozish mumkin.

Props - Ma'lumot o'tkazish

Props yordamida komponentlarga ma'lumot o'tkazish mumkin:

function Foydalanuvchi({ ism, yosh }) {
return (
<div className="foydalanuvchi">
<h2>{ism}</h2>
<p>Yosh: {yosh}</p>
</div>
);
}

function App() {
return (
<div>
<Foydalanuvchi ism="Ali" yosh={25} />
<Foydalanuvchi ism="Vali" yosh={30} />
</div>
);
}

State - Holat boshqaruvi

State komponentning o'zgaruvchan ma'lumotidir. Uni useState hook yordamida boshqaramiz:

import { useState } from 'react';

function Hisoblagich() {
const [son, setSon] = useState(0);

return (
<div>
<h2>Hisob: {son}</h2>
<button onClick={() => setSon(son + 1)}>
Oshir
</button>
<button onClick={() => setSon(son - 1)}>
Kamaytir
</button>
</div>
);
}

Bu misolda biz hisoblagich yaratdik. Tugmachalarni bosganda son o'zgaradi va komponent qayta render qilinadi.

Event Handling - Hodisalar bilan ishlash

React da hodisalarni boshqarish juda oddiy:

function Forma() {
const [matn, setMatn] = useState('');

const yuborish = (e) => {
e.preventDefault();
alert('Siz yozdingiz: ' + matn);
};

return (
<form onSubmit={yuborish}>
<input
type="text"
value={matn}
onChange={(e) => setMatn(e.target.value)}
/>
<button type="submit">Yuborish</button>
</form>
);
}

useEffect Hook

useEffect - komponent render bo'lganda yoki o'zgarganida kod bajarish uchun:

import { useState, useEffect } from 'react';

function Soat() {
const [vaqt, setVaqt] = useState(new Date());

useEffect(() => {
const timer = setInterval(() => {
setVaqt(new Date());
}, 1000);

return () => clearInterval(timer);
}, []);

return <h1>{vaqt.toLocaleTimeString()}</h1>;
}

Bu komponent har sekundda yangilanadi va joriy vaqtni ko'rsatadi.

Shartli Render

React da shartli ravishda komponentlarni ko'rsatish mumkin:

function Xush kelibsiz({ kirganmi }) {
if (kirganmi) {
return <h1>Xush kelibsiz qaytib!</h1>;
}
return <h1>Iltimos, tizimga kiring</h1>;
}

// Yoki qisqaroq:
function Xabar({ ko'rsatish }) {
return ko'rsatish && <p>Bu xabar</p>;
}

Ro'yxatlar bilan ishlash

Ro'yxatlarni render qilish uchun map() dan foydalanamiz:

function TalabaRoyxati() {
const talabalar = [
{ id: 1, ism: 'Ali', ball: 85 },
{ id: 2, ism: 'Vali', ball: 92 },
{ id: 3, ism: 'Sobir', ball: 78 }
];

return (
<ul>
{talabalar.map(talaba => (
<li key={talaba.id}>
{talaba.ism} - {talaba.ball} ball
</li>
))}
</ul>
);
}
⚠️ Muhim: Ro'yxat elementlarida har doim unique key prop bo'lishi kerak. Bu React ga elementlarni to'g'ri kuzatishga yordam beradi.

Styling - Dizayn

React da uslublarni qo'llashning bir necha yo'li bor:

1. CSS fayllar:

import './App.css';

function App() {
return <div className="container">...</div>;
}

2. Inline styles:

const uslub = {
color: 'blue',
fontSize: '20px',
padding: '10px'
};

<div style={uslub}>Matn</div>

3. CSS Modules:

import styles from './Button.module.css';

<button className={styles.primary}>Bosing</button>

Amaliy misol: Todo Ilova

Keling, oddiy Todo ilovasini yarataylik:

import { useState } from 'react';

function TodoIlova() {
const [vazifalar, setVazifalar] = useState([]);
const [matn, setMatn] = useState('');

const qoshish = () => {
if (matn.trim()) {
setVazifalar([...vazifalar, { id: Date.now(), matn }]);
setMatn('');
}
};

const ochirish = (id) => {
setVazifalar(vazifalar.filter(v => v.id !== id));
};

return (
<div>
<h1>Mening Vazifalarim</h1>
<input
value={matn}
onChange={(e) => setMatn(e.target.value)}
placeholder="Yangi vazifa..."
/>
<button onClick={qoshish}>Qo'shish</button>

<ul>
{vazifalar.map(vazifa => (
<li key={vazifa.id}>
{vazifa.matn}
<button onClick={() => ochirish(vazifa.id)}>
O'chirish
</button>
</li>
))}
</ul>
</div>
);
}

Keyingi qadamlar

React ni o'rganishda davom eting:

  • React Router: Ko'p sahifali ilovalar uchun
  • Context API: Global holat boshqaruvi
  • Custom Hooks: O'z hook'laringizni yaratish
  • React Query: Server ma'lumotlari bilan ishlash
  • Next.js: Server-side rendering va SEO
  • React Native: Mobil ilovalar yaratish
💡 Maslahat: React rasmiy dokumentatsiyasi (react.dev) - eng yaxshi o'rganish manbai. U juda yaxshi tuzilgan va amaliy misollar bilan to'la.

Xulosa

React - bu zamonaviy web dasturlashning asosi. U sizga tez, interaktiv va professional ilovalar yaratish imkonini beradi. Amaliyot qiling, loyihalar yarating va React jamiyati bilan muloqot qiling!

Omad tilaymiz React bilan ishlashda! ⚛️

Muallif: Otabek Shodiyorov
Sana: 30 Yanvar, 2026
Kategoriya: React, JavaScript, Frontend

Reactni Kuchaytirish: Amaliy Patternlar

1) Komponentni bo‘lish (Component split)

2) Custom Hook misoli

import { useEffect, useState } from 'react';

export function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
setLoading(true);
fetch(url)
.then(r => r.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, [url]);

return { data, loading, error };
}
















3) Mini-Loyiha: “Admin Dashboard”

  1. Login sahifa
  2. Dashboard (cards + chart)
  3. Users jadvali (search + filter)
  4. API dan data olish
  5. Protected routes

Deploy qilish

📲 Aloqa

Agar savolingiz bo‘lsa yoki hamkorlik qilishni xohlasangiz:

React: Amaliy “To‘liq” Bo‘lim

Quyida React’ni real loyiha darajasiga olib chiqadigan bo‘limlar: komponent arxitekturasi, state management, formalar, fetch, routing va mini-loyiha.

1) Komponentlarni ajratish (Folder struktura)

src/
├─ components/
│ ├─ Navbar.jsx
│ ├─ Card.jsx
├─ pages/
│ ├─ Home.jsx
│ ├─ Contact.jsx
├─ App.jsx
└─ main.jsx

2) useEffect + API fetch (oddiy)

import { useEffect, useState } from "react"; export default function Posts() { const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { fetch("https://jsonplaceholder.typicode.com/posts?_limit=5") .then((r) => r.json()) .then((data) => setPosts(data)) .finally(() => setLoading(false)); }, []); if (loading) return <p>Yuklanyapti...</p>; return ( <ul> {posts.map((p) => (<li key={p.id}>{p.title}</li>))} </ul> ); }

3) Forma + validatsiya (oddiy)

function ContactForm() { const [name, setName] = useState(""); const [err, setErr] = useState(""); function submit(e) { e.preventDefault(); if (name.trim().length < 3) return setErr("Ism kamida 3 harf bo‘lsin"); setErr(""); alert("Yuborildi!"); } return ( <form onSubmit={submit}> <input value={name} onChange={(e) => setName(e.target.value)} /> <button>Yuborish</button> {err && <p>{err}</p>} </form> ); }

4) Mini-loyiha: “Blog Card + Qidiruv”

Maqolalarni qidirish: input yozilganda ro‘yxat filtrlanadi.

const [q, setQ] = useState(""); const filtered = articles.filter(a => a.title.toLowerCase().includes(q.toLowerCase()));

Mashqlar

  1. Counter + localStorage (refresh bo‘lsa ham saqlansin).
  2. Todo app (add/delete/complete) + filter.
  3. 2 ta sahifa: Home va Contact (react-router-dom bilan).

Keyingi qadamlar

📲 Aloqa

Savol, taklif yoki hamkorlik uchun:

✅ Amaliy mashqlar

🧩 Mini-loyiha g‘oyasi

Shu sahifadagi bilimga tayangan holda kichik loyiha qiling. Maqsad — “o‘qib” qolmasdan, qo‘l bilan qilish:

❓ Tez-tez so‘raladigan savollar

📌 Keyingi qadamlar
  • HTML/CSS/JS darsliklarini parallel o‘ting.
  • Linux va Windows buyruqlarini amalda sinab boring.
  • SSH/Nmap bo‘limini faqat ruxsatli labda ishlating.