React

React — foydalanuvchi interfeyslarini yaratish uchun ishlatiladigan JavaScript kutubxonasi. U web ilovalarda sahifa qismlarini componentlarga ajratib yozish, holatni boshqarish va ma’lumot o‘zgarganda interfeysni yangilash uchun ishlatiladi.

React asosan frontend dasturlashda qo‘llanadi. U yordamida landing page, admin panel, dashboard, internet do‘kon, ijtimoiy tarmoq, SaaS platforma va boshqa interaktiv web ilovalar yaratish mumkin.

Vazifasi

React foydalanuvchi interfeysini tartibli va qayta ishlatiladigan qismlar orqali yaratishga yordam beradi.

React quyidagi vazifalarda ishlatiladi:

• web sahifa interfeysini yaratish;
• componentlar bilan ishlash;
• foydalanuvchi holatini boshqarish;
• API’dan kelgan ma’lumotni ko‘rsatish;
• forma, tugma va modal kabi UI qismlarni yaratish;
• sahifani dinamik yangilash;
• katta frontend ilovalarni modullarga ajratish;
• SPA ilovalar yaratish;
• frontend routing bilan ishlash;
• interaktiv dashboard va admin panellar yaratish.

Masalan, mahsulot kartasi, header, sidebar, login formasi va pagination alohida React componentlar sifatida yozilishi mumkin.

React qanday ishlaydi?

React sahifani kichik componentlarga ajratib boshqaradi. Har bir component o‘z ko‘rinishi va logikasiga ega bo‘lishi mumkin.

Oddiy jarayon:

• dasturchi component yaratadi;
• component JSX orqali interfeysni tasvirlaydi;
• React componentlarni brauzerda render qiladi;
• foydalanuvchi harakati state’ni o‘zgartiradi;
• state o‘zgarganda React kerakli UI qismini yangilaydi;
• sahifa to‘liq qayta yuklanmasdan yangi holat ko‘rinadi.

React ma’lumot o‘zgarganda DOM bilan ishlash jarayonini samarali boshqaradi.

Component

Component — React ilovasining qayta ishlatiladigan alohida qismi. Component tugma, karta, forma, menyu yoki butun sahifa bo‘limi bo‘lishi mumkin.

Componentlarga misollar:

• Button;
• Header;
• Sidebar;
• ProductCard;
• LoginForm;
• UserProfile;
• ArticleList;
• Modal;
• Pagination;
• DashboardChart.

Component yondashuvi katta interfeysni kichik, tushunarli va boshqariladigan qismlarga ajratadi.

JSX

JSX — JavaScript ichida HTML’ga o‘xshash markup yozish imkonini beradigan sintaksis. React componentlar odatda JSX orqali yoziladi.

Misol:

<h1>Salom, UzbekDevs</h1>

JSX HTML’ga o‘xshaydi, lekin JavaScript bilan birga ishlaydi. JSX ichida variable, function, shartli rendering va ro‘yxatlarni chiqarish mumkin.

JSX’da quyidagilar ishlatiladi:

• HTML’ga o‘xshash elementlar;
• JavaScript expressionlar;
• component chaqirish;
• props berish;
• event handlerlar;
• shartli rendering.

Props

Props — componentga tashqaridan uzatiladigan ma’lumotlar. Props yordamida bitta component turli ma’lumotlar bilan qayta ishlatilishi mumkin.

Masalan, ProductCard componentiga mahsulot nomi, narxi va rasmi props sifatida berilishi mumkin.

Props quyidagi ma’lumotlarni uzatishda ishlatiladi:

• title;
• description;
• image;
• user;
• product;
• status;
• callback function;
• style qiymatlari;
• component sozlamalari.

Props odatda parent componentdan child componentga uzatiladi.

State

State — component ichidagi o‘zgaruvchan holat. State foydalanuvchi harakati, API javobi yoki ichki logika natijasida o‘zgarishi mumkin.

State ichida quyidagilar saqlanishi mumkin:

• input qiymati;
• modal ochiq yoki yopiqligi;
• yuklanish holati;
• xatolik xabari;
• foydalanuvchi ma’lumoti;
• mahsulotlar ro‘yxati;
• tanlangan kategoriya;
• sahifa raqami;
• filter qiymatlari.

State o‘zgarganda React componentni yangilab render qiladi.

useState

useState — React’da component state yaratish uchun ishlatiladigan hook.

Misol:

const [count, setCount] = useState(0);

Bu yerda:

• count — joriy state qiymati;
• setCount — state’ni yangilash funksiyasi;
• 0 — boshlang‘ich qiymat.

useState quyidagi holatlarda ishlatiladi:

• counter;
• input value;
• toggle;
• modal holati;
• loading;
• error;
• selected item;
• form state.

Hook

