Yangi boshlanuvchilar uchun React.JS, savdo robotlarini yozishda kutubxonadan foydalanish

Yangi boshlanuvchilar uchun React JS nima, bu nima, o’quv qo’llanmalari, o’rnatish, hujjatlar – savdo robotlarini yozishda React JS kutubxonasini qanday o’rnatish va undan foydalanish. Ko’pincha kompyuter mutaxassislari uchun ish e’lonlarida siz JavaScript kutubxonasida ko’nikmalaringiz borligini ko’rsatadigan talabni topishingiz mumkin. Ha, va ular React haqidagi bilimlarni nafaqat dasturiy ta’minot ishlab chiqaruvchilardan, balki tashqi dizaynni emas, balki saytning ichki rivojlanishi bilan shug’ullanadigan dasturchilardan ham kutishadi. Bu qanday kutubxona, u ishda qanday imkoniyatlar beradi va yangi boshlovchi qaerdan tanishishni boshlaydi? Keling, ushbu maqolada buni aniqlaymiz.

JavaScript kutubxonasi – Reaksiya: bu nima

React.JS – bu
Facebook onlayn ijtimoiy tarmog’i tomonidan saytlar va ilovalarning tashqi qobig’ini – foydalanuvchi o’zaro aloqada bo’ladigan interfeysni ishlab chiqish jarayonini yaxshilash va soddalashtirish maqsadida tashkil etilgan mashhur JavaScript dasturlash tilining kutubxonasi. Kutubxonaning asosiy xususiyati komponentlar va holatlardir. Komponent – bu loyihalashtirilayotgan tizimning ma’lum bir qismining ko’rinishi uchun mas’ul bo’lgan raqamli to’plamning bir qismi.

Eslatma! Bunday tarkibiy qismlarni joylashtirish mumkin.

Holat – interfeys tafsilotlari, shu jumladan uning tasviriy ko’rinishi haqidagi barcha ma’lumotlar to’plami. Misollardan foydalanib, biz nima ekanligini batafsilroq va aniq bilib olamiz. Quyidagi rasmda ba’zi katta komponentlar ko’rsatilgan – onlayn ijtimoiy tarmoqqa joylashtirish, umumiy ma’lumotlarga ega bo’lim va fotosuratlarni ko’rsatish. Har bir qism kichikroq komponentlarni o’z ichiga oladi, ular komponentlardir. Masalan, nashr matn, fotosuratlar, ma’lumotni nashr etuvchi foydalanuvchi nomi va boshqalarni o’z ichiga oladi. Rasmlar bo’limida alohida rasmlar, umumiy ma’lumotlar bo’limida qisqacha ma’lumotlar mavjud.
Ushbu komponentlarning (komponentlarning) har biri o’z holatiga ega. Ya’ni, umumiy ma’lumotlarga ega bo’lim turli xil qurilmalarda boshqacha ko’rinadi, “yoqdi” elementi bosilganda rangi o’zgaradi va yoqtirishlarning umumiy soni uchun javob beradigan raqam; nashr, o’z navbatida, matnni qisqartirishi yoki uni to’liq uzatishi mumkin.

Shunday qilib, React.JS ning moslashuvchanligi ifodalanadi – interfeys komponenti bir marta yoziladi va undan keyin unga barcha mumkin bo’lgan holatlar beriladi.

React kutubxonasi nima uchun kerak?

React.JS JS yoki HTML kodini qulay formatda yozish, uning nusxalarini shakllantirish va ingl. Bu yerdagi komponentlar maxsus tizim tilida yozilgan – JavaScript dasturlash tilining elementlarini va standartlashtirilgan HTML belgilash tilini o’z ichiga olgan JSX.
JSX da yozilgan kod juda aniq. Veb-brauzer ushbu tizim tilini tushunishi shart emasligi ham muhim – React.JS kodi JS ga uzatiladi, uni har qanday brauzer muammosiz qabul qiladi. Buning uchun kutubxonada yaratilgan narsalar ixtisoslashgan kompilyatorlar (bugungi kunda eng mashhurlaridan biri Babel js) orqali o’tkaziladi, ular kamroq ma’lum bo’lgan dasturlash tillaridagi kodlarni JavaScript ko’rinishlariga aylantiradi.
Avvaliga foydalanish tizimi juda mantiqsizdek tuyulishi mumkin, ammo bir muncha vaqt o’tgach, siz unga ko’nikasiz va mexanizm nima uchun shunday yaratilganini tushunasiz. JavaScript kutubxonasi bir qator kuchli afzalliklarga ega:

