React.JS для пачаткоўцаў чайнікаў, прымяненне бібліятэкі пры напісанні гандлёвых робатаў

Што такое React JS для пачаткоўцаў чайнікаў, што гэта такое, урокі, усталёўка, дакументацыя – як усталяваць і выкарыстоўваць бібліятэку React JS пры напісанні гандлёвых робатаў. Часта ў аб’явах працадаўцаў аб пошуку кампутарных спецыялістаў можна сустрэць патрабаванне, якое абвяшчае аб наяўнасці навыкаў валодання бібліятэкай JavaScript. Ды і чакаюць веды React не толькі ад распрацоўшчыкаў ПЗ, але і ад праграмістаў, якія займаюцца ўнутранай распрацоўкай сайта, а не вонкавым афармленнем. Што ж гэта за бібліятэка, якія магчымасці яна дае ў працы і з чаго пачаць знаёмства навічку? Разбярэмся ў гэтым артыкуле.

JavaScript-бібліятэка – React: што гэта такое

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-выраз ператвараецца ў стандартны выклік функцый JS, мэта якога – катэгорыя JavaScript. Адгэтуль можна зразумець, што сістэмнае пашырэнне афіцыйнай мовы праграмавання можна ўжываць усярэдзіне кіраўніцтва if і перыядаў for.

JSX уяўляе сабой аб’екты Аб’екты, прадстаўленыя пашырэннем, носяць назву React-элементы. Яны тлумачаць вынік, які распрацоўшчык жадае ўбачыць на дысплеі. Бібліятэка распазнае гэтыя аб’екты і прымяняе іх у працэсе фарміравання і падтрымцы аб’ектнай мадэлі дакумента.

Адмалёўка дэталей

Дэталі – мноства маленькіх цаглінак, якія складаюць React-праграмы.
Дэталі ўяўляюць сабой тую карціну, якую распрацоўшчык хоча ўбачыць у канчатковым выніку на маніторы. Калі параўноўваць з элементамі аб’ектнай мадэлі дакумента, бібліятэчныя элементы простыя і не забіраюць вялікай колькасці рэсурсаў. Элементы – гэта складнікі кампанентаў.

Кампаненты і прапсы

Кампаненты даюць магчымасць падзяліць UI на самастойныя часткі, працаваць над якімі лягчэй па асобнасці. Іх можна злучаць і выкарыстоўваць некалькі разоў. Па большай частцы функцыянал кампанентаў падобны з ​​функцыянальнымі асаблівасцямі самай мовы праграмавання JavaScript. Яны прымаюць уваходную інфармацыю, якая і называецца прапсамі, і аддаюць React-элементы, якія паказваюць мадэль распрацоўкі, якую распрацоўшчык імкнецца ўбачыць на маніторы.

Разнавіднасці кампанентаў: функцыянальныя і класавыя

Лягчэй за ўсё пазначыць бібліятэчны кампанент як функцыю.
Таксама кампаненты можна прадстаўляць у фармаце класаў ES6.

Цікава! Бібліятэка React вызначае дзве гэтыя разнавіднасці кампанентаў як аналагічныя.

Прапсы

Пропсы – гэта нязменныя аб’екты, якія прызначаны толькі для чытання. Таму кампанент не павінен запісваць штосьці ў свае пропсы, незалежна ад таго, да якога ўвазе ён прыналежыць.

Стан і жыццёвы цыкл

Перш разбярэмся, як правільна ўжываць стан у працы. Важна ведаць тры асаблівасці стану кампанента:

1. Не мяняйце стан напрамую, выкарыстоўвайце метад setState. Памятайце, што адзіная вобласць, дзе можна змяніць стан напрамую – канструктар.
2. Абнаўленні стану могуць быць не сінхронныя.
3. Струмень інфармацыі мае адзін кірунак. У пабудове кампанентаў ніводны з іх не ведае, прысвоена ці стан іншаму кампаненту. Не мае значэння і тое, якім чынам быў сфарміраваны той ці іншы незалежны функцыянальны элемент – з выкарыстаннем функцыянальнай або класіфікацыйнай прылады. Гэта называецца “сыходным” патокам дадзеных. Стан заўсёды вызначаны для якога-небудзь элемента, а структурныя аб’яднанні гэтыя станы могуць аказваць уплывы толькі на дэталі, што размешчаны “ніжэй” па іерархічным парадку.

Як правіла, стан завуць “мясцовым”, “унутраным” ці ўтоеным. Яно адкрыта толькі для самага функцыянальнага элемента і неўзаметку для іншых складнікаў React. У бібліятэчных праграмах, нададзены ці незалежны функцыянальны элемент вызначаным станам ці не – гэта ўнутраны складнік распрацоўкі гэтай дэталі, якая з цягам часу можа змяняцца. Цікава і тое, што ў працы можна спалучаць кампаненты са станам і без іх.

Аналізаванне падзей

Працэс аналізавання падзей у React-складнікаў падобны з ​​апрацоўкай падзей у элементах аб’ектных мадэляў дакумента. Аднак ёсць некалькі асаблівасцяў, якія адрозніваюць іх сябар ад сябра:

1. Падзеям у бібліятэцы JavaScript прысвойваюцца імёны ў іншым стылі напісання, адрозным ад стандартнага.
2. Выкарыстоўваючы сістэмны пашыраны мову праграмавання распрацоўшчык перадае падпраграму як апрацоўшчык падзеі замест радка.

