👩‍💻 React Context API bilan kichik E-commerce ilovasini yasaymiz !

🚀Yangi playlistga Xush kelibsiz. Reacdagi eng muhim mavzulardan biri State Management haqida darslarni boshladik. Bu 👩‍💻Redux darslaridan oldin juda ham muhim hisoblanadi.

01. State Management & Props Drilling

Telegram | Youtube

🔍 React Props Drilling nima?
Props Drilling – bu React komponentlari o'rtasida props'larni chuqurroq darajalarga uzatish jarayoni. Agar biror ma'lumot ota komponentdan necha martalab farzand komponentlarga o'tkazilsa, bu props drilling deb ataladi.

🚨 Muammo: Juda ko'p darajali komponentlar bo‘lsa, kod murakkab va qiyin boshqariladigan bo‘lib qoladi.
✅ Yechimlar:
🔹 Context API
🔹 Redux
🔹 Zustand kabi State Management kutubxonalari

Ushbu video aynan Props Drilling holati va uni yuzaga kelishi haqida:

02. Props Drilling

Telegram | Youtube

T-Shaped Dasturchi bo'lishning ahamiyati.

Dasturiy ta'minot kompaniyalari endi faqat bitta sohada kuchli yoki har tomonlama o'rtacha bilimga ega bo'lgan dasturchilarni izlamayapti. Ular o'zlariga kerakli yo'nalishda chuqur bilimga ega bo'lgan, lekin boshqa yo‘nalishlarda ham ishlay oladigan mutaxassislarni qidirmoqda.

🔹 Generalist – turli texnologiyalarni yuzaki biladi, lekin chuqur yechim bera olmaydi.
🔹 Spetsialist – bitta texnologiyada juda kuchli, lekin boshqa yo‘nalishlarda zaif bo‘lishi mumkin.
🔹 T-Shaped dasturchi – bir sohaga chuqur ixtisoslashgan, lekin boshqa texnologiyalarni ham yetarlicha tushunadi.

Rasmdan T-Sharped ma'nosini tushungan bo'lsangiz kerak.

📌 Nega T-Shaped dasturchi bo‘lish kerak?
✅ Ishga joylashish va jamoada almashuvchan bo‘lish osonlashadi.
✅ Katta qiyinchiliklarga duch kelganda muammoni yechish imkoniyati ortadi.
✅ Kompaniyalar ko‘proq talab qiladi.

📌 Qanday T-Shaped dasturchiga aylanish mumkin?
🔹 Asosiy yo‘nalishda chuqur bilim olish
🔹 Qo‘shimcha texnologiyalarni o‘rganish va ish jarayonida foydalanish
🔹 Har xil loyihalarda ishtirok etib, yangi tajriba orttirish


Bugundan boshlab T-Shaped dasturchi bo‘lish sari harakat qiling! 🚀

Telegram | Youtube

🔹 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