React haqida gaplashamiz
React o'zi nima?
React bu javascript(dasturlash tilining) kutubxonasi hisoblanadi.Ho'p endi react kutubxonaning xususiyatlarini ko'rib chiqamiz.Birinchi tushunchalarga to'xtalamiz.Single Page Aplication => SPA (Ma'nosi SPA tushunchasida bitta html file bo'ladi)
Multi Page Aplication => MPA (Bir nechta html filedan iborat bo'ladi)
Ustuvorlik xususiyatlarini o'rganib chiqamiz.
- SEO => SEO (Search Engine Optimization) nima — bu web-saytlarni qidiruv tizimlari natijalari sahifalarida (SERP) yuqori o'rinlarni egallash uchun optimallashtirish jarayoni. SEO veb-saytning ko'rinishini yaxshilash va organik (to'lanmagan) trafikni oshirishga qaratilgan. SEOning asosiy qismlari quyidagilardan iborat:
Kalit so'zlarni tadqiq qilish (Keyword Research): Maqsadli auditoriya tomonidan qidiruv tizimlarida foydalaniladigan kalit so'zlarni aniqlash.
On-page SEO: Web-saytning ichki elementlarini optimallashtirish, bu quyidagilarni o'z ichiga oladi:
Sarlavha teglari: Har bir sahifa uchun tegishli va aniq sarlavhalar yaratish.
Meta tavsiflar: Har bir sahifa uchun qisqa va qiziqarli meta tavsiflar yozish.
URL tuzilishi: Oddiy va kalit so'zlarni o'z ichiga olgan URL-larni yaratish.
Kontent: Yuqori sifatli va kalit so'zlarga boy kontent yozish.
Ichki havolalar: Sayt ichidagi boshqa sahifalarga havolalar qo'shish.
Off-page SEO: Saytdan tashqaridagi omillarni optimallashtirish, bu quyidagilarni o'z ichiga oladi:
Backlinks: Boshqa ishonchli saytlardan havolalar olish.
Ijtimoiy signallar: Ijtimoiy tarmoqlardagi faollik va almashinuvlar.
Texnik SEO: Saytning texnik jihatlarini optimallashtirish, bu quyidagilarni o'z ichiga oladi:
Sayt tezligi(Speed): Sahifalarning yuklanish vaqtini qisqartirish.
Mobil moslashuvchanlik: Saytning mobil qurilmalarda yaxshi ko'rinishini ta'minlash.
Sayt xaritasi (Sitemap): Qidiruv tizimlariga saytning tuzilishini tushunishga yordam beruvchi sayt xaritasini yaratish.
Robots.txt: Qidiruv tizimlariga qaysi sahifalarni indekslash kerakligini aytadigan faylni sozlash.
Kontent Marketing: Foydali, qiziqarli va tegishli kontent yaratish va tarqatish orqali organik trafikni jalb qilish.
Analitika va kuzatuv: Web-saytning ishlashini o'lchash va optimallashtirish strategiyalarini takomillashtirish uchun analitik vositalardan foydalanish, masalan Google Analytics.
SEO - bu doimiy o'zgarib turadigan soha bo'lib, qidiruv tizimlarining algoritmlari va qoidalari muntazam ravishda yangilanib turadi, shuning uchun SEO strategiyalari ham mos ravishda yangilanib turishi kerak.
2.Initial load => (dastlabki yuklash) web-sayt yoki web-ilovani foydalanuvchi tomonidan birinchi marta ochilganda sahifaning yuklanish jarayonini anglatadi. Bu jarayonda browser sahifaning barcha zarur elementlarini, jumladan HTML, CSS, JavaScript fayllarini, rasmlar, shriftlar va boshqa resurslarni yuklaydi.
Dastlabki yuklash vaqti foydalanuvchi tajribasi uchun juda muhimdir, chunki uzoq yuklash vaqti foydalanuvchilarni saytdan chiqib ketishga majbur qilishi mumkin.
3.Web-sayt yoki web-ilovaning "speed" (tezligi) uning turli jihatlarida o'lchanadi va foydalanuvchi tajribasi uchun muhim hisoblanadi. Sayt tezligi, odatda, sahifa yuklanish vaqti, foydalanuvchi bilan o'zaro ta'sir qilishi va umumiy ishlash qobiliyatiga ishora qiladi.
4.Server — bu kompyuter yoki dasturiy ta'minot tizimi bo'lib, u tarmoq orqali boshqa kompyuterlarga (mijozlarga) xizmat ko'rsatadi. Serverlar turli xizmatlar va resurslarni taqdim etadi, masalan, veb-sahifalar, elektron pochta, ma'lumotlar bazalari va fayllar. Serverlar odatda kuchli apparat va dasturiy ta'minotdan iborat bo'lib, tarmoqqa ulanishda yuqori ishonchlilik va unumdorlikni ta'minlaydi.
Server turlari:
Web server: Veb-sahifalarni yetkazib berish uchun mas'ul bo'lgan server. Mashhur web serverlar Apache, Nginx va Microsoft Internet Information Services (IIS) kiradi.
Database server: Ma'lumotlar bazasini boshqarish tizimlarini (DBMS) ishga tushiradi va ma'lumotlarni saqlaydi, boshqaradi va ularga kirish imkoniyatini ta'minlaydi. Misollar: MySQL, PostgreSQL, Microsoft SQL Server, Oracle Database.
File server: Foydalanuvchilar va tizimlar orasida fayllarni saqlash va almashish imkoniyatini beradi.
Mail server: Elektron pochta xabarlarini qabul qilish, yuborish va saqlashni boshqaradi. Misollar: Microsoft Exchange Server, Postfix, Sendmail.
Application server: Dasturiy ta'minot dasturlarini ishga tushiradi va ularga mijozlar tomonidan kirish imkonini beradi. Misollar: Apache Tomcat, GlassFish.
DNS server: Domen nomlarini IP manzillarga tarjima qiladi va tarmoqda kerakli qurilmalarga yo'naltiradi. Misollar: BIND, Microsoft DNS Server.
Proxy server: Mijozlar va serverlar orasida vositachilik qiladi, xavfsizlik, kontent filtratsiyasi va keshlash funksiyalarini bajaradi.
Virtual server: Bir jismoniy serverda bir nechta virtual serverlarni ishga tushirish imkonini beradigan texnologiya. Bu server virtualizatsiyasi orqali amalga oshiriladi va misol sifatida VMware, Hyper-V, KVM kiradi.
Serverlarning asosiy vazifalari:
Xizmatlarni taqdim etish: Mijozlarga veb-sahifalar, ma'lumotlar, elektron pochta, fayllar va boshqa xizmatlarni taqdim etish.
Resurslarni boshqarish: Ma'lumotlar bazalari, saqlash tizimlari, hisoblash quvvatlari va tarmoq resurslarini boshqarish.
Xavfsizlikni ta'minlash: Ma'lumotlarni himoya qilish, foydalanuvchi autentifikatsiyasi va ma'lumotlar shifrlashni ta'minlash.
Trafikni boshqarish: Tarmoq trafigini boshqarish va optimallashtirish.
Zaxiralash va tiklash: Ma'lumotlarni zaxiralash va avariyalardan keyin tiklash imkoniyatini ta'minlash.
Serverlar internet va lokal tarmoqlarda asosiy infratuzilma elementlari hisoblanadi. Ular turli xizmatlarni ko'rsatish va ma'lumotlarni boshqarish orqali biznes, ta'lim, hukumat va boshqa ko'plab sohalarda keng qo'llaniladi.
| SPA | MPA | |
|---|---|---|
| SEO | - | + |
| Initial Load | - | + |
| Speed | + | - |
| Server | + | - |
Bu jadval orqali ustunlik tomonlarini ko'rdingiz.
Real DOM vs Virtual DOM
Real DOM
1.Hujjatning har bir elementi darxt sifatida(nodes) sifatida ifodalasak. Daraxtning yuqori darajasi (root) odatda tegi bo'ladi, va barcha boshqa elementlar shu tegning ostida joylashadi.
2.Elementlarni manipulyatsiya qilish: JavaScript yordamida Real DOMdagi elementlarni o'qish, o'zgartirish, qo'shish va olib tashlash mumkin. Bu getElementById, querySelector, appendChild, removeChild, setAttribute kabi DOM API funksiyalari yordamida amalga oshiriladi.
3.Performans muammolari: Real DOM bilan ishlashda har bir o'zgarish to'g'ridan-to'g'ri brauzerda qayta chizilishiga olib keladi. Bu katta va murakkab hujjatlar uchun sekin ishlashiga sabab bo'lishi mumkin, chunki har bir kichik o'zgarish ham butun hujjatni qayta ko'rib chiqishni talab qiladi.
Virtual Dom
Virtual DOM (VDOM) — bu JavaScript-da yaratilgan va ishlaydigan yengil vaznli ko'chirish (copy) bo'lib, u Real DOM (Document Object Model) ning samaradorligini oshirish uchun ishlatiladi. Virtual DOM, asosan, React kabi zamonaviy JavaScript kutubxonalari va ramkalarida (frameworks) ishlatiladi. Bu texnologiya dastur tezligini oshirish va foydalanuvchi tajribasini yaxshilash maqsadida qo'llaniladi.
1.Virtual DOM yaratish: Dastlab, Virtual DOM hujjatning dastlabki ko'rinishini hosil qiladi. Bu dastlabki renderlash paytida sodir bo'ladi.
2.O'zgarishlarni qayd etish: Hujjatda biror o'zgarish bo'lganda, avval bu o'zgarish Virtual DOMda amalga oshiriladi. Real DOMga darhol tegilmaydi.
3.Dif algoriti: Virtual DOMdagi yangi holat eski holat bilan solishtiriladi. Bu solishtirish jarayonida faqatgina o'zgarishlar qayd etiladi. Bu jarayon dif algoriti deb ataladi.
4..Patch (Yamash): Dif algoritmi yordamida qayd etilgan o'zgarishlar minimal to'plami Real DOMga qo'llanadi. Bu Real DOMni qayta chizish (re-rendering) jarayonini sezilarli darajada optimallashtiradi.
Real Dom va Virtual DOM ning asosiy farqari:
Real DOM va Virtual DOM o'rtasidagi asosiy farq ularning qanday ishlashida va samaradorlikda. Real DOMda har qanday o'zgarish to'g'ridan-to'g'ri amalga oshiriladi, bu esa katta va murakkab hujjatlar uchun sekin ishlashga olib keladi. Virtual DOM esa o'zgarishlarni avval Virtual DOMda amalga oshiradi va faqat minimal o'zgarishlarni Real DOMga qo'llab, samaradorlikni oshiradi. Virtual DOMning bu yondashuvi katta va dinamik veb-ilovalar uchun juda qulay va samarali hisoblanadi.
Endi biz library va frameworklar haiqda gaplashamiz:
Library (kutubxona) va framework nima deydigan bo'lsak.Ularning dasturchiga qanday imkoniyat berishiga va dastur tuzilmasiga qanday ta'sir ko'rsatishi jihatdan ajralib turadi.
- React - library
- Next - framework
- Angular - framework
- Vue - framework
- Nuxt - framework
- Astra - library
Kutubxona
Foydalanish: (Usage) Kutubxona funksiyalar, sinflar yoki modullar to'plamini o'z ichiga oladi. Siz kutubxonani kerak bo'lganda chaqirasiz va undan foydalanasiz. Dastur oqimini siz boshqarasiz.
Boshqaruv: (Control) Dastur oqimini siz boshqarasiz. Kutubxona vositalar va funksiyalarni taqdim etadi, lekin umumiy arxitektura yoki operatsiyalar ketma-ketligini belgilamaydi.
Moslashuvchanlik: (Flexibility) Kutubxonalar odatda ko'proq moslashuvchan bo'lib, turli kontekstlarda ishlatilishi mumkin va dasturingizga aniq bir tuzilmani yuklamaydi.
Misol: (Example) JavaScript'da jQuery kutubxonasi DOM bilan ishlash, hodisalarni boshqarish va AJAX so'rovlarini bajarish uchun funksiyalarni taqdim etadi. Siz jQuery funksiyalarini o'zingizning dastur mantiqingizda kerak bo'lganda chaqirasiz.
Freymvork
Foydalanish: (Usage) Freymvork dasturlarni yaratish uchun tuzilgan va oldindan belgilangan usulni taqdim etadi. U odatda kutubxonalar, vositalar va eng yaxshi amaliyotlar to'plamini o'z ichiga oladi.
Boshqaruv: (Control) Freymvork dastur oqimini belgilaydi. U o'z dizayni va hayotiy tsiklga asoslangan holda sizning kodingizni ma'lum nuqtalarda chaqiradi.
Tuzilish: (Structure) Freymvorklar dasturingizga aniq tuzilma va dizayn naqshlarini yuklaydi. Ular ko'pincha muayyan konventsiyalarni bajarishingizni va kodlaringizni integratsiyalash uchun aniq nuqtalarni taqdim etishni talab qiladi.
Misol: (Example) JavaScript'da Angular freymvorki veb-ilovalarni yaratish uchun to'liq tuzilmani taqdim etadi, shu jumladan modullar, komponentlar, xizmatlar va yo'naltirish. Sizning kodingiz ushbu tuzilishga mos keladi va Angular umumiy dastur oqimini boshqaradi.
**Asosiy Farqlar**
Kutubxona: Siz kutubxonani chaqirasiz.
Freymvork: Freymvork sizning kodingizni chaqiradi (Boshqaruvning Inversiyasi).
Kutubxona: Dasturingiz oqimini siz boshqarasiz.
Freymvork: Freymvork dastur oqimini boshqaradi va siz aniq tafsilotlarni kiritasiz.
Kutubxona: Odatda tor va aniq funksiyalar to'plamini taqdim etadi (masalan, loglash kutubxonasi, matematik kutubxona).
Freymvork: Dastur ehtiyojlarini qamrab olish uchun keng va integratsiyalangan funksiyalar to'plamini taqdim etadi (masalan, veb-ilova freymvorki).
Xulosa qilib aytganda, kutubxonalar qayta foydalanish mumkin bo'lgan kod qismlarini taqdim etadi, siz ularni kerak bo'lganda loyihangizga qo'shasiz, freymvorklar esa loyihangiz arxitekturasi va oqimini boshqarishga yordam beradi, dasturingizga tuzilgan yondashuvni taklif qiladi.
Endi bu tushunchalarni tushungandan keyin React haqida gaplashamiz.
- React bu Javascript kutubxonasi
- React SPA technalogiyasi
- React Virtual Dom asosida ishlaydi
Endi Reactda JSX degan tushuncha bor.JSX format bu Bitta div ichida html taglari joylashuviga aytiladi.Bunda alohida div kodlari bo'lmaydi!
Jsx Format.
Jsx formatga to'g'ri kelmaydi!
Ho'p keyingi tushuncha bu Components.Componenta mustaqil hech kim bilan ishi yo'q.O'zi boshqa kodlar bilan umuman ishi yo'q bo'lgan,qayta-qayta foydalana oladigan kodlar majmuasi desak bo'ladi.
Componentalarni ishlatishda 3 ta muhim qoidasi bor.
1-Katta harf bilan yozilishi kerak
2-Componentalar chaqirilganda tag kabi chaqiriladi
3-Componentalar jsx format qaytaradi
Misol ko'rishingiz mumkin.
Reactda 2 xil Components mavjud
Class (kam ishlatiladi)
Function
Bular haqida keyingi mavzularda gaplashamiz.
O'ylaymanki yetarli tushunchalarga ega bo'ldingiz hozirgacham.Keyingi mavzulargacha...
Top comments (1)