</> Softromeda Edu

⚛ React bilan interfeys qurish

Komponentlar asosida zamonaviy interfeys - 20 bosqichli amaliy qo'llanma

📚 20 bo‘lim 🎯 O‘rta 👁 4 ko‘rish
O‘qishni boshlash

Darslik haqida

React - foydalanuvchi interfeysini komponentlardan yig'adigan kutubxona. Uni 2013-yilda Facebook ochiq kodga chiqargan va bugun u front-end dunyosida eng keng tarqalgan vosita. Bu darslik JavaScript bilishni talab qiladi va React ni noldan o'rgatadi: JSX va komponentlardan tortib holat, useEffect, kontekst, o'z ilgaklaringiz, unumdorlik va testlargacha. Har bir misol React 19 da haqiqatan chizilgan va ko'rsatilgan natija - dasturning o'zi bergan chiqish. Kod misollaridagi komponent va o'zgaruvchi nomlari o'zbek tilida. Darslik yakunida Node.js darsligida yozilgan API ga ulanadigan to'liq ilova quriladi.

Darslik mundarijasi

  1. 1 React bilan tanishuv React ni kim va nima uchun yaratgan, nomi qayerdan kelgan, buyruqli va tavsifiy yondashuv farqi hamda virtual DOM nima. 11 daq.
  2. 2 Muhitni sozlash va birinchi loyiha Vite bilan loyiha yaratish, papka tuzilishi, createRoot va StrictMode, ishlab chiqish serveri hamda bu darslikdagi misol... 10 daq.
  3. 3 JSX Jingalak qavs ichidagi ifodalar, className va camelCase atributlar, yagona ildiz va Fragment, shartli chizish hamda JSX... 13 daq.
  4. 4 Komponentlar va props Komponent yozish qoidalari, props va yoyish, odatiy qiymatlar, children, props ning o'zgarmasligi va bir tomonlama ma'lu... 14 daq.
  5. 5 Ro'yxatlar va key map bilan ro'yxat chizish, key nima uchun kerak, indeksni key qilishning oqibati, Fragment uchun key va bo'sh ro'yxat. 11 daq.
  6. 6 Hodisalar onClick va boshqa ishlovchilar, hodisa obyekti, argument uzatish, preventDefault, ko'tarilish va ishlovchini to'g'ri yoz... 11 daq.
  7. 7 Holat - useState useState bilan holat saqlash, holat suratdek ishlashi, yangilovchi funksiya, obyekt va massivni o'zgarmas yangilash hamd... 11 daq.
  8. 8 Formalar Boshqariladigan maydonlar, bir nechta maydonni bitta holatda saqlash, tanlov va belgilash, tekshiruv va yuborish. 9 daq.
  9. 9 Holatni ko'tarish Umumiy holatni ota-komponentga ko'chirish, bolaga funksiya uzatish, yagona haqiqat manbai va holatni qayerga qo'yish. 8 daq.
  10. 10 Yon ta'sirlar - useEffect useEffect qachon ishlaydi, bog'liqliklar ro'yxati, tozalash funksiyasi, cheksiz sikl sabablari va effekt kerak bo'lmagan... 11 daq.
  11. 11 Ma'lumot olish useEffect bilan so'rov yuborish, yuklanish va xato holatlari, poyga holati va uni AbortController bilan hal qilish. 9 daq.
  12. 12 useRef DOM elementiga murojaat, chizishlar orasida qiymat saqlash, ref va holat farqi hamda React 19 da ref prop sifatida. 9 daq.
  13. 13 Kontekst - useContext Props burg'ulash muammosi, createContext va Provider, React 19 dagi qisqa shakl, odatiy qiymat va kontekstni qachon ishl... 10 daq.
  14. 14 useReducer Murakkab holatni reduktor bilan boshqarish, amallar, useState bilan taqqoslash, kontekst bilan birlashtirish va reduktor... 9 daq.
  15. 15 O'z ilgaklaringiz Ilgaklar qoidalari, takrorlanuvchi mantiqni ilgakka ajratish, holat ulashilmasligi va foydali ilgaklar to'plami. 8 daq.
  16. 16 Kompozitsiya naqshlari children bilan o'rash, props sifatida JSX, birlashtirilgan komponentlar, chizish funksiyasi va props burg'ulashni kompoz... 10 daq.
  17. 17 Unumdorlik React qachon qayta chizadi, memo, useMemo va useCallback, ularni qachon ishlatmaslik va haqiqiy sekinlik sabablari. 11 daq.
  18. 18 Marshrutlash React Router bilan sahifalar, yo'l parametrlari, ichma-ich marshrutlar va Outlet, dasturiy o'tish hamda so'rov qatori. 12 daq.
  19. 19 Testlar React Testing Library bilan sinash, foydalanuvchi ko'zi bilan qidirish, hodisalarni yuborish, asinxron kutish va nimani... 12 daq.
  20. 20 Amaliy loyiha - kutubxona mijozi Node.js darsligida yozilgan API ga ulanadigan to'liq ilova: marshrutlash, ma'lumot olish, forma, kontekst va testlar. 8 daq.