Почните са Реацт -ом

Библиотеке у ЈаваСцрипт који су задужени за манипулисање погледима и начин на који приказују информације све више укључују више функционалности које развој програмерима олакшавају развој апликација и пријатније су корисницима који их користе.

Међу овим библиотекама имамо Реагирај, која је библиотека ЈаваСцрипт отвореног кода фокусирани углавном на стварање корисничких интерфејса за апликације са једном страницом или апликације на једној страници коју користи Фејсбук и инстаграм да обрађује све што се односи на приказе, решавајући проблем великих апликација у којима се подаци приказани кориснику стално мењају.

Реацт феатурес

Да бисмо решили овај проблем који смо поменули Реагирај своју филозофију заснива на следећим карактеристикама:

ЈедноставноОва карактеристика изражава како наша апликација треба да гледа у одређеној тачки и на који начин то ради и шта ради Реагирај је да аутоматски обрађује сва ажурирања корисничког интерфејса када се изврше фундаменталне промене у апликацији.
ДекларативноКада се информације промене у нашој апликацији Реагирај обавља функцију освежавања наше странице, али само тамо где су се информације промениле.
Конструкција комбинованих компонентиКада говоримо о Реагирај, углавном говоримо о изградњи компоненти за вишекратну употребу, уствари са овом библиотеком оно што најчешће радимо су састављање компоненти и захваљујући чињеници да су инкапсулиране, чине поновну употребу кода, тестове и раздвајање функционалности изузетно једноставно.

Геттинг Реацт

Сада када знамо од чега се састоји Реагирај и његове карактеристике, добићемо најновију верзију библиотеке и извршићемо једноставну имплементацију како бисмо приказали чувени Хелло Ворлд.

Да бисмо добили најновију верзију, преузимамо таблет са библиотеком на следећој вези. Након преузимања распакујемо и смештамо садржај у фасциклу под називом Хелло_Реацт и унутра стварамо датотеку под називом хелло_реацт.хтмл који ће садржати следећи садржај:

Као што видимо, то је прилично једноставан код који нам омогућава да исцртамо текст у нашем главном приказу захваљујући укључивању реаговати.јс. Додатно користимо ЈСКС шта је синтакса КСМЛ у оквиру нашег ЈаваСцрипт а затим извршимо трансформацију у прегледачу, коју можемо користити захваљујући имплементацији друге библиотеке која се зове ЈСКСТрансформер.јс

Поред овога, наш код можемо учинити читљивијим и модуларнијим одвајањем његове логике, то можемо постићи тако што ћемо направити две датотеке, за то стварамо једну тзв. хелло_реацт.јс и ставили смо следећи код:

 Реацт.рендер (, доцумент.гетЕлементБиИд ('екампле_реацт'));

Затим у нашем ХТМЛ оно што радимо је да укључимо нашу .јс датотеку унутар ознаке скрипте и имаћемо исту операцију:

Хајде да видимо када покренемо наш пример у прегледачу његов одговор:

Као што видимо, манипулација подацима била је прилично једноставна, међутим постоји бољи начин за имплементацију Реагирај, пошто начин на који то радимо, код користи трансформатор ЈСКС прегледача као што ћемо видети у поруци коју примамо путем конзоле.

Ова порука конзоле даје нам решење за ово мало упозорење, а то је да извршимо предкомпилацију нашег .јс кода, за то ћемо користити менаџер пакета Ноде.јс за овај задатак, па ако немамо ово окружење инсталирано на рачунару, идемо на службену страницу и преузимамо га у случају да радимо у оперативном систему Виндовс, а у случају да радимо у Линуку можемо да следимо кораке у овај водич.

Претходно састављање нашег кода

Да бисмо извршили овај задатак, идемо на нашу Ноде.јс конзолу и уз помоћ нпм инсталирали смо алат Реагирај за командну конзолу која се зове реаговање-алати за које само треба да извршимо ову линију:

 нпм инсталл -г респонсе -тоолс

Оно што ми сада радимо је превођење нашег кода на ЈаваСцрипт чисто овако:

 јск -гледајте хелло_реацт.јс

Ово не само да преводи наш код, већ и аутоматски генерише датотеку хелло_реацт.јс Сваки пут када се изврши промена наше апликације, да видимо одговор са конзоле када покренемо ову команду:

Коначно смо изменили наш ХТМЛ уклањање укључивања библиотеке ЈСКСТрансформер.јс пошто нам то не треба и радимо укључивање нашег скрипта на конвенционалан начин, да видимо:

 Хелло Реацт!

Као што смо споменули, последња операција коју извршавамо преко конзоле аутоматски генерише датотеку сваки пут када направимо промену у апликацији, па ће нас, ако смо унели промене, конзола обавестити на следећи начин:

Као што видимо, имамо два обавештења да су извршене измене у датотеци, а то су ефективно оне које смо урадили у вези са уклањањем библиотеке и конвенционалним укључивањем ЈаваСцрипт датотеке.

Овако смо завршили овај водич, где смо могли да направимо прве кораке Реагирај и његова примена у нашим апликацијама, ово ће нам помоћи у изградњи компоненти за визуализацију података у нашим погледима, потврђујући да то није само једноставно, већ и да нам пружа алате који ће нам знатно олакшати развој.