Сәүдә роботларын язганда китапханәне кулланып, башлап җибәрүчеләр өчен React.JS

Яңа башлангычлар өчен React JS нәрсә ул, нәрсә ул, кулланмалар, монтаж, документлар – сәүдә роботларын язганда React JS китапханәсен ничек урнаштырырга һәм кулланырга. Еш кына компьютер белгечләре өчен эш рекламаларында сез JavaScript китапханәсендә осталыгыгыз бар дигән таләпне таба аласыз. Әйе, һәм алар React турындагы белемнәрне программа уйлап табучылардан гына түгел, ә тышкы дизайн белән түгел, ә сайтның эчке үсеше белән шөгыльләнүче программистлардан көтәләр. Бу нинди китапханә, эштә нинди мөмкинлекләр бирә, һәм башлап җибәрүче кайда таныша башлый? Әйдәгез аны бу мәкаләдә аңлыйк.

JavaScript китапханәсе – реакция: нәрсә ул

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

Тамга! Мондый компонент өлешләре оя корырга мөмкин.

Дәүләт – интерфейсның детальләре, шул исәптән аның тәкъдим итүе турында барлык мәгълүматлар җыелмасы. Мисаллар кулланып, без нәрсә икәнен җентекләп һәм ачыклыйбыз. Түбәндәге рәсемдә кайбер зур компонентлар күрсәтелә – он-лайн социаль челтәргә урнаштыру, гомуми мәгълүматлы бүлек һәм фотолар күрсәтү. Eachәрбер өлешкә компонентлар булган кечерәк компонентлар керә. Мәсәлән, басмада текст, фотосурәтләр, мәгълүматны бастырган кулланучының исеме һ.б. бар. Рәсем бүлегендә аерым рәсемнәр бар, гомуми мәгълүмат бүлегендә кыска мәгълүмат бар.
Бу компонентларның (компонентларның) һәрберсенең торышы бар. Ягъни, гомуми мәгълүматлы бүлек төрле җайланмаларда төрлечә күренәчәк, “охшаган” элемент басылганда төсне үзгәртә һәм ошаганнарның гомуми саны өчен җаваплы сан; басма, үз чиратында, текстны кыскартырга яки тулысынча тапшырырга мөмкин.

Шулай итеп, React.JS сыгылмасы күрсәтелә – интерфейс компоненты бер тапкыр языла, һәм шуннан соң аңа мөмкин булган барлык шартлар бирелә.

Ни өчен React китапханәсе кирәк?

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

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

Шулай итеп, без React.JS китапханәсе күп вакытны саклап калырга, кодны конкретрак ясарга, эзлеклелекне дөрес тәртиптә урнаштырырга һәм зур блокларны кабат кулланырга мөмкин дигән нәтиҗә ясый алабыз. Бу өстенлекләр кулланучы интерфейсларын булдыру процессының бәясен киметергә, шулай ук ​​бу процесс вакытын тизләтергә мөмкинлек бирә. JS һәм HTML программалаштыру телен куллану күнекмәләренә ия булу, JSX системасын кулланырга өйрәнү җиңел – аны үзләштерү өчен берничә көн генә.

Тамга! Зур проектлар белән эшләгәндә, күп санлы динамик битләр язарга кирәк булганда, китапханәне куллану рациональ. Кечкенә бизнес сайтына мондый катлаулылык кирәк түгел.

JS фундаменталь курсын A дан Z га кадәр реакцияләгез: https://youtu.be/GNrdg3PzpJQ

Башлап җибәрүчеләр өчен танышу: төп төшенчәләр

Сәлам, Дөнья!

Китапханәнең беренче битенә кергәндә, кулланучы кечкенә мисал итеп рәхим итегез – “Сәлам дөнья!”.

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

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

JSX нәрсә ул?

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

Система телендә белдерүләр формалаштыру

JSX сезгә процесста бөдрә кашык эчендә яхшы язылган JavaScript экспрессияләрен кулланырга мөмкинлек бирә.

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

JSX – объектлар Киңәйтү белән күрсәтелгән объектлар реакция элементлары дип атала. Алар эшкәртүченең дисплейда күрергә теләгән нәтиҗәләрен ачыклыйлар. Китапханә бу әйберләрне таный һәм аларны Документ объекты моделен булдыру һәм саклау процессында куллана.

Деталь күрсәтү

