Реацт.јс је флексибилан и заснован на компонентама ЈаваСцрипт библиотека за изградња интерактивних корисничких интерфејса. Било је креиран и отворен од стране Фацебоока и користе га многе водеће технолошке компаније као што су Дропбок, АирБнБ, ПаиПал и Нетфлик. Реацт дозвољава програмерима да креирајте апликације које су тешке за податке које можете безболно ажурирати поновно приказивање само неопходних компоненти.
Реацт ис тхе Прикажи слој из МВЦ софтваре десигн паттерн, и углавном фокусира се на манипулацију ДОМ-ом. Како данас ових дана сви причају о Реацту, у овом посту ћемо погледати како можете почните са тим.
Инсталл Реацт
Можете инсталирати и Реацт са нпм пакет менаџер или путем ручно додавање потребних библиотека на своју ХТМЛ страницу. Препоручено је користећи Реацт витх Бабел то вам омогућава користите синтаксу ЕЦМАСцрипт6 и ЈСКС у вашем Реацт коду.
Ако желиш да инсталирајте Реацт ручно, званични документи препоручују користите ову ХТМЛ датотеку. Можете да преузмете страницу кликом на Датотека> Сачувај страницу као ... у вашем претраживачу. Скрипте које су вам потребне (Реацт, Реацт ДОМ, Бабел) ће такође бити преузете у реацт-екампле_филес / фолдер. Затим додајте следеће ознаке скрипте у одломка ХТМЛ документа:
Уместо да их преузмете, можете да додате Реацт скрипте фром ЦДН такође.
Можете користити и минифиед версион од горе наведених ЈаваСцрипт датотека:
Ако желите инсталирајте Реацт са нпм, најбољи начин је да користите Цреате Реацт Апп Гитхуб репо креиран од стране Фацебоок Инкубатора - то је и рјешење које препоручују Реацтови документи. Осим Реацт-а, такође садржи Вебпацк, Бабел, Аутопрефикер, ЕСЛинт и друге развојне алате. Да бисте започели, користите следеће ЦЛИ команде:
Када будете спремни, можете приступите својој новој апликацији Реацт на лоцалхост: 3000 УРЛ адреса:
Ако желите да прочитате више о томе како инсталирати Реацт, цхецк оут тхе упутство за инсталацију докумената.
Реагуј и ЈСКС
Иако то није обавезно, можете користите ЈСКС синтаксу у апликацији Реацт. ЈСКС означава ЈаваСцрипт КСМЛ, и то транспилес у регуларни ЈаваСцрипт. Велика предност ЈСКС-а је у томе вам омогућава да укључите ХТМЛ у ЈаваСцрипт датотеке, стога олакшава дефинисање Реацт елемената.
Ево најважнијих ствари које треба знати о ЈСКС-у:
Тагс тхат почните са малим словима (доњи камиљи случај) су приказани као регуларни ХТМЛ елементи.
Тагс тхат почните са великим словима (горња торбица) су приказане као Реацт цомпонентс.
Ани цоде написано у коврчавим заградама … интерпретирају као књижевни ЈаваСцрипт.
Ако желите да знате више о томе како користити ЈСКС са Реацт погледајте ову страницу у документима и за дефаулт ЈСКС документација можете погледати ЈСКС вики.
Креирајте елементе Реацт
Реацт има а архитектура заснована на компонентама у којима програмери стварају компоненте за вишекратну употребу да би се решили различити проблеми. Компонента Реацт је изграђена од неких или многих Реацт елементс који су најмањих јединица апликације Реацт.
Испод можете видети једноставан пример елемента Реацт који додаје дугме „Кликните на мене“ на ХТМЛ страницу. У ХТМЛ-у додајемо а
контејнер са "миДив" ИД који ће бити попуњен елементом Реацт. Креирамо наш Реацт елемент унутар а
Приказујемо наш Реацт елемент са РеацтДОМ.рендер () метода која узима два потребна параметра, тхе Реацт елемент () и његов контејнер (доцумент.гетЕлементБиИд ('миДив')). Више о томе можете прочитати како функционишу елементи реаговања у “Елементи рендерирања” секције докумената.
Направите компоненте
Реацт цомпонентс су вишекратне, независне УИ јединице у којем можете лако ажурирати податке. Компонента може бити направљена од једног или више елемената реактора. Пропс су произвољни улази можете користити за просљеђивање података компоненти. Компонента Реацт ради слично функцијама ЈаваСцрипта - сваки пут када је позвана генерише неку врсту оутпута.
Можете користити оба синтакса класичне функције или ново ЕС6 класа синтакса до дефинишите Реацт компоненту. У овом чланку, ја ћу користити ово друго, пошто нам Бабел дозвољава да користимо ЕЦМАСцрипт 6. Ако вас занима како да направите компоненту без ЕС6, погледајте страницу Компоненте и реквизити у документима.
Испод можете видети једноставна компонента Реацт направићемо као пример. То је основно обавештење које корисник види након пријављивања на сајт. Постоје три податка који ће то учинити промену из случаја у случај: име корисника, број порука и број обавештења, ми ћемо их проследити као реквизити.
Свака компонента Реацт је ЈаваСцрипт класа која продужава Реацт.Цомпонент основна класа. Наша компонента ће бити позвана Статс јер пружа кориснику основну статистику. Прво смо цреате тхе Статс класа са цласс Статс ектендс Реацт.Цомпонент … синтакса, онда ми приказати на екрану позивом РеацтДОМ.рендер () метода (већ смо користили ово последње у претходном одељку).
Први аргумент РеацтДОМ.рендер () Метода се састоји од име наше компоненте Реацт (), и његове реквизите (име, обавештења, и поруке) са њиховим вредностима. Када декларишемо вредности реквизита, треба да буде низ у наводницима (као "Н.Н. лице") и нумеричке вредности унутар увијених заграда (као 3).
Имајте на уму да због ЈаваСцрипта ми користи Назив класе уместо класа да би проследио атрибут класе ХТМЛ ознаци (цлассНаме = "суммари").
Одговарајућа ХТМЛ страница је сљедећа:
У документима Реацт постоје многи други примјери како изградити и управљати компонентама Реацт, и шта друго да знам о реквизитима.
Додатна литература
Са Реацтом, Фацебоок је представљен нова врста оквира у развој фронт-енд-а доводи у питање модел дизајна МВ *. Ако желите да боље разумете како функционише и шта са њом можете и не можете постићи, ево неколико занимљивих чланака који вам могу помоћи:
Фацебоок пост на зашто су изградили Реацт.
Сјајна блог пост Андрев Раи-а на добро и лоше од Реакта.
Цодементор он како Реацт и АнгуларЈС успоређују.
ФрееЦодеЦамп мисли да ли је МВЦ је мртав на фронту.
ХацкерНоон'с артицле он како да оптимизујете перформансе везане за Реацт.