Умоўная адмалёўка элементаў

Бібліятэка JavaScript дае магчымасць разбіць логіку распрацоўкі элементаў на самастойныя кампаненты. Іх можна выводзіць на агульны паказ ці хаваць, у залежнасці ад таго, якім станам яны нададзены на бягучы момант. Умоўная адмалёўка элементаў працуе па тым жа прынцыпу, як умоўныя выразы дзейнічаюць на базе мовы праграмавання JavaScript. Часам здараецца так, што бібліятэка патрабуе тлумачэння, якім чынам стан уплывае на ўтойванне або адмалёўку якіх-небудзь элементаў. Тут больш лагічна выкарыстоўваць умоўнага памочніка JS або выразы, аналагічныя if.

Якія змяняюцца складнікі

Элементы React-бібліятэкі можна дадаваць у зменныя. Гэта практычнае рашэнне, калі нейкая ўмова паказвае на тое, ці трэба адмалёўваць якую-небудзь дэталь складніку, ці ў гэтым няма сэнсу, у той час як астатняя частка захоўвае нязменны выгляд.

Спісы і ключы

Гэты падзел уключае ў сябе некалькі складнікаў момантаў:

1. Адмалёўка некалькіх элементаў . Карыстальнік можа сфарміраваць набор элементаў і ўбудаваць яго ў сістэмную мову праграмавання, выкарыстаўшы фігурныя дужкі.
2. Элементарны пералік элементаў . Часцяком карыстачы і распрацоўнікі карэктуюць спісы непасрэдна ўсярэдзіне які-небудзь складніку дэталі.

Ключы

Ключ у бібліятэцы React JavaScript пазначае спецыялізаваную прыладу, які трэба ўводзіць пры фармаванні спісу складнікаў. Ключы дапамагаюць бібліятэцы JavaScript выяўляць, якія складнікі былі адкарэктаваныя, занесеныя ці выдаленыя. Іх важна пазначаць, каб React мог суадносіць складнікі структурных дадзеных па мінанні вызначанай колькасці часу.

Формы

У бібліятэцы JS элементы стандартызаванай мовы разметкі працуюць трохі інакш, чым складнікі аб’ектнай мадэлі дакумента, паколькі ў элементаў формы першапачаткова маецца ўтоены стан.

Кіраваныя элементы

У стандартызаванай мове разметкі такія формы, як input, select, textarea, як правіла самастойна кантралююць свой стан і абнаўляюць яго, калі распрацоўшчык уносіць новую інфармацыю. Стан 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 на практыцы. Іх можна ўручную адкарэктаваць і паспрабаваць запусціць. Нават калі вы новы карыстальнік і не разбіраецеся ў сутнасці і логіцы працы бібліятэкі, адкарэктуйце код на сваё меркаванне і ўбачыце атрыманы вынік.

Практычнае прымяненне React пры напісанні гандлёвых робатаў на мове JavaScript

Важна ўсведамляць, што распрацоўшчык не праграмуе JS, а піша скрыпты (сцэнары). таму з дапамогай бібліятэкі распрацоўшчык можа напісаць код для наступнага гандлёвага робата, які выкарыстоўваецца ў мэтах трэйдзінгу, і таксама працягнуць афармляць яго вонкавы выгляд на базе дадзенай платформы. Па факце, гандлёвы робат для трэйдзінг – таксама дадатак, якіх пры дапамозе React.js распрацоўваецца вялікае мноства. Аднак некаторымі функцыямі і ўнутранай часткай робата ўсё ж такі прыйдзецца заняцца на іншых пляцоўках, якія прадстаўляюць прыдатныя для гэтага прылады.

GitHub і React.js

ГітХаб – гэта платформа, якая з’яўляецца сховішчам усіх версій праектаў. Карыстальнік падлучае хостынг, праходзіць працэдуру рэгістрацыі на афіцыйным сайце GitHub, пасля чаго стварае анлайн-сховішча, куды пераносіць усе файлы з Git.
Git з’яўляецца найболей запатрабаваным і актуальным на сённяшні дзень сэрвісам кантролю версій праектаў, а ГітХаб – дыстанцыйнае сховішча кода.

Даведка! Доступ да рэдагавання і спампоўкі файлаў маюць толькі тыя карыстачы, якія атрымалі адпаведную спасылку з дазволам.

Дакументацыя

Усе кіраўніцтвы і актуальныя матэрыялы адносна бібліятэкі JavaScript адпавядаюць апошняму абнаўленню. Распрацоўнікі складаюць і выкладваюць для агульнага чытання таксама старыя версіі дакументацыі, змешчаныя на асобнай старонцы бібліятэкі. Таму навічкам будзе лягчэй асвоіць навыкі кіравання пляцоўкай: і стары, і новы матэрыял – усё знаходзіцца тут, доступ вольны для кожнага.

Звярніце ўвагу! Не варта грэбаваць чытаннем кіраўніцтваў. Хоць бы прабегчыся позіркам – ужо большая частка таго, што здавалася незразумелым, устане на свае месцы.

Бібліятэка React – папулярная і актуальная на сённяшні дзень пляцоўка. Яе шматфункцыянальнасць дазваляе распрацоўшчыкам рабіць праекты больш якаснымі і ў меншы тэрмін. Акрамя таго, веданне платформы і наяўнасць навыкаў яе валодання робіць спецыяліста больш запатрабаваным на рынку працы.