Hook — React function componentlarida state, lifecycle va boshqa React imkoniyatlaridan foydalanish uchun ishlatiladigan maxsus function.

Mashhur React hooklar:

• useState;
• useEffect;
• useContext;
• useRef;
• useMemo;
• useCallback;
• useReducer.

Hooklar function componentlarda ichki holat va qo‘shimcha logikani boshqarishga yordam beradi.

useEffect

useEffect — component render bo‘lgandan keyin qo‘shimcha amal bajarish uchun ishlatiladigan hook.

useEffect quyidagi holatlarda ishlatiladi:

• API’dan ma’lumot olish;
• document title o‘zgartirish;
• event listener qo‘shish;
• timer ishlatish;
• tashqi kutubxona bilan integratsiya;
• component mount yoki update holatida amal bajarish.

Masalan, sahifa ochilganda backend API’dan maqolalar ro‘yxatini olish useEffect ichida bajarilishi mumkin.

Rendering

Rendering — React componentdagi ma’lumot va JSX asosida brauzerda UI hosil qilish jarayoni.

Rendering quyidagi holatlarda sodir bo‘ladi:

• component birinchi marta sahifaga chiqganda;
• state o‘zgarganda;
• props o‘zgarganda;
• parent component qayta render bo‘lganda;
• context qiymati o‘zgarganda.

React rendering jarayonida qaysi UI qismlari o‘zgarganini aniqlaydi va kerakli joylarni yangilaydi.

Virtual DOM

Virtual DOM — React tomonidan xotirada saqlanadigan DOM’ning yengil nusxasi. React UI o‘zgarishlarini avval Virtual DOM’da hisoblaydi, keyin haqiqiy DOM’da kerakli qismlarni yangilaydi.

Virtual DOM quyidagi jarayonda ishlaydi:

• state yoki props o‘zgaradi;
• yangi Virtual DOM hosil bo‘ladi;
• eski va yangi Virtual DOM solishtiriladi;
• farqlar aniqlanadi;
• haqiqiy DOM’da kerakli o‘zgarishlar bajariladi.

Bu yondashuv React interfeysni samarali yangilashiga yordam beradi.

Conditional rendering

Conditional rendering — shartga qarab turli UI ko‘rsatish usuli. React’da bu JavaScript shartlari orqali bajariladi.

Conditional rendering quyidagi holatlarda ishlatiladi:

• login qilingan yoki qilinmagan holat;
• loading ko‘rsatish;
• xatolik xabarini chiqarish;
• bo‘sh ro‘yxat holati;
• admin yoki oddiy foydalanuvchi interfeysi;
• modal ochiq yoki yopiq holati.

Masalan, ma’lumot yuklanayotgan paytda Loading..., ma’lumot kelgandan keyin esa ro‘yxat ko‘rsatiladi.

List rendering

React’da ro‘yxatdagi ma’lumotlarni UI ko‘rinishida chiqarish uchun array metodlaridan foydalaniladi. Ko‘pincha map() metodi ishlatiladi.

List rendering quyidagi holatlarda ishlatiladi:

• mahsulotlar ro‘yxati;
• maqolalar;
• foydalanuvchilar;
• kommentlar;
• kategoriyalar;
• menyu elementlari;
• xabarlar;
• bildirishnomalar.

Ro‘yxatdagi har bir element uchun odatda key atributi beriladi. key React’ga elementlarni farqlashga yordam beradi.

Event handling

React foydalanuvchi harakatlarini eventlar orqali boshqaradi.

Keng ishlatiladigan eventlar:

• onClick;
• onChange;
• onSubmit;
• onFocus;
• onBlur;
• onKeyDown;
• onMouseEnter;
• onScroll.

Masalan, tugma bosilganda state o‘zgarishi yoki forma yuborilganda API so‘rovi bajarilishi mumkin.

Form

React’da formalar controlled yoki uncontrolled usulda boshqarilishi mumkin. Controlled form’da input qiymati React state orqali boshqariladi.

Formalar quyidagi vazifalarda ishlatiladi:

• login;
• ro‘yxatdan o‘tish;
• qidiruv;
• filter;
• komment yozish;
• profil tahrirlash;
• mahsulot qo‘shish;
• buyurtma berish.

React formalarida input qiymatini olish, validatsiya qilish va serverga yuborish JavaScript orqali boshqariladi.

Context

Context — ma’lumotni componentlar orasida props orqali har safar uzatmasdan ulashish mexanizmi.

Context quyidagi ma’lumotlar uchun ishlatilishi mumkin:

• theme;
• til sozlamasi;
• login holati;
• foydalanuvchi ma’lumoti;
• global sozlamalar;
• permission;
• notification holati.

Context kichik va o‘rta darajadagi global holatlarni boshqarishda ishlatiladi.