• tizim dasturlash tilini tanib olish taniqli JavaScript-ga qaraganda osonroq va shuning uchun kodni qo’llab-quvvatlash va undagi xatolarni bartaraf etish uchun bir necha baravar kamroq vaqt kerak bo’ladi (yangi kodlar va dasturlarni yozish tezligi mos ravishda oshadi);
• bu erda tarkibiy elementlarning qulay va amaliy tizimi qurilgan – kodning yozishning turli bosqichlarida va turli dasturlarda qo’llaniladigan, shuningdek, kontekstga qarab o’zgarib turadigan qismlarini takrorlash;
• har bir tarkibiy element faqat uning holatiga bo’ysunadi , shuning uchun amalda uning ishida to’satdan xato topilsa, koddagi kamchiliklarni tuzatish osonroq; noto’g’ri lahzalar yuzaga suzadi: to’g’ri ishlaydigan element, agar unga nisbatan noto’g’ri holat ishlatilmasa, bu rejimda barqaror ishlashda davom etadi.

Shunday qilib, React.JS kutubxonasi ko’p vaqtni tejash, kodni aniqroq qilish, ketma-ketlikni to’g’ri tartibda tartibga solish va yana katta bloklardan foydalanishi mumkin degan xulosaga kelishimiz mumkin. Ushbu afzalliklar foydalanuvchi interfeyslarini yaratish jarayonining narxini kamaytirishga, shuningdek, ushbu jarayonning vaqtini tezlashtirishga imkon beradi. JS va HTML dasturlash tilidan foydalanish ko’nikmalariga ega bo’lish, JSX tizimidan foydalanishni o’rganish oson – uni o’zlashtirish uchun bir necha kun.

Eslatma! Katta loyihalar bilan ishlashda, ko’p sonli dinamik sahifalarni yozish kerak bo’lganda kutubxonadan foydalanish oqilona. Kichik biznes saytiga bunday murakkabliklar kerak emas.

A dan Z gacha bo’lgan JS fundamental kursiga reaksiya: https://youtu.be/GNrdg3PzpJQ

Yangi boshlanuvchilar uchun tanishish: asosiy tushunchalar

Salom Dunyo!

Kutubxonaning birinchi sahifasiga kirishda foydalanuvchi kichik misol sifatida salomlash sarlavhasini ko’radi – “Salom dunyo!”.

JSX tizim tilining asoslari

JSX – bu tizim dasturlash tili bo’lib, taniqli JavaScript-ning kengaytmasi. U ikkita tilning kombinatsiyasini o’z ichiga oladi – JA dasturlash va standartlashtirilgan HTML belgilash tili. Ishlab chiquvchilar undan React foydalanuvchi interfeysi qanday ko’rinishini ko’rsatish uchun kontseptsiyani sozlash uchun foydalanadilar. JSX kutubxonaning “qismlarini” yaratadi.

JSX nima?

React kutubxonasi renderlashning mohiyati bevosita foydalanuvchi interfeysi mantig’iga bog’liq degan mantiqqa amal qiladi: hodisalar qanday qayta ishlanadi, ma’lum bir davrda holat qanday o’zgaradi va axborot taqdimotga qanday tayyorlanadi. JS kutubxonasidan tizim tilisiz foydalanish mumkin, lekin koʻplab ishlab chiquvchilar uni JavaScript kodidan yaratilgan foydalanuvchi interfeysi bilan ishlashda ravshanligi va aniqligi tufayli qimmatli deb bilishadi. Bundan tashqari, kengaytma React uchun noto’g’ri moment va xato bildirishnomalarini yaratishni osonlashtiradi.