Детальләр – реакция программаларын тәшкил иткән бик күп төзелеш блоклары.
Детальләр – мониторда уйлап табучы күрергә теләгән рәсем. Документ объектының модель элементлары белән чагыштырганда, китапханә элементлары гади һәм күп ресурслар алмыйлар. Элементлар компонентларның составы.

Компонентлар һәм пропуслар

Компонентлар UIны мөстәкыйль өлешләргә бүләргә мөмкинлек бирә, алар өстендә эшләү җиңелрәк. Аларны берләштереп, берничә тапкыр кулланырга мөмкин. Күпчелек очракта, компонентларның функциональлеге JavaScript программалаштыру теленең функциясенә охшаш. Алар реклама дип аталган кертү мәгълүматларын алалар, һәм мониторда күрергә теләгән үсеш моделен күрсәтүче реакция элементларын кайтаралар.

Компонентларның төрлелеге: функциональ һәм класс

Функция буларак китапханә компонентына мөрәҗәгать итү иң җиңел.
Компонентлар шулай ук ​​ES6 класс форматында күрсәтелергә мөмкин.

Кызык! React китапханәсе бу ике төр компонентны охшаш итеп билгели.

реклама

Реклама – үзгәртелмәгән әйберләр, алар бары тик укылырлык. Шуңа күрә, компонент нинди генә булуына карамастан, аның рекламасына бернәрсә дә язарга тиеш түгел.

Дәүләт һәм тормыш циклы

Башта, эштә дәүләтне ничек дөрес кулланырга икәнлеген ачыклыйк. Компонент торышы турында белергә тиеш өч мөһим нәрсә:

1. Дәүләтне турыдан-туры үзгәртмәгез, setState ысулын кулланыгыз. Онытмагыз, дәүләтне турыдан-туры үзгәртә алырлык бердәнбер өлкә – конструктор.
2. Дәүләт яңартулары синхрон булмаска мөмкин.
3. Мәгълүмат агымының бер юнәлеше бар. Компонент төзелешендә, аларның берсе дә дәүләтнең башка компонентка билгеләнгәнен белми. Бу яки теге яки бу бәйсез функциональ элементның ничек формалашуы мөһим түгел – функциональ яки классификация коралы ярдәмендә. Бу “агым” мәгълүмат агымы дип атала. Дәүләт һәрвакыт кайбер элементлар өчен билгеләнә, һәм бу дәүләтнең структур берләшмәләре иерархик тәртиптә “аста” урнашкан өлешләргә генә тәэсир итә ала.

Гадәттә, дәүләт “җирле”, “эчке” яки яшерен дип атала. Бу функциональ элементның үзенә генә, реакциянең бүтән өлешләренә дә күренми. Китапханә программаларында, мөстәкыйль функциональ элемент билгеле бер дәүләт белән бирелгәнме, вакыт узу белән үзгәрә ала торган бу өлешнең эчке үсеше. Шунысы кызык, әсәрдә сез компонентларны дәүләт белән һәм берләштерә аласыз.

Вакыйга анализы

Реакт компонентларындагы вакыйгаларны анализлау процессы документ объектының модель элементларындагы вакыйгаларны эшкәртүгә охшаган. Ләкин, аларны бер-берсеннән аеручы берничә үзенчәлек бар:

1. JavaScript китапханәсендәге вакыйгалар стандартка караганда башка стильдә аталган.
2. Системаның киңәйтелгән программалаштыру телен кулланып, уйлап табучы сызык урынына вакыйга эшкәртүчесе буларак суброутинны уза.

Элементларны шартлы күрсәтү

JavaScript китапханәсе элементларның үсеш логикасын мөстәкыйль компонентларга бүлергә мөмкинлек бирә. Алар хәзерге вакытта нинди халәттә булуына карап, гомуми күрсәтү өчен яки яшерелергә мөмкин. Элементларны шартлы күрсәтү JavaScript программалаштыру теленә нигезләнгән шартлы сүзләр белән бер үк принцип буенча эшли. Кайвакыт китапханә дәүләтнең кайбер элементларның яшерелүенә яки күрсәтелүенә ничек тәэсир итүен аңлатуны таләп итә. Монда шартлы JS ярдәмчесе яки охшаш сүзләрне куллану мантыйклырак.

Компонентларны үзгәртү

Реакция китапханә элементларын үзгәрүчәннәргә өстәргә мөмкин. Бу практик чишелеш, компонентның кайбер өлеше сызылырга тиешме, яисә аның мәгънәсе юк, калган өлеше үзгәрешсез кала.

