React.js nədir? Nə üçün istifadə etməliyik?

React.js nədir? Nə üçün istifadə etməliyik?

31.07.2023

2928

Hər birinizə Salamlar🖐️. Bu gün sizlərə React.js nədir və nəyə görə bu qədər populyar olduğunu anlatmağa çalışacam. Başlayaq) İlk öncə React.js-in nə olduğuna nəzər yetirək.

React.js nədir?

 

React.js bir JavaScript kitabxanasıdır. Bununla biz bir web-səhifə hazırlaya bilərik (qısa sözlə desək UI hazırlamaq). Diqqət etdinizsə mən “kitabxanadır” dedim, yəni framework deyil!. React-ın tək vəzifəsi interfeysdəki bütün işləri ən məntiqli, ən sadə, ən performanslı yol ilə hazırlamaqdır. Bunu necə edir? Bunu necəetdiyini izah etmək üçün React’ı biraz daha texniki tərəfdən izah edək; React,component(element) əsaslı, Virtual DOM memarlığı(başqa söz tapmadım izah etməyə😅) istifadə edən bir Frontend kitabxanasıdır. Birazdan bunların nə olduğu haqqında ətraflı danışacağam.

Əvvəlcə React-ın üstünlüklərinə baxaq:

 

reactın üstünlükləri

 

React-ın tarixi

React.js Meta(əvvəlki adı Facebook olan) şirkətin tərəfindən yaradılmışdır.

 

mark

Nəyə görə React.js yaradıldı? Bəziləriniz bəlkə də xatırlayarsınız Facebook-un web saytından istifadə edərkən etdiyiniz refreshləri(səhifənin yenilənməsi). Anlıq olaraq mesaj gəldikdə və ya kiminsə onlayn olduğunu görmək üçün səhifəni refresh edirdik, ki bu görünsün😅. Yəni uzun sözün qısası, bu kimi problemlərin aradan qaldırılması üçün Meta şirkəti React.js-i yaratdı. İndi isə gəlin bayaq dediyimiz Componentvə Virtual DOM anlayışları ilə tanış olaq.

 

Nədir bu Component(element)?

 

Məndən Component nədir deyə soruşsalar mən “Component hər şeydir” deyə cavab verərdim. Bəli hər şeydir. Bütöv halda olan bir şeyin kiçik hissələrdən ibarət olduğunu hamımız bilirik. Misal olaraq deyə bilərik ki, insan bədəni və onunla bağlı olan orqanlar. Elə bu kiçik parçalar(orqanlar), React üçün component anlamına gəlir. Biraz daha texniki baxımdan yanaşsaq deyə bilərik ki, Veb-səhifəmizdə olan hər şeyi kiçik hissələrə(componentlərə) bölməkdir. Bunu nəyə görə edirik? Çünki bizim böldüyümüz bu kiçik hissələri saytımızda digər yerlərdə də işlədə bilərik. Kiçik hissələrə bölməyimiz bizim üçün bir növ performans gətirir.Kodun təkrarının qarşısını alır.

react project structure

 

Virtual DOM nədir?

 

İlk öncə gəlin DOM sözünün açılışına baxaq. DOM-> Document Object Model anlamına gəlir. Təbii ki, heçnə anlamadınız. Sadə dil ilə izah etsəm, DOM, veb-səhifələrin bizə görünməsini təmin edən, HTML elementlərinin iyerarxik bir şəkildə bir arada saxlanılmasını təmin etmək anlamına gəlir. Virtual DOM isə DOM strukturunun bir kopyası kimi düşünə bilərik. Virtual DOM, əsas DOM-un kopyasını açar -> dəyər (key=> value) şəklində yaddaşda saxlayır. İndi isə keçək əsas hissəyə. Veb səhifəmizdə hər hansısa bir element dəyişsək və həmin dəyişikliyin ekrana görünməsi üçün bütün DOM skan edilirdi. Amma bu işin içinə Virtual DOM girdikdə isə, hər hansısa bir dəyişiklik olduqda ilk öncə Virtual DOM-da həmin dəyişiklik saxlanılır. Virtual DOM-da saxlanılması bir növ yaddaşda saxlanılması anlamına gəlir. Daha  sonra Virtual DOM-dan, əsas DOM komponentlərimizə köçürüldükdə bunlar arasında olan fərqliliklər yoxlanılır. Əgər hər hansısa hissədə fərqlilik varsa həmin hissə render edilir. Yoxdursa render baş vermir. Bu render-i siz bir növ yeniləmə(refresh) kimi başa düşün.Bura qədər oxudunuzsa hər birinizə təşəkkürlərimiz bildirirəm. Suallarınız olduğu zaman rəy bölməsində bildirməyi unutmayın. Növbəti məqalələrdə görüşənədək😊