React (baʼzanReact.js yokiReactJS)foydalanuvchi interfeyslarini ishlab chiqish uchunochiq manbaliJavaScript kutubxonasi[1].
ReactFacebook,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.
React Facebookda dasturiy taʼminot ishlab chiqaruvchisi Jordan Valke tomonidan yaratilgan. BungaPHP uchun komponentga asoslanganHTML fremvorki boʻlganXHP taʼsir koʻrsatdi[5]. React birinchi marta 2011-yilda Facebook yangiliklarida, keyinroq2012-yilda Instagramda[6] ishlatilgan. React manbasi 2013-yil may oyida „JSConf US“ konferensiyasida ochilgan.
React Native2015-yilfevral oyida Facebookning „React.js Conf“da eʼlon qilingan va2015-yilmart oyida ochiq manba hisoblanadi . Bu sizga React yordamidaAndroid,iOS va UWP ilovalarini ishlab chiqish imkonini beradi.
2017-yil18-aprelda Facebook React[7] ning qayta yozilgan va optimallashtirilgan versiyasi boʻlganReact Fiber eʼlon qilindi. React Fiber kelajakdagi barcha xususiyatlar va yaxshilanishlarni ishlab chiqish uchun asos boʻl[8].
Quyida JSX va JavaScript bilan HTMLda Reactdan foydalanishga misol keltirilgan.
<divid="myReactApp"></div><scripttype="text/babel">classGreeterextendsReact.Component{render(){return<h1>{this.props.greeting}</h1>}}ReactDOM.render(<Greetergreeting="Hello World!"/>,document.getElementById('myReactApp'));</script>
Greeter klassigreeting xususiyatini qabul qiluvchi React komponentidir.ReactDOM.render usuligreeting xususiyati"Hello World" ga oʻrnatilganGreeter sinfining (komponenti) namunasini koʻrsatadi va koʻrsatilgan komponentnimyReactApp identifikatori bilan DOM elementiga ichki element sifatida kiritadi.Veb-brauzerda koʻrsatilganda, natija quyidagicha boʻladi:
<divid="myReactApp"><h1>Hello World!</h1></div>
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, lekinqayta qoʻngʻiroq qilish funktsiyalari(callback function) orqali oʻzgarishlarg a olib kelishi mumkin. Ushbu mexanizm „xususiyatlar pastga, hodisalar yuqoriga“ deb ataladi.
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 uchunRedux 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 oddiyJavaScript[9] dan foydalanish ham mumkin. JSX PHP, XHP kengaytirish uchun Facebook tomonidan yaratilgan boshqa tilni .
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ʻpinchaAPI 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.React brauzerda HTMLni koʻrsatishdan koʻproq narsa uchun ishlatiladi. Masalan, Facebookda<canvas> tegida koʻrsatilgan dinamik grafikalar mavjud.Netflix vaPayPal server va mijozda bir xil HTMLni koʻrsatish uchun izomorf yuklamalardan foydalanadi.