State management

Katta React ilovalarda state boshqaruvi alohida muhim bo‘ladi. Bunda lokal state, context yoki tashqi kutubxonalar ishlatiladi.

State management vositalari:

• React Context;
• Redux;
• Zustand;
• MobX;
• Recoil;
• Jotai;
• TanStack Query.

State management foydalanuvchi ma’lumoti, savatcha, filterlar, API cache, notification va boshqa umumiy holatlarni boshqarishda qo‘llanadi.

React Router

React Router — React ilovalarda sahifalar orasida o‘tishni boshqarish uchun ishlatiladigan kutubxona.

React Router quyidagi vazifalarda ishlatiladi:

• URL asosida sahifa ko‘rsatish;
• nested routes yaratish;
• dynamic route parametrlari;
• protected route;
• redirect;
• layout route;
• 404 sahifa.

Masalan, /products/15 URL orqali 15-ID mahsulot sahifasini ko‘rsatish mumkin.

API bilan ishlash

React ilovalar backend API’dan ma’lumot olish va yuborish uchun HTTP so‘rovlardan foydalanadi.

API bilan ishlashda quyidagilar ishlatiladi:

• fetch;
• Axios;
• TanStack Query;
• SWR;
• REST API;
• GraphQL;
• JSON;
• authentication token.

Masalan, React component GET /api/articles endpointidan maqolalar ro‘yxatini olib, sahifada ko‘rsatishi mumkin.

Styling

React’da componentlarga uslub berishning bir nechta usuli bor.

Keng ishlatiladigan styling usullari:

• oddiy CSS fayl;
• CSS Modules;
• Sass;
• Tailwind CSS;
• styled-components;
• Emotion;
• UI kutubxonalar;
• inline style.

React component yondashuvi sababli styling ko‘pincha component darajasida tashkil qilinadi.

React va TypeScript

React TypeScript bilan keng ishlatiladi. TypeScript component propslari, state, eventlar va API javoblariga aniq type berishga yordam beradi.

React + TypeScript’da type beriladigan qismlar:

• props;
• state;
• event handlerlar;
• API response;
• context qiymati;
• custom hook;
• route parametrlar;
• form value.

Masalan, ProductCard componenti qanday props qabul qilishini interface orqali belgilash mumkin.

React va SPA

React ko‘pincha SPA ilovalar yaratishda ishlatiladi. SPA inglizcha Single Page Application so‘zlarining qisqartmasi.

SPA’da:

• sahifa bir marta yuklanadi;
• keyingi o‘zgarishlar JavaScript orqali bajariladi;
• routing client tomonda ishlashi mumkin;
• API orqali ma’lumot olinadi;
• foydalanuvchi sahifa almashganda butun sayt qayta yuklanmasligi mumkin.

Admin panel, dashboard va interaktiv web ilovalar SPA sifatida qurilishi mumkin.

React va Next.js

React kutubxona bo‘lgani uchun unda routing, SSR, SSG va backend imkoniyatlari alohida framework orqali kengaytirilishi mumkin. Next.js React asosida yaratilgan frameworklardan biridir.

Next.js quyidagi imkoniyatlarni beradi:

• file-based routing;
• server-side rendering;
• static site generation;
• API routes;
• image optimization;
• metadata boshqaruvi;
• full-stack imkoniyatlar;
• deployment uchun tayyor tuzilma.

React UI yaratish uchun ishlatilsa, Next.js React asosidagi to‘liqroq web framework hisoblanadi.

React ekotizimi

React atrofida ko‘plab kutubxona va vositalar mavjud.

React ekotizimida uchraydigan vositalar:

• React Router;
• Redux;
• Zustand;
• TanStack Query;
• Axios;
• React Hook Form;
• Formik;
• Zod;
• Vite;
• Next.js;
• Material UI;
• Ant Design;
• Tailwind CSS.

Bu vositalar routing, state, forma, API, validatsiya, build va UI componentlar bilan ishlashni kengaytiradi.

Dasturlashdagi o‘rni

React zamonaviy frontend dasturlashda keng ishlatiladigan asosiy kutubxonalardan biridir. U component yondashuvi orqali katta interfeyslarni tartibli yaratishga yordam beradi.

React quyidagi loyihalarda ko‘p ishlatiladi:

• admin panel;
• dashboard;
• internet do‘kon;
• SaaS platforma;
• blog platforma;
• CRM;
• marketplace;
• ijtimoiy tarmoq;
• developer portal;
• interaktiv web ilova.

React JavaScript va TypeScript ekotizimida frontend interfeys yaratish uchun muhim texnologiyalardan biri hisoblanadi.

Bog‘liq tushunchalar

JavaScript, TypeScript, Frontend, HTML, CSS, JSX, Component, State, Props, SPA, Next.js, API