Tizim tilida iboralarni shakllantirish

JSX jarayonda jingalak qavslar ichida har qanday yaxshi yozilgan JavaScript ifodalaridan foydalanish imkonini beradi.

JSX ham ifodadir . Manba kodi bayt kodlangandan so’ng, har qanday JSX ifodasi JavaScript toifasiga mo’ljallangan standart JS funksiya chaqiruviga aylanadi. Bundan shuni tushunish mumkinki, rasmiy dasturlash tilining tizim kengaytmasi if qo’llanmasi ichida va davrlar uchun ishlatilishi mumkin.

JSX – bu ob’ektlar Kengaytma bilan ifodalangan ob’ektlar React elementlari deb ataladi. Ular ishlab chiquvchi displeyda ko’rmoqchi bo’lgan natijani aniqlaydi. Kutubxona ushbu ob’ektlarni taniydi va ulardan Hujjat obyekti modelini yaratish va saqlash jarayonida foydalanadi.

Tafsilotlarni ko’rsatish

Tafsilotlar – bu React dasturlarini tashkil etuvchi ko’plab kichik qurilish bloklari.
Tafsilotlar – ishlab chiquvchi oxirida monitorda ko’rishni istagan rasm. Hujjat obyekti modeli elementlariga nisbatan kutubxona elementlari oddiy va koʻp resurslarni egallamaydi. Elementlar komponentlarning tarkibiy qismidir.

Komponentlar va rekvizitlar

Komponentlar UI ni mustaqil qismlarga ajratish imkonini beradi, ular bilan alohida ishlash osonroq. Ular birlashtirilishi va bir necha marta ishlatilishi mumkin. Ko’pincha komponentlarning funksionalligi JavaScript dasturlash tilining funksionalligiga o’xshaydi. Ular rekvizitlar deb ataladigan kirish ma’lumotlarini oladi va ishlab chiquvchi monitorda ko’rishni istagan ishlab chiqish modelini ko’rsatadigan React elementlarini qaytaradi.

Komponentlarning turlari: funktsional va sinf

Funktsiya sifatida kutubxona komponentiga murojaat qilish eng oson.
Komponentlar ES6 sinf formatida ham taqdim etilishi mumkin.

Qiziqarli! React kutubxonasi ushbu ikki turdagi komponentlarni o’xshash deb belgilaydi.

rekvizitlar

Proplar faqat o’qish uchun mo’ljallangan o’zgarmas ob’ektlardir. Shuning uchun komponent qaysi turga tegishli bo’lishidan qat’i nazar, o’z rekvizitlariga hech narsa yozmasligi kerak.

Holat va hayot aylanishi

Birinchidan, ishda davlatni qanday qilib to’g’ri qo’llash kerakligini aniqlaylik. Komponent holati haqida bilish kerak bo’lgan uchta muhim narsa bor:

1. Holatni to’g’ridan-to’g’ri o’zgartirmang, setState usulidan foydalaning. Esda tutingki, siz to’g’ridan-to’g’ri holatni o’zgartirishingiz mumkin bo’lgan yagona maydon konstruktordir.
2. Davlat yangilanishlari sinxron bo’lmasligi mumkin.
3. Axborot oqimi bir yo’nalishga ega. Komponentlarni qurishda ularning hech biri davlatning boshqa komponentga tayinlanganligini bilmaydi. U yoki bu mustaqil funktsional element qanday shakllanganligi muhim emas – funktsional yoki tasniflash vositasi yordamida. Bu “pastki oqim” ma’lumotlar oqimi deb ataladi. Har doim ba’zi bir element uchun holat aniqlanadi va bu holatning tarkibiy birlashmalari faqat ierarxik tartibda “pastda” joylashgan qismlarga ta’sir qilishi mumkin.

