Сауда роботтарын жазу кезінде кітапхананы пайдалана отырып, бастаушы манекендерге арналған React.JS

Жаңадан бастаушыларға арналған React JS дегеніміз не, бұл не, оқулықтар, орнату, құжаттама – сауда роботтарын жазу кезінде React JS кітапханасын орнату және пайдалану жолы. Көбінесе компьютер мамандарына арналған жұмыс туралы хабарландырулардан сіз JavaScript кітапханасында дағдыларыңыз бар деген талапты таба аласыз. Иә, олар React туралы білімді тек бағдарламалық жасақтаманы әзірлеушілерден ғана емес, сонымен қатар сыртқы дизайнмен емес, сайттың ішкі дамуымен айналысатын бағдарламашылардан күтеді. Бұл қандай кітапхана, ол жұмыста қандай мүмкіндіктер береді және жаңадан бастаушы танысуды қайдан бастайды? Оны осы мақалада анықтап көрейік.

JavaScript кітапханасы – Реакция: бұл не

React.JS – бұл сайттар мен қолданбалардың сыртқы қабықшасын – пайдаланушы өзара әрекеттесетін интерфейсті әзірлеу процесін жақсарту және жеңілдету мақсатында Facebook онлайн әлеуметтік желісімен құрылған танымал JavaScript бағдарламалау тілінің кітапханасы
. Кітапхананың негізгі ерекшелігі – құрамдас бөліктер мен күйлер. Құрамдас бөлік – жобаланатын жүйенің белгілі бір бөлігінің пайда болуына жауап беретін цифрлық жинақтың бөлігі.

Назар аударыңыз! Мұндай құрамдас бөліктерді кірістіруге болады.

Күй – интерфейстің егжей-тегжейлері туралы барлық деректердің жиынтығы, оның ішінде оның бейнеленуі. Мысалдарды пайдалана отырып, біз не екенін толығырақ және анық білеміз. Төмендегі суретте кейбір үлкен құрамдас бөліктер көрсетілген – желідегі әлеуметтік желіге жариялау, жалпы ақпарат бар бөлім және фотосуреттерді көрсету. Әрбір бөлік құрамдас бөліктер болып табылатын кішірек құрамдастарды қамтиды. Мысалы, жарияланымда мәтін, фотосуреттер, ақпаратты жариялайтын пайдаланушының аты және т.б. болады. Кескін бөлімі жеке суреттерді, ал жалпы ақпарат бөлімі қысқаша ақпаратты қамтиды.
Бұл компоненттердің (компоненттердің) әрқайсысының күйі болады. Яғни, жалпы ақпараты бар бөлім әртүрлі құрылғыларда басқаша көрінеді, «ұнату» элементі басқан кезде түсін өзгертеді және ұнатулардың жалпы санына жауап беретін сан; басылым, өз кезегінде, мәтінді қысқартуы немесе оны толығымен беруі мүмкін.

Осылайша, React.JS икемділігі көрінеді – интерфейс компоненті бір рет жазылады, содан кейін оған барлық мүмкін күйлер беріледі.

React кітапханасы не үшін қажет?

React.JS ыңғайлы форматта JS немесе HTML кодын жазу, оның көшірмелерін қалыптастыру және оны көрнекі ету мүмкін болатын нұсқалардың бірі болып табылады. Мұндағы құрамдас бөліктер арнайы жүйелік тілде жазылған – JavaScript бағдарламалау тілі элементтерін және стандартталған HTML белгілеу тілін қамтитын JSX.
JSX-де жазылған код өте нақты. Сондай-ақ, веб-браузердің бұл жүйе тілін түсінуі қажет емес – React.JS коды JS-ге тасымалданады, оны кез келген браузер еш қиындықсыз қабылдайды. Мұны істеу үшін кітапханада жасалған нәрсе белгілі емес бағдарламалау тілдеріндегі кодтарды JavaScript нұсқаларына түрлендіретін мамандандырылған компиляторлар (бүгінгі таңда ең танымалдарының бірі – Babel js) арқылы беріледі.
Басында пайдалану жүйесі өте қисынсыз болып көрінуі мүмкін, бірақ біраз уақыттан кейін сіз оған үйренесіз және механизмнің неге осылай жасалғанын түсінесіз. JavaScript кітапханасының бірқатар күшті артықшылықтары бар:

• белгілі JavaScript тіліне қарағанда жүйелік бағдарламалау тілін тану оңай , демек, кодты қолдау және ондағы қателерді жою бірнеше есе аз уақытты қажет етеді (соған сәйкес жаңа кодтар мен бағдарламаларды жазу жылдамдығы артады);
• мұнда құрамдас элементтердің ыңғайлы және практикалық жүйесі салынған – кодтың жазудың әртүрлі кезеңдерінде және әртүрлі бағдарламаларда қолданылатын қайталанатын бөліктері, сондай-ақ контекстке байланысты өзгереді;
• әрбір құраушы элемент тек оның күйіне бағынады , сондықтан оның жұмысында іс жүзінде кенеттен қате табылса, кодтағы кемшіліктерді түзету оңайырақ; дұрыс емес сәттер бетіне қалқып шығады: дұрыс жұмыс істейтін элемент, әрине, оған қатысты дұрыс емес күй пайдаланылмаса, осы режимде тұрақты жұмысын жалғастырады.

Осылайша, React.JS кітапханасы көп уақытты үнемдей алады, кодты нақтырақ етеді, дәйектілікті дұрыс ретпен ұйымдастырады және үлкен блоктарды қайтадан пайдалана алады. Бұл артықшылықтар пайдаланушы интерфейстерін құру процесінің құнын азайтуға, сондай-ақ дәл осы процестің уақытын жылдамдатуға мүмкіндік береді. JS және HTML бағдарламалау тілін пайдалану дағдыларына ие болу, JSX жүйесін пайдалануды үйрену оңай – оны меңгеруге бірнеше күн қалды.

Назар аударыңыз! Үлкен жобалармен жұмыс істегенде, динамикалық беттердің көп санын жазу қажет болғанда кітапхананы пайдалану ұтымды. Шағын бизнес сайтына мұндай күрделілік қажет емес.

A-дан Я-ға дейінгі JS негізгі курсына реакция жасаңыз: https://youtu.be/GNrdg3PzpJQ

Жаңадан бастаушылар үшін танысу: негізгі түсініктер

Сәлем Әлем!

Кітапхананың бірінші бетіне кірген кезде пайдаланушы шағын мысал ретінде сәлемдесу тақырыбын көреді – «Сәлем әлем!».

JSX жүйе тілінің негіздері

JSX – жүйелік бағдарламалау тілі, белгілі JavaScript кеңейтімі. Ол екі тілдің тіркесімін қамтиды – JA бағдарламалау және стандартталған HTML белгілеу тілі. Әзірлеушілер оны React пайдаланушы интерфейсі қалай көрінетінін көрсету үшін тұжырымдаманы реттеу үшін пайдаланады. JSX кітапхананың «бөліктерін» жасайды.

JSX дегеніміз не?

React кітапханасы рендеринг мәні пайдаланушы интерфейсінің логикасына тікелей байланысты деген логиканы ұстанады: оқиғалар қалай өңделеді, белгілі бір кезеңде күй қалай өзгереді және ақпарат ұсынуға қалай дайындалады. JS кітапханасын оның жүйелік тілінсіз пайдалануға болады, бірақ көптеген әзірлеушілер оны JavaScript кодынан жасалған пайдаланушы интерфейсімен жұмыс істеу кезінде оның анықтығы мен нақтылығына байланысты құнды деп санайды. Бұған қоса, кеңейтім React-ке жарамсыз сәт пен қате туралы хабарландыруларды жасауды жеңілдетеді.

Жүйе тіліндегі өрнектердің қалыптасуы

JSX процесте бұйра жақшалар ішінде кез келген жақсы жазылған JavaScript өрнектерін пайдалануға мүмкіндік береді.

JSX сонымен қатар өрнек болып табылады Бастапқы код байт кодталғаннан кейін, кез келген JSX өрнегі JavaScript санатына бағытталған стандартты JS функциясының шақыруына айналады. Бұдан түсінуге болады, ресми бағдарламалау тілінің жүйелік кеңейтімі if нұсқаулығының ішінде және кезеңдерде қолданылуы мүмкін.

JSX – нысандар Кеңейтіммен ұсынылған нысандар реакция элементтері деп аталады. Олар әзірлеуші ​​дисплейде көргісі келетін нәтижені түсіндіреді. Кітапхана бұл нысандарды таниды және оларды құжат нысанының үлгісін жасау және қолдау процесінде пайдаланады.

Мәліметтерді көрсету

Мәліметтер – бұл React бағдарламаларын құрайтын көптеген кішігірім құрылыс блоктары.
Мәліметтер – әзірлеуші ​​мониторда соңында көргісі келетін сурет. Құжат нысанының үлгісі элементтерімен салыстырғанда, кітапхана элементтері қарапайым және көп ресурстарды алмайды. Элементтер – құрамдас бөліктердің құрамдас бөліктері.

