Yakuniy modul: o’rganilganlarni amaliy loyihalarda birlashtirish va tashqi API’lar bilan ishlash.

Amaliy loyihalar

Modulda ikkita loyiha yig’iladi:

1. CUser — foydalanuvchilar bilan ishlash amaliyoti: ro’yxat, qo’shish, o’chirish — komponentlar, props, state, forma va fetch’ning jamlanmasi.
2. Frontend Quiz App — savol-javob ilovasi: savollar ro’yxati, javob tanlash, natija hisoblash. State boshqaruvi va shartli render’ning yaxshi mashqi.

Loyihalarda yangi "mavzu" yo’q — yangi narsa ularning birga ishlashi. Videoni ko’rib bo’lgach, loyihani o’z g’oyangizda qaytaring: boshqa mavzu, o’sha naqshlar.

AXIOS

axios — fetch’ning qulayroq muqobili (npm install axios):

import axios from "axios";

const { data } = await axios.get("https://json-api.uz/api/project/fn37/users");
axios.post(url, yangiUser);

fetch bilan solishtirganda: javob avtomatik JSON’ga aylanadi (res.json() bosqichi yo’q), xato holatlar (404, 500) o’zi throw qilinadi, so’rov sozlamalari qulayroq. Kichik loyihada fetch yetadi; jamoaviy loyihalarda axios ko’p uchraydi — ikkalasini ham tanib turing.

JSON-API.UZ va tashqi API’lar

json-server faqat kompyuteringizda ishlaydi; json-api.uz — xuddi shu vazifani internetda bajaradigan xizmat: o’z "loyihangizni" ochib, unga REST so’rovlar yuborasiz. Endi ilovangizni do’stingiz ham ochib ko’ra oladi — ma’lumot ham onlayn.

Tashqi API bilan ishlashda odat bo’lishi kerak: hujjatini o’qish (qaysi endpoint nima qaytaradi), Network bo’limida so’rov-javobni tekshirish, va har doim loading/error holatlarini ko’rsatish.

Tipik xato. API javobining shakliga qaramasdan data.map(...) yozish — javob { results: [...] } shaklida bo’lsa, "map is not a function" xatosi chiqadi. Avval konsolda javob shaklini ko’ring, keyin kod yozing.

Kurs yakuni

Qo’lingizdagi to’plam: komponentlar, props, state, hook’lar (useState, useEffect, useRef, useReducer, custom), router va API. Bu — React dasturchining kundalik 90% ishi.

Keyingi bekat frontend yo’nalishida — Redux: state bir nechta sahifa va komponentga "sochilib" ketganda uni bitta markazda saqlash. useReducer’ni tushungan bo’lsangiz, Redux tanish tuyuladi.

Amaliyot

1. CUser’ni o’z mavzuingizda qaytaring (masalan "Kitoblar javoni": qo’shish, o’chirish, ro’yxat).
2. Quiz App’ga o’z savollaringizni qo’ying va natija sahifasiga baho izohi qo’shing.
3. Loyihalardan birini fetch’dan axios’ga o’tkazing.
4. json-api.uz’da loyiha ochib, ma’lumotni lokal json-server’dan onlayn API’ga ko’chiring.
5. Eng yaxshi loyihangizni GitHub’ga yuklang — bu portfolio’ngizning React bo’limi.

Yakuniy testni ishlang — va yo’nalishning keyingi kursi Redux’ga o’ting.