Odatda, davlat “mahalliy”, “ichki” yoki yashirin deb ataladi. U faqat funktsional elementning o’ziga ko’rinadi va Reactning boshqa qismlariga ko’rinmaydi. Kutubxona dasturlarida mustaqil funksional elementning ma’lum bir holatga ega bo’lishi yoki yo’qligi bu qismning ichki rivojlanishi bo’lib, vaqt o’tishi bilan o’zgarishi mumkin. Bundan tashqari, ishda siz tarkibiy qismlarni davlat bilan va holda birlashtirishingiz mumkinligi qiziq.

Hodisa tahlili

React komponentlarida hodisalarni tahlil qilish jarayoni hujjat ob’ekti modeli elementlaridagi hodisalarni boshqarishga o’xshaydi. Biroq, ularni bir-biridan ajratib turadigan bir nechta xususiyatlar mavjud:

1. JavaScript kutubxonasidagi voqealar standartidan boshqa uslubda nomlanadi.
2. Tizim kengaytirilgan dasturlash tilidan foydalanib, ishlab chiquvchi satr o’rniga voqea ishlov beruvchisi sifatida kichik dasturni o’tkazadi.

Elementlarni shartli ko’rsatish

JavaScript kutubxonasi elementlarni ishlab chiqish mantiqini mustaqil komponentlarga ajratish imkonini beradi. Ayni paytda ular qaysi holatga ega ekanligiga qarab, ular umumiy ko’rinish uchun ko’rsatilishi yoki yashirin bo’lishi mumkin. Elementlarni shartli ko’rsatish JavaScript dasturlash tiliga asoslangan shartli ifodalar bilan bir xil printsip asosida ishlaydi. Ba’zan shunday bo’ladiki, kutubxona davlatning ba’zi elementlarni yashirish yoki ko’rsatishga qanday ta’sir qilishini tushuntirishni talab qiladi. Bu erda shartli JS yordamchisi yoki if ga o’xshash iboralardan foydalanish mantiqiyroq.

Komponentlarni o’zgartirish

O’zgaruvchilarga reaksiya kutubxonasi elementlari qo’shilishi mumkin. Bu amaliy yechim bo’lsa, ba’zi bir shart komponentning qaysidir qismini chizish kerakligini ko’rsatsa yoki uning ma’nosi yo’q, qolgan qismi esa o’zgarishsiz qoladi.

Ro’yxatlar va kalitlar

Ushbu bo’lim bir nechta komponentlarni o’z ichiga oladi:

1. Bir nechta elementlarni chizish . Foydalanuvchi elementlar to‘plamini shakllantirishi va jingalak qavslar yordamida tizim dasturlash tiliga joylashtirishi mumkin.
2. Elementlarning elementar ro’yxati . Ko’pincha foydalanuvchilar va ishlab chiquvchilar ro’yxatlarni to’g’ridan-to’g’ri tarkibiy qism ichida o’zgartiradilar.

Kalitlar

React JavaScript kutubxonasidagi kalit komponentlar roʻyxatini yaratishda kiritilishi kerak boʻlgan maxsus vositani bildiradi. Kalitlar JavaScript kutubxonasiga qaysi elementlar sozlangan, qoʻshilgan yoki oʻchirilganligini aniqlashga yordam beradi. React ma’lum vaqt o’tgandan keyin tizimli ma’lumotlarning tarkibiy qismlarini o’zaro bog’lashi uchun ularni belgilash muhimdir.

Shakllar

JS kutubxonasida standartlashtirilgan belgilash tili elementlari hujjat obyekti modeli komponentlariga qaraganda biroz boshqacha ishlaydi, chunki shakl elementlari dastlab yashirin holatga ega.

Boshqariladigan elementlar

Standartlashtirilgan belgilash tilida kiritish , tanlash , matn maydoni kabi shakllar ishlab chiquvchi yangi maʼlumotlarni kiritganda oʻz holatini saqlab qoladi va uni yangilaydi. React.js holati har doim boshqariladigan kompozitsion elementdagi kiritish maydonlarining qiymatini belgilaydi. Garchi bu foydalanuvchi original berilgan koddan bir oz ko’proq yozishi kerakligini ko’rsatsa ham, endi bu qiymatni foydalanuvchi interfeysining boshqa qismlariga o’tkazish mumkin.