Компоненттер мен реквизиттер

Құрамдас бөліктер пайдаланушы интерфейсін бөлек жұмыс істеуге оңай болатын тәуелсіз бөліктерге бөлуге мүмкіндік береді. Оларды біріктіріп, бірнеше рет қолдануға болады. Көп жағдайда компоненттердің функционалдығы JavaScript бағдарламалау тілінің функционалдығына ұқсас. Олар реквизиттер деп аталатын кіріс ақпаратын алады және әзірлеуші ​​мониторда көргісі келетін әзірлеу үлгісін көрсететін React элементтерін қайтарады.

Компоненттердің сорттары: функционалды және класс

Кітапхана компонентіне функция ретінде сілтеме жасау оңай.
Компоненттерді ES6 сынып пішімінде де көрсетуге болады.

Қызықты! React кітапханасы компоненттердің осы екі түрін ұқсас деп анықтайды.

реквизиттер

Тапсырмалар тек оқуға арналған өзгермейтін нысандар болып табылады. Сондықтан компонент қай түрге жататынына қарамастан, оның тіректеріне ештеңе жазбауы керек.

Күй және өмірлік цикл

Алдымен, мемлекетті жұмыста қалай дұрыс қолдану керектігін анықтайық. Компонент күйі туралы білу керек үш маңызды нәрсе бар:

1. Күйді тікелей өзгертпеңіз, setState әдісін пайдаланыңыз. Күйді тікелей өзгертуге болатын жалғыз аймақ конструктор екенін есте сақтаңыз.
2. Күй жаңартулары синхронды болмауы мүмкін.
3. Ақпарат ағынының бір бағыты бар. Құрамдас құрылыста олардың ешқайсысы күйдің басқа құрамдасқа берілгенін білмейді. Бұл немесе басқа тәуелсіз функционалды элементтің қалай құрылғаны маңызды емес – функционалдық немесе жіктеу құралын пайдалану. Бұл «төменгі» деректер ағыны деп аталады. Күй әрқашан қандай да бір элемент үшін анықталады және бұл күйдің құрылымдық ассоциациялары иерархиялық тәртіпте «төменде» орналасқан бөліктерге ғана әсер ете алады.

Әдетте, мемлекет «жергілікті», «ішкі» немесе жасырын деп аталады. Ол функционалдық элементтің өзіне ғана көрінеді және React басқа бөліктеріне көрінбейді. Кітапхана бағдарламаларында тәуелсіз функционалды элементтің белгілі бір күйге ие болуы немесе берілмеуі осы бөліктің уақыт өте өзгеруі мүмкін ішкі дамуы болып табылады. Жұмыста күйі бар және күйсіз компоненттерді біріктіруге болатыны да қызық.

Оқиғаны талдау

React компоненттеріндегі оқиғаларды талдау процесі құжат нысанының үлгі элементтеріндегі оқиғаларды өңдеуге ұқсас. Дегенмен, оларды бір-бірінен ажырататын бірнеше белгілер бар:

1. JavaScript кітапханасындағы оқиғалар стандарттыдан басқа стильде аталады.
2. Жүйенің кеңейтілген бағдарламалау тілін пайдалана отырып, әзірлеуші ​​жолдың орнына оқиға өңдеушісі ретінде ішкі бағдарламаны жібереді.

Элементтерді шартты түрде көрсету

JavaScript кітапханасы элементтерді өңдеу логикасын тәуелсіз компоненттерге бөлуге мүмкіндік береді. Олар қазіргі уақытта қандай күйге ие болғанына байланысты жалпы көрсету үшін немесе жасырын түрде көрсетілуі мүмкін. Элементтерді шартты түрде көрсету JavaScript бағдарламалау тіліне негізделген шартты өрнектермен бірдей принцип бойынша жұмыс істейді. Кейде кітапхана күйдің кейбір элементтерді жасыруға немесе көрсетуге қалай әсер ететінін түсіндіруді талап етеді. Мұнда шартты JS көмекшісін немесе if дегенге ұқсас өрнектерді пайдалану қисындырақ.

Компоненттерді өзгерту

Реакциялық кітапхана элементтерін айнымалыларға қосуға болады. Бұл қандай да бір шарт құрамдас бөліктің қандай да бір бөлігін салу керек пе немесе мағынасы жоқ па, ал қалған бөлігі өзгеріссіз қалатын болса, практикалық шешім.