Исемлекләр һәм ачкычлар

Бу бүлек берничә компонентны үз эченә ала:

1. Берничә элемент сызу . Кулланучы элементлар җыелмасын формалаштыра һәм аны бөдрә кашыклар ярдәмендә система программалаштыру теленә урнаштыра ала.
2. Элементларның башлангыч исемлеге . Еш кына кулланучылар һәм уйлап табучылар исемлекне турыдан-туры компонент өлешендә көйлиләр.

Ачкычлар

React JavaScript китапханәсендә ачкыч компонентлар исемлеген ясаганда кертелергә тиешле махсус коралны аңлата. Ачкычлар JavaScript китапханәсенә нинди әйберләр көйләнгән, өстәлгән яки бетерелгәнен ачыкларга ярдәм итә. Аларны билгеләргә кирәк, реакция билгеле бер вакыт үткәннән соң структур мәгълүмат компонентларын корреляцияли ала.

Формалар

JS китапханәсендә стандартлаштырылган тел элементлары документ объект моделе компонентларына караганда бераз аерылып тора, чөнки форма элементлары башта яшерен хәлгә ия.

Идарә ителгән әйберләр

Стандартлаштырылган телдә кертү, сайлау, текстария кебек формалар үз халәтләрен сакларга һәм эшкәртүче яңа мәгълүмат кергәндә яңартырга омтыла. React.js халәте идарә ителгән композиция элементында кертү кырларының кыйммәтен һәрвакыт билгели. Бу кулланучының бирелгән кодтан бераз күбрәк язарга тиешлеген күрсәтсә дә, хәзер бу кыйммәтне кулланучы интерфейсының бүтән өлешләренә күчереп була.

Дәүләтнең күтәрелүе

Дәүләт күтәрү – стандартлаштырылган шаблон, аны һәр эшкәртүче белергә тиеш һәм эш процессында куллана белергә тиеш. Аны куллану катлаулы һәм гадәттә файдасыз дәүләт идарә итү формаларын бетерәчәк.

Ни өчен дәүләтнең күтәрелүен контрольдә тоту кирәк?

Дәүләтне кирәк булган өлешләр өчен дәүләтне үткән компонентлар дәрәҗәсенә күтәрү, барлык элементлар дәүләттә катнаша алсын өчен кирәк. Тотрыклы дәүләт дәрәҗәсе аны аңа таянган барлык компонентлар арасында таратуны җиңеләйтәчәк.

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

React.js көчле композиция моделен үз эченә ала, шуңа күрә элементлар арасында алдан язылган кодны кабат куллану өчен мирас урынына өлешләрдән тулысынча төзү процессын кулланырга киңәш ителә. Шулай итеп, реклама һәм компонент өлешләреннән бер бөтен композиция булдыру сәләте, эшкәртүчене элементның кабыгын һәм тәртибен билгеле һәм куркынычсыз рәвештә булдыру өчен кирәк булган сыгылманы тәэмин итә.

Искә төшерү! Компонент өлешләре бәйләнешсез реквизитлар ала ала, шул исәптән китапханә яки функцияләрне тәшкил иткән башлангыч өлешләр.

Икенче яки өченче тапкыр компонентлар белән эшләү өчен бушлай функция кулланырга кирәк булган очракта, аны аерым JS модулына чыгарыгыз. Аны компонентка күчерегез һәм барлыкка килгән функцияне алга таба киңәйтмичә кулланыгыз. Реакция яки Vue яки почмак, нәрсә сайларга: https://youtu.be/Nm8GpLCAgwk

React.js принциплары

JavaScript китапханәсенең бөтен фәлсәфәсе React кулланмасында яшерелгән. Күрәсең, бу озын һәм андый зур әһәмияткә ия түгел, ләкин күп кулланучылар барысы да укыганнан соң урынга төште дип әйтәләр. Документация шактый иске, ләкин бик мөһим һәм актуаль –
https://ru.reactjs.org/docs/thinking-in-react.html . Js дәреслеген реакцияләгез https://ru.reactjs.org/tutorial/tutorial.html

React.js китапханәсенең функциональлеге

