React JS

React (ba'zan React.js yoki ReactJS ) foydalanuvchi interfeyslarini ishlab chiqish uchun ochiq manbali JavaScript kutubxonasi .

React Facebook, Instagram va individual ishlab chiquvchilar va korporatsiyalar hamjamiyati tomonidan ishlab chiqilgan va qoʻllab-quvvatlanadi.

React-dan bir sahifali saytlar va mobil ilovalarni ishlab chiqish uchun foydalanish mumkin. Uning maqsadi yuqori ishlash tezligi, soddaligi va keng imkoniyatga ega ekanligidir. Foydalanuvchi interfeyslarini ishlab chiqish uchun kutubxona sifatida React ko'pincha MobX, Redux va GraphQL kabi boshqa kutubxonalar bilan birga ishlatiladi.

Rivojlanish tarixi

React Facebookda dasturiy ta'minot ishlab chiqaruvchisi Jordan Valke tomonidan yaratilgan. Bunga PHP uchun komponentga asoslangan HTML fremvorki bo'lgan XHP ta'sir ko'rsatdi . React birinchi marta 2011-yilda Facebook yangiliklarida, keyinroq 2012-yilda Instagramda ishlatilgan. React manbasi 2013-yil may oyida «JSConf US» konferensiyasida ochilgan.

React Native 2015-yil fevral oyida Facebookning «React.js Conf»da e'lon qilingan va 2015-yil mart oyida ochiq manba hisoblanadi . Bu sizga React yordamida Android, iOS va UWP ilovalarini ishlab chiqish imkonini beradi.

2017-yil 18-aprelda Facebook React ning qayta yozilgan va optimallashtirilgan versiyasi boʻlgan React Fiber eʼlon qilindi. React Fiber kelajakdagi barcha xususiyatlar va yaxshilanishlarni ishlab chiqish uchun asos bo'l .

Foydalanish misoli

Quyida JSX va JavaScript bilan HTMLda Reactdan foydalanishga misol keltirilgan.

<div id="myReactApp"></div>

<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  } 

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>

Greeter klassi greeting xususiyatini qabul qiluvchi React komponentidir. ReactDOM.render usuli greeting xususiyati "Hello World" ga o'rnatilgan Greeter sinfining (komponenti) namunasini ko'rsatadi va ko'rsatilgan komponentni myReactApp identifikatori bilan DOM elementiga ichki element sifatida kiritadi. Veb-brauzerda ko'rsatilganda, natija quyidagicha bo'ladi:

<div id="myReactApp">
    <h1>Hello World!</h1>
</div>

Xususiyatlari

Bir tomonlama ma'lumotlarni uzatish

Xususiyatlar asosiy komponentlardan kichik komponentlarga uzatiladi. Komponentlar o'zgarmas xususiyatlar to'plami sifatida qabul qilinadi (inglizcha: immutable ) qiymatlari, shuning uchun komponent xususiyatlarni bevosita o'zgartira olmaydi, lekin qayta qo'ng'iroq qilish funktsiyalari orqali o'zgarishlarga olib kelishi mumkin. Ushbu mexanizm "xususiyatlar pastga, hodisalar yuqoriga" deb ataladi.

Virtual DOM

React virtual DOM dan foydalanadi (inglizcha: virtual DOM ). React DOM brauzerini optimal yangilash uchun interfeysning oldingi va joriy holati o'rtasidagi farqni hisoblash imkonini beruvchi xotiradagi kesh strukturasini yaratadi. Shunday qilib, dasturchi butun sahifa yangilangan deb hisoblab, sahifa bilan ishlashi mumkin, lekin kutubxona sahifaning qaysi komponentlarini yangilash kerakligini mustaqil ravishda hal qiladi.

Redux

React ko'pincha komponent holatlarini boshqarish uchun Redux bilan birgalikda ishlatiladi.

JSX

JavaScript XML (JSX) JavaScript sintaksisining kengaytmasi boʻlib, interfeys tuzilishini tavsiflash uchun HTML-ga oʻxshash sintaksisdan foydalanish imkonini beradi. Odatda, komponentlar JSX yordamida yoziladi, lekin oddiy JavaScript dan foydalanish ham mumkin. JSX PHP, XHP kengaytirish uchun Facebook tomonidan yaratilgan boshqa tilni .

Hayotiy aylanish usullari

Hayotiy tsikl usullari ishlab chiquvchiga komponentning hayot aylanishining turli bosqichlarida kodni ishga tushirish imkonini beradi. Masalan:

• shouldComponentUpdate - agar qayta chizish kerak bo'lmasa, false qaytarish orqali komponentni qayta chizilishining oldini olishga imkon beradi.
• componentDidMount - komponentni birinchi renderlashdan keyin chaqiriladi. Ko'pincha API orqali masofaviy manbadan ma'lumotlarni olish uchun ishlatiladi.
• componentWillUnmount - Komponent o'chirilganda chaqiriladi. Ko'pincha monitoring voqealariga obunani bekor qilish uchun ishlatiladi.
• render - bu hayot aylanishining eng muhim usuli. Har bir komponentda ushbu usul bo'lishi kerak. Odatda interfeysdagi ma'lumotlarni qayta chizish uchun komponent ma'lumotlari o'zgarganda chaqiriladi.

Brauzerda faqat HTML renderlashdan ko'proq

React brauzerda HTMLni ko'rsatishdan ko'proq narsa uchun ishlatiladi. Masalan, Facebookda <canvas> tegida ko'rsatilgan dinamik grafikalar mavjud. Netflix va PayPal server va mijozda bir xil HTMLni ko'rsatish uchun izomorf yuklamalardan foydalanadi.

Adabiyot

• Мардан Азат. React быстро. Веб-приложения на React, JSX, Redux и GraphQL. Andoza:СПб: «Питер», 2019 — 560 bet. ISBN 978-5-4461-0952-4. 
• Бэнкс Алекс, Порселло Ева. GraphQL: язык запросов для современных веб-приложений. Andoza:СПб: «Питер», 2019 — 240 bet. ISBN 978-5-4461-1143-5. 
• Бэнкс Алекс, Порселло Ева. React и Redux: функциональная веб-разработка. Andoza:СПб: «Питер», 2018 — 336 bet. ISBN 978-5-4461-0668-4. 
• Томас Марк Тиленс. React в действии. Andoza:СПб: «Питер», 2019 — 368 bet. ISBN 978-5-4461-0999-9. 
• Кирупа Чиннатамби. Изучаем React. Andoza:СПб: «Питер», 2019 — 368 bet. ISBN 978-5-04-098028-4.