React JS sahifasining manbasini koʻrish

'''React''' (ba'zan '''React.js''' yoki '''ReactJS''' ) [[Foydalanuvchi interfeysi|foydalanuvchi interfeyslarini]] ishlab chiqish uchun [[Ochiq manbali dastur|ochiq manbali]] [[JavaScript]] kutubxonasi <ref name="react">{{Veb manbasi |url=https://reactjs.org |sarlavha=React - A JavaScript library for building user interfaces. |ish=React |qaralgan sana=2018-04-07 |arxivsana=2018-07-19 |arxivurl=https://web.archive.org/web/20180719143829/https://reactjs.org/}}</ref>.

React [[Facebook]], [[Instagram]] va individual ishlab chiquvchilar va korporatsiyalar hamjamiyati <ref>{{Veb manbasi |url=https://www.infoworld.com/article/2608181/javascript/react--making-faster--smoother-uis-for-data-driven-web-apps.html |sarlavha=React: Making faster, smoother UIs for data-driven Web apps |familiya=Krill |ism=Paul |sana=2014-05-15 |ish=[[InfoWorld]] |qaralgan sana=2018-05-24 |arxivsana=2018-06-12 |arxivurl=https://web.archive.org/web/20180612141516/https://www.infoworld.com/article/2608181/javascript/react--making-faster--smoother-uis-for-data-driven-web-apps.html}}</ref><ref>{{Veb manbasi |url=https://www.infoq.com/news/2013/06/facebook-react |sarlavha=Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews |familiya=Hemel |ism=Zef |sana=2013-06-03 |ish=InfoQ |qaralgan sana=2018-05-24 |arxivsana=2018-06-12 |arxivurl=https://web.archive.org/web/20180612141547/https://www.infoq.com/news/2013/06/facebook-react}}</ref><ref>{{Veb manbasi |url=https://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/ |sarlavha=JavaScript’s History and How it Led To ReactJS |familiya=Dawson |ism=Chris |sana=2014-07-25 |ish=The New Stack |qaralgan sana=2018-05-24 |arxivsana=2018-06-12 |arxivurl=https://web.archive.org/web/20180612142109/https://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/}}</ref> 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 <ref>{{Veb manbasi |sarlavha=React (JS Library): How was the idea to develop React conceived and how many people worked on developing it and implementing it at Facebook? |url=https://www.quora.com/React-JS-Library/How-was-the-idea-to-develop-React-conceived-and-how-many-people-worked-on-developing-it-and-implementing-it-at-Facebook/answer/Bill-Fisher-17 |ish=Quora}}</ref>. React birinchi marta 2011-yilda Facebook yangiliklarida, keyinroq [[2012]]-yilda Instagramda <ref>{{Veb manbasi |url=https://www.youtube.com/watch?v=A0Kj49z6WdM |sarlavha=Pete Hunt at TXJS |qaralgan sana=2018-05-24 |arxivsana=2017-07-31 |arxivurl=https://web.archive.org/web/20170731061304/https://www.youtube.com/watch?v=A0Kj49z6WdM}}</ref> ishlatilgan. React manbasi 2013-yil may oyida «JSConf US» konferensiyasida ochilgan.

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

[[2017|2017-yil]] [[18-aprel|18-aprelda]] Facebook React <ref>{{Yangiliklar manbasi |last=Frederic Lardinois |date=2017-04-18 |title=Facebook announces React Fiber, a rewrite of its React framework |publisher=TechCrunch |url=https://techcrunch.com/2017/04/18/facebook-announces-react-fiber-a-rewrite-of-its-react-framework/ |access-date=2018-05-24 |archive-url=https://web.archive.org/web/20180614172053/https://techcrunch.com/2017/04/18/facebook-announces-react-fiber-a-rewrite-of-its-react-framework/ |archive-date=2018-06-14}}</ref> 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 <ref>{{Veb manbasi |sarlavha=React Fiber Architecture |url=https://github.com/acdlite/react-fiber-architecture |ish=Github |qaralgan sana=2017-04-19 |arxivsana=2018-05-10 |arxivurl=https://web.archive.org/web/20180510140634/https://github.com/acdlite/react-fiber-architecture}}</ref>.

== Foydalanish misoli ==
Quyida JSX va JavaScript bilan HTMLda Reactdan foydalanishga misol keltirilgan.<syntaxhighlight lang="html">
<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>
</syntaxhighlight><code>Greeter</code> klassi <code>greeting</code> xususiyatini qabul qiluvchi React komponentidir. <code>ReactDOM.render</code> usuli <code>greeting</code> xususiyati <code>"Hello World"</code> ga o'rnatilgan <code>Greeter</code> sinfining (komponenti) namunasini ko'rsatadi va ko'rsatilgan komponentni <code>myReactApp</code> identifikatori bilan DOM elementiga ichki element sifatida kiritadi.

Veb-brauzerda ko'rsatilganda, natija quyidagicha bo'ladi:<syntaxhighlight lang="html">
<div id="myReactApp">
    <h1>Hello World!</h1>
</div>
</syntaxhighlight>

== Xususiyatlari ==

=== Bir tomonlama ma'lumotlarni uzatish ===
Xususiyatlar asosiy komponentlardan kichik komponentlarga uzatiladi. Komponentlar o'zgarmas xususiyatlar to'plami sifatida qabul qilinadi ({{Lang-en|immutable}} ) qiymatlari, shuning uchun komponent xususiyatlarni bevosita o'zgartira olmaydi, lekin [[Qayta qo'ng'iroq (dasturlash)|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 ({{Lang-en|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]] <ref>{{Veb manbasi |url=https://reactjs.org/docs/react-without-jsx.html |sarlavha=React Without JSX - React |nashriyot=reactjs.org |til=en |qaralgan sana=2018-07-19 |arxivsana=2018-07-19 |arxivurl=https://web.archive.org/web/20180719143132/https://reactjs.org/docs/react-without-jsx.html}}</ref> dan foydalanish ham mumkin. JSX PHP, {{Tillararo havola|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:

* <code>shouldComponentUpdate</code> - agar qayta chizish kerak bo'lmasa, <code>false</code> qaytarish orqali komponentni qayta chizilishining oldini olishga imkon beradi.
* <code>componentDidMount</code> - komponentni birinchi renderlashdan keyin chaqiriladi. Ko'pincha [[API]] orqali masofaviy manbadan ma'lumotlarni olish uchun ishlatiladi.
* <code>componentWillUnmount</code> - Komponent o'chirilganda chaqiriladi. Ko'pincha monitoring voqealariga obunani bekor qilish uchun ishlatiladi.
* <code>render</code> - 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 <code><canvas></code> tegida ko'rsatilgan dinamik grafikalar mavjud. [[Netflix]] va [[PayPal]] server va mijozda bir xil HTMLni ko'rsatish uchun izomorf yuklamalardan foydalanadi.

== Adabiyot ==

* {{Kitob manbasi/Ruscha|автор=Мардан Азат|часть=|заглавие=React быстро. Веб-приложения на React, JSX, Redux и GraphQL|оригинал=|издание=|место={{СПб}}|издательство=«[[Питер (издательство)|Питер]]»|год=2019|страницы=560|isbn=978-5-4461-0952-4}}
* {{Kitob manbasi/Ruscha|автор=Бэнкс Алекс, Порселло Ева|часть=|заглавие=GraphQL: язык запросов для современных веб-приложений|оригинал=|издание=|место={{СПб}}|издательство=«[[Питер (издательство)|Питер]]»|год=2019|страницы=240|isbn=978-5-4461-1143-5}}
* {{Kitob manbasi/Ruscha|автор=Бэнкс Алекс, Порселло Ева|часть=|заглавие=React и Redux: функциональная веб-разработка|оригинал=|издание=|место={{СПб}}|издательство=«[[Питер (издательство)|Питер]]»|год=2018|страницы=336|isbn=978-5-4461-0668-4}}
* {{Kitob manbasi/Ruscha|автор=Томас Марк Тиленс|часть=|заглавие=React в действии|оригинал=|издание=|место={{СПб}}|издательство=«[[Питер (издательство)|Питер]]»|год=2019|страницы=368|isbn=978-5-4461-0999-9}}
* {{Kitob manbasi/Ruscha|автор=Кирупа Чиннатамби|часть=|заглавие=Изучаем React|оригинал=|издание=|место={{СПб}}|издательство=«[[Эксмо (издательство)|Питер]]»|год=2019|страницы=368|isbn=978-5-04-098028-4}}

== Eslatmalar ==
{{Manbalar|2}}
[[Turkum:Javascript]]
[[Turkum:JavaScript kutubxonalari]]
[[Turkum:Dasturlash]]