JavaScript китапханәсен кулланып, кулланучы бөтен игътибарын турыдан-туры UI үсеш процессына һәм кушымта компонентларына бирергә мөмкинлек ала, иң азы, язма кодның формалашуы һәм мөмкин булган кимчелекләре белән читкә юнәлтелә. Китапханә сезгә программаларны тизрәк үстерергә мөмкинлек бирә, компонентларны һәм тулаем алганда проект процессын конфигурацияләү һәм үзгәртү җиңелрәк итә. Шулай итеп, React.js глобаль челтәрдә аралашу өчен җаваплы элементларны, UI, программа дәүләт контроле һәм башка катлаулы сорауларны чишү сәләтен үз эченә ала. Китапханә шулай ук ​​түбәндәге функциональ үзенчәлекләргә ия:

1. Практика . React.js минималь форматта бар. Бу компакт пакетны ачык итеп конфигурацияләү кирәк түгел. Бу инде кодның бүлү функциясен үз эченә ала, бу сайтның браузер версиясен ачу вакытын кыскарта, чөнки бу параметр компонентларның бер үк вакытта күрсәтелүенә комачаулый.
2. Экосистема һәм туры килү . Китапханәдә бик күп кораллар бар, бүтән сайтлар ярдәмендә, бу кулланучыга теләсә нинди максатта яңа катлаулы программалар эшләргә мөмкинлек бирә.
3. Тулы функция . JavaScript китапханәсенең төп өстенлеге – платформаның барлык яңа версияләре дә иске таләпләргә туры килә, шуңа күрә сез искесен дә, яңартылган версиясен дә куллана аласыз, аларның барысы да хупланган һәм бүгенге көнгә кадәр актуаль. Элегерәк чыгарылган версияләр соңгы яңартулардан соң искерми.

Практик куллану

Китапханәнең төп битендә, кулланучылар өчен инструкциядә, реакциядә практикада куллануның берничә иллюстратив мисалы бар. Сез аларны кул белән төзәтә аласыз һәм эшләтергә тырыша аласыз. Әгәр дә сез яңа кулланучы булсагыз һәм китапханәнең асылын һәм логикасын аңламасагыз да, кодны үзегез теләгәнчә көйләгез һәм нәтиҗәләрен карагыз.

JavaScript’та сәүдә роботларын язганда React’ны практик куллану

Моны эшләүче JS программасын түгел, ә сценарийлар (сценарийлар) яза. Шуңа күрә, китапханә кулланып, уйлап табучы сәүдә максатларында кулланылган алдагы сәүдә роботы өчен код яза ала, һәм шулай ук ​​аның тышкы кыяфәтен бу платформа нигезендә эшләүне дәвам итә. Чынлыкта, сәүдә өчен робот шулай ук ​​кушымта, аның күпчелеге React.js ярдәмендә эшләнә. Ләкин, кайбер функцияләр һәм ботның эчке өлеше моның өчен яраклы кораллар бирүче бүтән сайтларда эшләнергә тиеш.

GitHub һәм React.js

GitHub – проектларның барлык версияләрен урнаштыручы платформа. Кулланучы хостингны тоташтыра, рәсми GitHub сайтында теркәлү процедурасын уза, аннары Git’тан барлык файлларны күчергән онлайн репозитария булдыра.
Git – бүгенге көндә иң популяр һәм актуаль проект версиясе белән идарә итү хезмәте, һәм GitHub – дистанцион код саклагыч.

Сылтама! Рөхсәт белән тиешле сылтама алган кулланучылар гына файлларны редакцияләү һәм йөкләү мөмкинлеген ала.

Документация

JavaScript китапханәсенә кагылышлы барлык дәреслекләр һәм заманча материаллар соңгы яңарту белән актуаль. Төзүчеләр шулай ук ​​китапханәнең аерым битендә урнаштырылган документларның иске версияләрен гомуми уку өчен туплыйлар һәм урнаштыралар. Шуңа күрә, башлап җибәрүчеләргә сайт белән идарә итү күнекмәләрен үзләштерү җиңелрәк булачак: иске дә, яңа материал да – барысы да монда, керү һәркем өчен бушлай.

Тамга! Дәреслекләрне укырга онытмагыз. Leastичшиксез, карагыз – аңлашылмаган булып күренгәннәрнең күбесе урынга төшәчәк.

React китапханәсе бүген популяр һәм актуаль мәйданчык. Аның күпкырлы булуы уйлап табучыларга сыйфатлы һәм азрак вакыт эчендә проектлар ясарга мөмкинлек бирә. Моннан тыш, платформаны белү һәм аны куллану күнекмәләре булу белгечне хезмәт базарында таләп итә.