React.JS башталгыч муляждар үчүн, соода роботторун жазууда китепкананы колдонуу

Жаңы башталгыч муляждар үчүн React JS деген эмне, бул эмне, окуу куралдары, орнотуу, документтер – соода роботторун жазууда React JS китепканасын кантип орнотуу жана колдонуу керек. Көбүнчө компьютер адистери үчүн жумуш жарыяларында JavaScript китепканасында жөндөмүңүз бар деген талапты таба аласыз. Ооба, алар React боюнча билимди программалык камсыздоону иштеп чыгуучулардан гана эмес, тышкы дизайн эмес, сайттын ички өнүгүүсү менен алектенген программисттерден да күтүшөт. Бул кандай китепкана, ал жумушта кандай мүмкүнчүлүктөрдү берет жана жаңыдан баштаган адам кайдан тааныша баштайт? Келгиле, бул макалада аны аныктап көрөлү.

JavaScript китепканасы – Реакция: бул эмне

React.JS – бул популярдуу
JavaScript программалоо тилинин китепканасы , Facebook онлайн социалдык тармагы тарабынан сайттардын жана тиркемелердин тышкы кабыгын – колдонуучу өз ара аракеттенүүчү интерфейсти иштеп чыгуу процессин жакшыртуу жана жөнөкөйлөтүү максатында түзүлгөн. Китепкананын негизги өзгөчөлүгү – компоненттер жана мамлекеттер. Компонент – бул долбоорлонуп жаткан системанын белгилүү бир бөлүгүнүн көрүнүшү үчүн жооптуу болгон санариптик топтомдун бөлүгү.

Көңүл буруңуздар! Мындай курамдык бөлүктөрдү уя салса болот.

Күй – бул интерфейстин деталдары, анын ичинде анын өкүлчүлүктүү көрсөтүүсү жөнүндө бардык маалыматтардын жыйындысы. Мисалдарды колдонуу менен биз эмне экенин кененирээк жана так билебиз. Төмөндөгү сүрөттө чоң компоненттердин айрымдары көрсөтүлгөн – онлайн социалдык тармакка жарыялоо, жалпы маалымат менен бөлүм жана сүрөттөр. Ар бир бөлүк компоненттери болгон кичинекей компоненттерди камтыйт. Мисалы, басылма текстти, сүрөттөрдү, маалыматты жарыялаган колдонуучунун аты-жөнүн жана башкаларды камтыйт. Сүрөт бөлүмүндө жеке сүрөттөр, ал эми жалпы маалымат бөлүмүндө кыскача маалымат бар.
Бул компоненттердин (компоненттердин) ар биринин абалы бар. Башкача айтканда, жалпы маалыматы бар бөлүм ар кандай түзмөктөрдө башкача көрүнөт, “лайк” элементи басылганда түсүн өзгөртөт жана жактыруулардын жалпы санына жооптуу сан; басылма, өз кезегинде, текстти кыскартып же толук бере алат.

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

React китепканасы эмне үчүн керек?

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

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

Ошентип, React.JS китепканасы көп убакытты үнөмдөп, кодду айкыныраак кылып, ырааттуулукту туура иретте уюштуруп, кайрадан чоң блокторду колдоно алат деген тыянакка келсек болот. Бул артыкчылыктар колдонуучу интерфейстерин түзүү процессинин баасын төмөндөтүүгө, ошондой эле ушул процесстин убактысын тездетүүгө мүмкүндүк берет. JS жана HTML программалоо тилин колдонуу көндүмдөрүнө ээ болуу, JSX тутумун колдонууну үйрөнүү оңой – аны өздөштүрүү үчүн бир нече күн.

Көңүл буруңуздар! Чоң долбоорлор менен иштөөдө, көп сандагы динамикалык барактарды жазуу зарыл болгондо китепкананы колдонуу рационалдуу. Чакан бизнес сайты мындай татаалдыктарга муктаж эмес.

React JS фундаменталдык курсу Адан Яга чейин: https://youtu.be/GNrdg3PzpJQ

үйрөнчүктөр үчүн таанышуу: негизги түшүнүктөр

Салам дүйнө!

Китепкананын биринчи барагына киргенде колдонуучу кичинекей мисал катары саламдашуу рубрикасын көрөт – “Салам дүйнө!”.

JSX системасынын тилинин негиздери

