🔹 React Context API — createContext & useContext

003. createContext() & useContext()

Agar props drilling (ya'ni ma'lumotni ko‘p-qavatli componentlardan o‘tkazish) sizni charchatgan bo‘lsa, Context API yordamga keladi! 🚀

💡 createContext() — bu umumiy kontekst (ma’lumot ombori) yaratadi.
💡 useContext() — bu kontekstdan qiymatni olish uchun ishlatiladi.

import { createContext, useContext } from "react";

// 1. Context yaratish
const UserContext = createContext();

function App() {
  const user = "Ahror";

  return (
    <UserContext.Provider value={user}>
      <Dashboard />
    </UserContext.Provider>
  );
}

function Dashboard() {
  const user = useContext(UserContext);
  return <h1>Welcome, {user}!</h1>;
}

✅ UserContext.Provider orqali user qiymati pastga uzatiladi
✅ useContext(UserContext) bilan uni bemalol olish mumkin

🔁 Endi props uzataverish shart emas — kontekst orqali barcha komponentlarga "oson ulanish" mumkin!

Telegram | Youtube

📌 Amaliyotni davom ettiramiz.
Bu darsimizda createContext() ni qo'llaymiz. 5️⃣

005. ContextStore 2-qism

Telegram | Youtube

❤️‍🔥Oxiridan bitta oldingi dars 😅
Ko'rib qo'ying. Keyin tez orada yangi playlistni boshlaymiz. Hullas, amaliyotnin eng qaynoq qismlari boshlanmoqda.

8️⃣008. ContextStore 5-qism

Telegram | Youtube

👨‍💻 “Firebase nima o‘zi, akam?” degan savolni yana-ya…na eshitayapman 🤓
Xo‘p, endi boshladik! Playlistimizning birinchi videosida o‘zaro salomlashib, kirish qildik. Endi esa asli gapga o‘tamiz!

🔥 Bu — 2-video
🎯 Mavzu: “React Vite loyihasiga Firebase qanday ulanadi?”

🔗 Videoni ko‘rmasangiz… Firebase sizdan ranjishi mumkin ❤️

002. Install Firebase

Telegram | Youtube

🧠 “👩‍💻Firebase ulanib bo‘ldi, endi nima qilamiz?” deyayotgan bo‘lsangiz…
Mana 3-video tayyor! Endi ishni Firestore bilan jiddiylashtiramiz 😎

Mavzu: Connect Firebase Firestore
Bu video — React loyihangizga real-time ma'lumotlar bazasini ulash bosqichi. Yani gap konkret backendga o‘tmoqda!

🚀 Nimalar qilamiz:
– Firestore ni yoqamiz
– getFirestore, collection, addDoc bilan tanishamiz
– Bazaga yozamiz, o‘qiymiz, o‘chiramiz — lekin samimiylik bilan
– Real amaliy kodlar bilan tushunamiz

😌 Bu videoni ko‘rgan odam:
✅ JSON’ga mehr qo‘yadi
✅ Firestore’ni o‘zinikidek his qiladi
✅ Va nihoyat: “Obbo, bu oson ekan-ku!” deydi.

⚠️Ogohlantirish: Bu videodan keyin sizda "backendni yaxshi ko‘rish" simptomlari paydo bo‘lishi mumkin 😅

003. Connect Firebase Firestore

Telegram | Youtube

Zo‘r! Endi navbat Firestore’dagi ma’lumotlarni UI ga chiqarish darsiga keldi — bu dars haqiqiy frontend kayfiyatini beradi. 😎

🎉“Firestore'dagi ma’lumotlar ekranga chiqmasayam chiqadigan qilib qo‘yamiz!”
🎬 Playlistimizning 4-qismi — eng kutgan bosqich:
👉 *“Firestore’dan ma’lumot olib, UI’da ko‘rsatish!”*

👀 Hozirgacha nima qildik?
– Firebase loyihasini yaratdik
– Ulanishni uddaladik
– Firestore bilan “aloqa”ni yo‘lga qo‘ydik
Endi esa... ekranga chiqaramiz!