Тізімдер мен кілттер

Бұл бөлім бірнеше компоненттерді қамтиды:

1. Бірнеше элементтерді салу . Пайдаланушы элементтер жиынын құра алады және бұйра жақшаларды пайдаланып оны жүйелік бағдарламалау тіліне ендіре алады.
2. Элементтердің элементар тізімі . Көбінесе пайдаланушылар мен әзірлеушілер тізімдерді құрамдас бөлікте тікелей реттейді.

Кілттер

React JavaScript кітапханасындағы кілт компоненттер тізімін жасау кезінде енгізілуі керек арнайы құралды білдіреді. Пернелер JavaScript кітапханасына қай элементтердің реттелетінін, қосылғанын немесе жойылғанын анықтауға көмектеседі. Белгілі бір уақыт өткеннен кейін React құрылымдық деректердің құрамдастарын корреляциялауы үшін оларды белгілеу маңызды.

Пішіндер

JS кітапханасында стандартталған белгілеу тілі элементтері құжат нысаны үлгісінің құрамдастарынан сәл басқаша жұмыс істейді, себебі пішін элементтерінің бастапқыда жасырын күйі болады.

Басқарылатын элементтер

Стандартталған белгілеу тілінде енгізу , таңдау , мәтіндік аумақ сияқты пішіндер әзірлеуші ​​жаңа ақпаратты енгізген кезде өз күйін сақтайды және оны жаңартады. React.js күйі әрқашан басқарылатын құраушы элементтегі енгізу өрістерінің мәнін анықтайды. Бұл пайдаланушы бастапқы берілген кодтан сәл көбірек жазуы керек екенін көрсетсе де, енді бұл мәнді пайдаланушы интерфейсінің басқа бөліктеріне жіберуге болады.

Мемлекеттің өркендеуі

Мемлекеттік көтеру – бұл әрбір әзірлеуші ​​білуі және жұмыс процесінде қолдана алатын стандартталған үлгі. Оны пайдалану күрделі және әдетте пайдасыз мемлекеттік басқару үлгілерін жояды.

Мемлекеттің көтерілуін бақылау неге сонша қажет?

Оны талап ететін бөліктер үшін күйді бұрынғы құрамдастардың деңгейіне көтеру барлық элементтер күйге қатыса алатындай қажет. Күйдің тұрақты деңгейі оны оған сүйенетін барлық компоненттер арасында бөлуді жеңілдетеді.

Құрам және мұрагерлік

React.js күшті композиция үлгісін қамтиды, сондықтан элементтер арасында бұрын жазылған кодты қайта пайдалану үшін мұраның орнына бөліктерден бүтін құру процесін пайдалану ұсынылады. Осылайша, реквизиттер және құрамдас бөліктерден біртұтас тұтас композиция жасау мүмкіндігі әзірлеушіге элементтің қабығы мен әрекетін нақты және қауіпсіз түрде жасау үшін қажетті икемділік береді.

Еске салғыш! Құрамдас бөліктер кітапханаларды немесе функцияларды құрайтын қарапайым бөліктерді қоса алғанда, байланысы жоқ тіректерді ала алады.

Құрамдастармен жұмыс істеу үшін екінші немесе үшінші рет көрінбейтін функцияны пайдалану қажет болса, оны бөлек JS модуліне шығарып алыңыз. Оны құрамдасқа жылжытыңыз және жасалған функцияны қосымша кеңейтусіз пайдаланыңыз. React немесе Vue немесе Angular, нені таңдау керек: https://youtu.be/Nm8GpLCAgwk

React.js принциптері

JavaScript кітапханасының бүкіл философиясы React нұсқаулығында жасырылған. Бұл ұзақ және соншалықты маңызды емес сияқты, дегенмен көптеген пайдаланушылар оқығаннан кейін бәрі орнына келді деп мәлімдейді. Құжаттама өте ескі, бірақ әлі де үлкен құндылық пен өзектілікке ие –
https://ru.reactjs.org/docs/thinking-in-react.html . React js оқулығы https://ru.reactjs.org/tutorial/tutorial.html

React.js кітапханасының функционалдығы