JSX – бул системалык программалоо тили, белгилүү JavaScript кеңейтүүсү. Ал эки тилдин айкалышын камтыйт – JA программалоо жана стандартташтырылган HTML белгилөө тили. Иштеп чыгуучулар аны React колдонуучу интерфейси кандай болушу керектигин көрсөтүү үчүн концепцияны тууралоо үчүн колдонушат. JSX китепкананын “бөлүктөрүн” түзөт.

JSX деген эмне?

React китепканасы рендерингдин маңызы колдонуучу интерфейсинин логикасына түздөн-түз байланыштуу деген логиканы карманат: окуялар кандайча иштетилет, белгилүү бир мезгилде абал кандайча өзгөрөт жана маалымат көрсөтүүгө кантип даярдалат. JS китепканасын анын тутумдук тили жок колдонсо болот, бирок көптөгөн иштеп чыгуучулар аны JavaScript кодунан түзүлгөн колдонуучу интерфейси менен иштөөдө анын айкындыгы жана конкреттүүлүгү менен баалуу деп табышат. Мындан тышкары, кеңейтүү React үчүн жараксыз учур жана ката эскертмелерин түзүүнү жеңилдетет.

Системалык тилде сөз айкаштарын түзүү

JSX процессте тармал кашаалардын ичинде жакшы жазылган JavaScript туюнтмаларын колдонууга мүмкүндүк берет.

JSX дагы бир туюнтма . Булак коду байт коддолгондон кийин, ар кандай JSX туюнтмасы JavaScript категориясын бутага алган стандарттуу JS функциясынын чалуусуна айланат. Мындан расмий программалоо тилинин тутумдук кеңейтүүсү if manual ичинде жана мөөнөттөр үчүн колдонулушу мүмкүн экенин түшүнүүгө болот.

JSX – объекттер Кеңейтүү менен көрсөтүлгөн объекттер React элементтери деп аталат. Алар иштеп чыгуучу дисплейде көргүсү келген натыйжаны такташат. Китепкана бул объекттерди тааныйт жана аларды Документ объектинин моделин түзүү жана колдоо процессинде колдонот.

Деталдарды көрсөтүү

Деталдары React программаларын түзгөн көптөгөн кичинекей курулуш блоктору.
Чоо-жайы – иштеп чыгуучу монитордон аягында көргүсү келген сүрөт. Document Object Model элементтерине салыштырмалуу китепкана элементтери жөнөкөй жана көп ресурстарды талап кылбайт. Элементтер компоненттердин курамдык бөлүгү болуп саналат.

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

Компоненттер UIди көз карандысыз бөлүктөргө бөлүүгө мүмкүндүк берет, аларда өзүнчө иштөө оңой. Алар айкалыштырылган жана бир нече жолу колдонулушу мүмкүн. Көпчүлүк учурда, компоненттердин иштеши 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 абалы ар дайым башкарылган түзүүчү элементтеги киргизүү талааларынын маанисин аныктайт. Бул колдонуучу баштапкы берилген коддон бир аз көбүрөөк жазуу керек экенин көрсөтсө да, эми бул маанини колдонуучу интерфейсинин башка бөлүктөрүнө өткөрүү мүмкүн.

Мамлекеттин көтөрүлүшү

Мамлекеттик көтөрүү – бул ар бир иштеп чыгуучу билиши керек жана иш процессинде колдоно ала турган стандартташтырылган шаблон. Аны колдонуу мамлекеттик башкаруунун татаал жана адатта пайдасыз моделдерин жок кылат.

Мамлекеттин көтөрүлүшүн көзөмөлдөө эмне үчүн мынчалык зарыл?

Мамлекетти талап кылган бөлүктөр үчүн мурунку компоненттердин деңгээлине көтөрүү, бардык элементтер мамлекетке катыша алышы үчүн зарыл. Мамлекеттин туруктуу деңгээли аны ага таянган бардык компоненттердин арасында бөлүштүрүүнү жеңилдетет.

Композиция vs Мурас

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 китепканасы бүгүнкү күндө популярдуу жана актуалдуу платформа болуп саналат. Анын ар тараптуулугу иштеп чыгуучуларга долбоорлорду жакшыраак сапатта жана аз убакытта жасоого мүмкүндүк берет. Мындан тышкары, платформаны билүү жана аны колдонуу көндүмдөрүнө ээ болуу адисти эмгек рыногунда көбүрөөк талап кылат.