React (baʼzan React.js yoki ReactJS) foydalanuvchi interfeyslarini ishlab chiqish uchun ochiq manbali JavaScript kutubxonasi[1].

React Facebook, Instagram va individual ishlab chiquvchilar va korporatsiyalar hamjamiyati[2][3][4] 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

tahrir

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[5]. React birinchi marta 2011-yilda Facebook yangiliklarida, keyinroq 2012-yilda Instagramda[6] 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[7] 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[8].

Foydalanish misoli

tahrir

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

tahrir

Bir tomonlama maʼlumotlarni uzatish

tahrir

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(callback function) orqali oʻzgarishlarg a olib kelishi mumkin. Ushbu mexanizm „xususiyatlar pastga, hodisalar yuqoriga“ deb ataladi.

Virtual DOM

tahrir

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.

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

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[9] dan foydalanish ham mumkin. JSX PHP, XHP kengaytirish uchun Facebook tomonidan yaratilgan boshqa tilni .

Qoʻllash usullari

tahrir

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

tahrir

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.

Manbalar

tahrir
  1. „React - A JavaScript library for building user interfaces.“. React. 2018-yil 19-iyulda asl nusxadan arxivlangan. Qaraldi: 2018-yil 7-aprel.
  2. Krill, Paul „React: Making faster, smoother UIs for data-driven Web apps“. InfoWorld (2014-yil 15-may). 2018-yil 12-iyunda asl nusxadan arxivlangan. Qaraldi: 2018-yil 24-may.
  3. Hemel, Zef „Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews“. InfoQ (2013-yil 3-iyun). 2018-yil 12-iyunda asl nusxadan arxivlangan. Qaraldi: 2018-yil 24-may.
  4. Dawson, Chris „JavaScript’s History and How it Led To ReactJS“. The New Stack (2014-yil 25-iyul). 2018-yil 12-iyunda asl nusxadan arxivlangan. Qaraldi: 2018-yil 24-may.
  5. „React (JS Library): How was the idea to develop React conceived and how many people worked on developing it and implementing it at Facebook?“. Quora.
  6. „Pete Hunt at TXJS“. 2017-yil 31-iyulda asl nusxadan arxivlangan. Qaraldi: 2018-yil 24-may.
  7. Frederic Lardinois. „Facebook announces React Fiber, a rewrite of its React framework“. TechCrunch (2017-yil 18-aprel). 2018-yil 14-iyunda asl nusxadan arxivlangan. Qaraldi: 2018-yil 24-may.
  8. „React Fiber Architecture“. Github. 2018-yil 10-mayda asl nusxadan arxivlangan. Qaraldi: 2017-yil 19-aprel.
  9. „React Without JSX - React“ (en). reactjs.org. 2018-yil 19-iyulda asl nusxadan arxivlangan. Qaraldi: 2018-yil 19-iyul.