Davlatning yuksalishi

Davlat ko’tarish – bu har bir ishlab chiquvchi bilishi va ish jarayonida qo’llashi kerak bo’lgan standartlashtirilgan shablondir. Undan foydalanish murakkab va odatda foydasiz davlat boshqaruvi modellarini yo’q qiladi.

Nima uchun davlatning yuksalishini nazorat qilish juda zarur?

Buni talab qiladigan qismlar uchun holatni o’tgan komponentlar darajasiga ko’tarish barcha elementlarning davlatda ishtirok etishi uchun zarurdir. Barqaror holat darajasi uni unga tayanadigan barcha komponentlar orasida taqsimlashni osonlashtiradi.

Tarkibi va merosga qarshi

React.js kuchli kompozitsion modelni o’z ichiga oladi, shuning uchun elementlar o’rtasida avval yozilgan kodni qayta ishlatish uchun meros o’rniga qismlardan bir butun yaratish jarayonidan foydalanish tavsiya etiladi. Shunday qilib, rekvizitlar va tarkibiy qismlardan yagona butun kompozitsiyani yaratish qobiliyati ishlab chiquvchiga elementning qobig’i va xatti-harakatlarini o’ziga xos va xavfsiz tarzda yaratish uchun zarur bo’lgan moslashuvchanlikni ta’minlaydi.

Eslatma! Komponent qismlari bir-biriga bog’liq bo’lmagan rekvizitlarni, shu jumladan kutubxonalar yoki funktsiyalarni tashkil etuvchi elementar qismlarni olishi mumkin.

Agar siz ikkinchi yoki uchinchi marta komponentlar bilan ishlash uchun ko’rinmaydigan funksiyadan foydalanishingiz kerak bo’lsa, uni alohida JS moduliga torting. Uni komponentga o’tkazing va yaratilgan funksiyadan qo’shimcha kengaytirmasdan foydalaning. React yoki Vue yoki Angular, nimani tanlash kerak: https://youtu.be/Nm8GpLCAgwk

React.js tamoyillari

JavaScript kutubxonasining butun falsafasi React qoʻllanmasida yashiringan. Ko’rinishidan, bu uzoq va unchalik katta ahamiyatga ega emas, ammo ko’pchilik foydalanuvchilar o’qishdan keyin hamma narsa joyiga tushib qolganini da’vo qilishadi. Hujjatlar ancha eski, ammo baribir katta ahamiyatga ega va ahamiyatli –
https://ru.reactjs.org/docs/thinking-in-react.html . React js qoʻllanmasi https://ru.reactjs.org/tutorial/tutorial.html

React.js kutubxonasining funksionalligi

JavaScript kutubxonasidan foydalanib, foydalanuvchi barcha e’tiborini bevosita UI ishlab chiqish jarayoniga va dasturning tarkibiy qismlariga qaratish imkoniyatiga ega bo’ladi, eng kamida, yozma kodning shakllanishi va mumkin bo’lgan kamchiliklari bilan chalg’itadi. Kutubxona sizga dasturlarni tezroq ishlab chiqish imkonini beradi, tarkibiy qismlarni va butun loyiha jarayonini sozlash va tahrirlashni osonlashtiradi. Shunday qilib, React.js global tarmoqdagi aloqa, UI, dastur holatini boshqarish va boshqa murakkab masalalarni hal qilish qobiliyati uchun javob beradigan elementlarni o’z ichiga oladi. Kutubxona quyidagi funktsional xususiyatlarga ham ega:

1. Amaliylik . React.js kichiklashtirilgan formatda mavjud. Ushbu ixcham paketni aniq sozlash shart emas. U allaqachon kodni ajratish xususiyatini o’z ichiga oladi, bu saytning brauzer versiyasini ochish uchun ketadigan vaqtni kamaytiradi, chunki bu parametr komponentlarni bir vaqtning o’zida ko’rsatishni oldini oladi.
2. Nasosli ekotizim va muvofiqlik . Kutubxonada boshqa saytlar tomonidan qo’llab-quvvatlanadigan ko’plab vositalar mavjud bo’lib, bu foydalanuvchiga har qanday maqsad uchun yangi murakkab dasturlarni ishlab chiqish imkonini beradi.
3. To’liq funksionallik . JavaScript kutubxonasining asosiy afzalligi shundaki, platformaning barcha yangi versiyalari eskilarining talablariga javob beradi, shuning uchun ham eski, ham yangilangan versiyadan foydalanishingiz mumkin, ularning barchasi qo’llab-quvvatlanadi va bugungi kun uchun dolzarbdir. Ilgari chiqarilgan versiyalar so’nggi yangilanishlardan keyin eskirmaydi.

Amaliy foydalanish

Kutubxonaning asosiy sahifasida, foydalanuvchilar uchun ko’rsatmalarda React-dan amalda foydalanishning bir nechta yorqin misollari mavjud. Siz ularni qo’lda tuzatishingiz va ularni ishga tushirishga harakat qilishingiz mumkin. Agar siz yangi foydalanuvchi bo’lsangiz va kutubxonaning mohiyati va mantig’ini tushunmasangiz ham, kodni o’zingizning xohishingizga ko’ra sozlang va natijani ko’ring.

JavaScript-da savdo robotlarini yozishda Reactning amaliy qo’llanilishi

Shuni tushunish kerakki, ishlab chiquvchi JS ni dasturlashtirmaydi, balki skriptlar (skriptlar) yozadi. shuning uchun kutubxonadan foydalanib, ishlab chiquvchi savdo maqsadlarida foydalaniladigan keyingi savdo roboti uchun kod yozishi mumkin, shuningdek, ushbu platforma asosida o’zining tashqi ko’rinishini loyihalashda davom etishi mumkin. Aslida, savdo uchun savdo roboti ham dastur bo’lib, uning katta qismi React.js yordamida ishlab chiqilmoqda. Biroq, ba’zi funktsiyalar va botning ichki qismi hali ham bunga mos keladigan vositalarni taqdim etadigan boshqa saytlarda bajarilishi kerak bo’ladi.

GitHub va React.js

GitHub – bu loyihalarning barcha versiyalarini o’z ichiga olgan platforma. Foydalanuvchi xostingni ulaydi, rasmiy GitHub veb-saytida ro’yxatdan o’tish jarayonidan o’tadi va keyin Git-dan barcha fayllarni uzatadigan onlayn repozitoriy yaratadi.
Git bugungi kunda eng ommabop va tegishli loyiha versiyasini boshqarish xizmati, GitHub esa masofaviy kodlar omboridir.

Malumot! Faqat ruxsati bilan tegishli havolani olgan foydalanuvchilar fayllarni tahrirlash va yuklab olish huquqiga ega.

Hujjatlar

JavaScript kutubxonasi boʻyicha barcha oʻquv qoʻllanmalari va soʻnggi materiallar eng soʻnggi yangilanish bilan yangilangan. Ishlab chiquvchilar, shuningdek, kutubxonaning alohida sahifasida joylashtirilgan hujjatlarning eski versiyalarini umumiy o’qish uchun tuzadilar va joylashtiradilar. Shu sababli, yangi boshlanuvchilar uchun saytni boshqarish ko’nikmalarini egallash osonroq bo’ladi: eski va yangi material – hamma narsa shu erda, kirish hamma uchun bepul.

Eslatma! Qo’llanmalarni o’qishni unutmang. Hech bo’lmaganda bir ko’z tashlang – tushunarsiz bo’lib tuyulgan narsalarning aksariyati allaqachon joyiga tushadi.

React kutubxonasi bugungi kunda mashhur va dolzarb platforma hisoblanadi. Uning ko’p qirraliligi ishlab chiquvchilarga yanada sifatli va qisqa vaqt ichida loyihalarni amalga oshirish imkonini beradi. Bundan tashqari, platformani bilish va undan foydalanish ko’nikmalariga ega bo’lish mutaxassisni mehnat bozorida talabni oshiradi.