JavaScript кітапханасын пайдалана отырып, пайдаланушы өзінің барлық назарын тікелей UI әзірлеу процесіне және қолданбаның құрамдас бөліктеріне аударуға мүмкіндік алады, ең алдымен жазбаша кодтың қалыптасуы мен мүмкін кемшіліктеріне алаңдайды. Кітапхана бағдарламаларды тезірек әзірлеуге мүмкіндік береді, тұтастай алғанда бүкіл жобаның құрамдас бөліктері мен процесін конфигурациялауды және өңдеуді жеңілдетеді. Осылайша, React.js ғаламдық желідегі байланысқа, UI, бағдарлама күйін басқаруға және басқа да күрделі мәселелерді шешу мүмкіндігіне жауапты элементтерді қамтиды. Кітапхананың келесі функционалдық мүмкіндіктері де бар:

1. Практикалық . React.js кішірейтілген форматта қол жетімді. Бұл шағын пакетті нақты конфигурациялау қажет емес. Ол қазірдің өзінде сайттың шолғыш нұсқасын ашуға кететін уақытты азайтатын кодты бөлу мүмкіндігін қамтиды, себебі бұл опция құрамдастардың бір уақытта көрсетілуіне жол бермейді.
2. Сорылатын экожүйе және сәйкестік . Кітапханада басқа сайттар қолдайтын көптеген құралдар бар, бұл пайдаланушыға кез келген мақсатқа арналған жаңа күрделі бағдарламаларды жасауға мүмкіндік береді.
3. Толық функционалдылық . JavaScript кітапханасының басты артықшылығы – платформаның барлық жаңа нұсқалары ескілердің талаптарына сәйкес келеді, сондықтан ескі және жаңартылған нұсқаны да пайдалануға болады, олардың барлығына қолдау көрсетіледі және бүгінгі күнге дейін өзекті. Бұрын шығарылған нұсқалар соңғы жаңартулардан кейін ескірмейді.

Практикалық қолдану

Кітапхананың негізгі бетінде, пайдаланушыларға арналған нұсқауларда React-ті тәжірибеде қолданудың бірнеше көрнекі мысалдары бар. Оларды қолмен түзетіп, іске қосуға болады. Сіз жаңа пайдаланушы болсаңыз да, кітапхананың мәні мен логикасын түсінбесеңіз де, кодты өз қалауыңыз бойынша реттеп, нәтижені көріңіз.

JavaScript-те сауда роботтарын жазу кезінде React-тің практикалық қолданылуы

Әзірлеуші ​​JS-ті бағдарламаламайтынын, бірақ сценарийлерді (скрипттерді) жазатынын түсіну маңызды. сондықтан, кітапхананы пайдалана отырып, әзірлеуші ​​​​сауда мақсатында пайдаланылатын кейінгі сауда роботы үшін код жаза алады, сонымен қатар осы платформа негізінде оның сыртқы түрін жобалауды жалғастыра алады. Шын мәнінде, саудаға арналған сауда роботы да React.js көмегімен әзірленетін қосымша болып табылады. Дегенмен, кейбір функциялар мен боттың ішкі бөлігі әлі де осыған сәйкес құралдарды ұсынатын басқа сайттарда орындалуы керек.

GitHub және React.js

GitHub – жобалардың барлық нұсқаларын орналастыратын платформа. Пайдаланушы хостингті қосады, ресми GitHub веб-сайтында тіркеу процедурасынан өтеді, содан кейін Git-тен барлық файлдарды тасымалдайтын онлайн репозиторий жасайды.
Git – бүгінгі таңда ең танымал және өзекті жоба нұсқасын басқару қызметі, ал GitHub – қашықтағы код репозиторийі.

Анықтама! Тек рұқсаты бар тиісті сілтемені алған пайдаланушылар файлдарды өңдеуге және жүктеп алуға рұқсат алады.

Құжаттама

JavaScript кітапханасына қатысты барлық оқулықтар мен жаңартылған материалдар соңғы жаңартумен жаңартылған. Әзірлеушілер сонымен қатар кітапхананың жеке бетінде орналастырылған құжаттаманың ескі нұсқаларын жалпы оқу үшін құрастырады және орналастырады. Сондықтан, жаңадан бастағандар үшін сайтты басқару дағдыларын меңгеру оңайырақ болады: ескі де, жаңа материал да – бәрі осында, кіру барлығына тегін.

Назар аударыңыз! Нұсқаулықтарды оқуды ұмытпаңыз. Кем дегенде, қараңызшы – түсініксіз болып көрінген нәрселердің көпшілігі орнына түседі.

React кітапханасы бүгінде танымал және өзекті платформа болып табылады. Оның әмбебаптығы әзірлеушілерге жобаларды сапалы және қысқа мерзімде жасауға мүмкіндік береді. Сонымен қатар, платформаны білу және оны пайдалану дағдыларына ие болу маманды еңбек нарығында сұранысқа ие етеді.