🛠 Bu videoda:
✅ Firestore’dan getDocs bilan ma’lumotlarni olish
✅ useEffect yordamida yuklab olish
✅ map() orqali UI’da chiqarish (esingdan chiqmasin: har bir elementga key bersang yaxshi bo‘ladi 😉)
✅ Yuklanish jarayonini boshqarish — loader bilanmi yoki skelet bilanmi, o‘zing hal qiling.

Bu darsni ko‘rganlar:
– Frontend bu oddiy narsa emas ekan deb faxrlanadi
– Ma’lumotlarni API’dan o‘qib, UI’ga chiqarishni tushunadi
– Shunaqa qilib to‘liq real CRUD yo‘liga bir qadam yaqinlashadi!

004. Ma'lumotlarni UIga chiqarish.

Video ostida kommentariya yozishni unutmang, Firestore sizga raxmat aytadi. 😇

Telegram | Youtube

Do‘stlar, Assalomu alaykum ! 👋

YouTube’da geymerlarni ko‘rib turib, bir fikrga bordim:
odamlar o‘yin tomosha qilib zavqlanishadi va shu zavq uchun ularga donate qilishadi. To‘g‘ri, bu juda yaxshi — kimnidir mehnati qadrlanyapti.

Shunda o‘ylab qoldim:
nega bizning auditoriya ham shunday qilmasligi kerak?
Axir bu yerda ham mehnat bor, vaqt bor, eng muhimi — bilim ulashish bor.

Men Frontend dasturlash bo‘yicha bepul, ochiq darslar ulashib kelyapman. Qilgan mehnatim sizga foyda berayotganidan chin dildan xursandman.
Kelajakda yanada sifatliroq, interaktiv va zamonaviy darslar tayyorlashni istayman.

Buning uchun ba’zi texnik vositalar kerak bo'ladi ko'pincha.

Albatta, bu narsalarsiz ham davom etaman — to‘xtab qolmayman. Lekin sizning kichik yordamingiz bilan bu jarayon ancha tezlashadi va sizning o‘zingiz uchun ham foydaliroq bo‘ladi.

🎯 Streamerlarga odamlar kulgu va o‘yin zavqi uchun donate qiladi.
💡 Bu yerda esa siz bilim, ko‘nikma, kasb, va ehtimolki kelajagingizni topyapsiz.

Shu bois, agar darslarim sizga foyda beryapti va bu loyihaning davom etishini istasangiz, quyidagi havola orqali ixtiyoriy tarzda qo‘llab-quvvatlashingiz mumkin:

Bu yerga o'ting: https://t.me/akhror_donate

Bu majburiy emas, bu — hurmat, qadrlash va birga rivojlanish belgisi.
Oldindan har biringizga rahmat!
Keling, birga o‘rganamiz, birga o‘samiz! 🚀

Telegram | Youtube

🧪 "Ma’lumotlarni o‘qiyapmiz, endi yozmasak uyat bo‘ladi...".
Playlistdagi 5-video tayyor:
— “Firestore ga addDoc() yordamida qanday qilib ma’lumot qo‘shiladi?”

👨‍🔬 Bu darsda frontenddan Firestore’ga to‘g‘ridan-to‘g‘ri “Yozdim!” deb yuboramiz:
— Formani to‘ldiramiz
— Submit bosamiz
👩‍💻 Firestore bazasida yangi hujjat paydo bo‘ladi
💥 Va bularning hammasi real va sodda kod bilan tushuntiriladi!

🛠 Video ichida:
— addDoc() ning ishlash mantig‘i
— Form yozish va inputlar orqali state boshqarish
— Submit vaqtida ma’lumotni yuborish
— Qo‘shimcha: Yuborilgandan keyin formani tozalash yoki loader chiqarish

😂 Bu darsni ko‘rganlar:
– “Firestore bu oddiy Google Sheets emas ekan-ku” deb hayron qoladi
– CRUD’ning C harfini bajonidil bajaradi
– Har bir console.log() dan zavqlanadi

005. addDoc() ma'lumotlar qo'shish
👩‍💻 Har bir qo‘shilgan ma’lumot — sizning dasturchilik yo‘lingizda qo‘yilgan yangi g‘isht!

Telegram | Youtube