Основе Роцк Солид Реацт.јс: Водич за почетнике

Последњих неколико месеци радим са Реацт-ом и Реацт-Нативе-ом. Већ сам објавио две апликације у производњи, Кивен Аа (Реацт) и Поллен Цхат (Реацт Нативе). Када сам почео да учим Реацт, тражио сам нешто (блог, видео, курс, било шта) што ме није само научило како да пишем апликације у Реацт-у. Такође сам желео да ме то припреми за интервјуе.

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

Ако више волите видео, читав овај курс имам и на ИоуТубеу. Молим вас погледајте то.

Заронимо ...

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

Можете да направите све врсте апликација на једној страници. На пример, цхат мессенгер-и и портали е-трговине на којима желите да у реалном времену прикажете промене на корисничком интерфејсу.

Све је компонента

Апликација Реацт састоји се од компонената, од којих је пуно угнеждених једна у другу. „Али шта су компоненте?“, Можете се запитати.

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

Погледајмо следећи калкулатор који видите на Гоогле-у када покушате да израчунате нешто попут 2 + 2 = 4 –1 = 3 (брза математика!)

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

За све такве компоненте пишете одвојено. Затим комбинујте оне испод једног контејнера, што је пак сама компонента Реацт-а. На овај начин можете да креирате компоненте за вишекратну употребу и ваша коначна апликација биће збирка засебних компонената које раде заједно.

Следи један од таквих начина на који можете написати калкулатор, приказан горе, у Реацт:

Да! Изгледа као ХТМЛ код, али није. О томе ћемо истражити више у каснијим одељцима.

Постављање нашег игралишта

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

Већ сам вам поставио окружење на цодепен.ио. Само следите везу и прочитајте све коментаре на ХТМЛ и ЈаваСцрипт (ЈС) картицама.

Управљање компонентама

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

Унесите „реквизите“

Помоћу propsобјекта можемо проследити произвољне податке нашој компоненти . Свака компонента у Реацт-у добија овај propsобјекат.

Пре него што научимо како да користимо овај propsобјекат, научимо о функционалним компонентама.

а) Функционална компонента

Функционална компонента у Реацту троши произвољне податке које јој прослеђујете помоћу propsобјекта. Враћа објект који описује шта УИ Реацт треба да прикаже. Функционалне компоненте су такође познате и као компоненте без држављанства.

Напишимо нашу прву функционалну компоненту:

То је тако једноставно. Управо смо проследили propsкао аргумент обичној ЈаваСцрипт функцији и вратили се, хм, па, шта је то било? То {props.name}сам в> ствар! То је ЈСКС (ЈаваСцрипт Ектендед). О томе ћемо сазнати више у каснијем одељку.

Ова горња функција ће приказати следећи ХТМЛ у прегледачу:

Прочитајте одељак у наставку о ЈСКС-у, где сам објаснио како добијамо овај ХТМЛ из нашег ЈСКС кода.

Како можете да користите ову функционалну компоненту у својој апликацији Реацт? Драго ми је што сте питали! Једноставно је као следеће:

Атрибут nameу горњем коду постаје props.nameунутар наше Hello компоненте. Атрибут ageпостаје props.ageи тако даље.

Запамтити! Једну компоненту Реацт можете угнездити у друге компоненте Реацт-а.

Користимо ову Helloкомпоненту у нашем игралишту за цодепен. Замените divунутрашњост ReactDOM.render()нашом Helloкомпонентом, како следи, и погледајте промене у доњем прозору.

Али шта ако ваша компонента има неко унутрашње стање? На пример, као следећа компонента бројача, која има унутрашњу променљиву бројача, која се мења притиском на + и -.

б) компонента заснована на класи

Компонента заснована на класи има додатно својство stateкоје можете користити за чување приватних података компоненте. Своју Helloкомпоненту можемо преписати користећи ознаку класе на следећи начин. Будући да ове компоненте имају стање, оне су такође познате и као компоненте са статусом .

Проширујемо React.Componentкласу Реацт библиотеке да бисмо направили компоненте засноване на класама у Реацт-у. Овде сазнајте више о ЈаваСцрипт часовима.

render()Метода мора бити присутан у својој класи, као реаговати изглед за ову методу како би знали шта интерфејс би требало да донесе на екрану.

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

Слично томе, propsможе се приступити унутар наше компоненте засноване на класи помоћу this.propsобјекта.

Да бисте поставили стање, користите React.Componentтастер setState(). Пример за то видећемо у последњем делу овог водича.

Савет: Никада не позивајте setState()унутрашњу render()функцију, јер setState()узрокује поновно приказивање компоненте , што ће резултирати бескрајном петљом.

Осим тога state, компонента заснована на класи има и неке методе животног циклуса као што су componentWillMount().Оне које можете користити за обављање ствари, попут иницијализације state и свега, али то је ван опсега овог поста.

ЈСКС

ЈСКС је кратки облик ЈаваСцрипт Ектендед и то је начин за писање React компоненти. Коришћењем ЈСКС-а добијате пуну снагу ЈаваСцрипт-а унутар КСМЛ-ових ознака.

Унутра стављате ЈаваСцрипт изразе {}. Следе неки ваљани ЈСКС примери.

Начин на који то функционише је писање ЈСКС-а да бисте описали како ваш кориснички интерфејс треба да изгледа. Транспилер попут Babelпретвара тај код у гомилу React.createElement()позива. Библиотека Реацт затим користи те React.createElement()позиве за изградњу стабласте структуре ДОМ елемената (у случају Реацт за Веб) или матичних погледа (у случају Реацт Нативе) и задржава је у меморији.

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

Можете користити Бабел-ов РЕПЛ на мрежи да бисте видели шта Реацт заправо даје када напишете неки ЈСКС.

Будући да је ЈСКС само синтаксички шећер у односу на обичне React.createElement()позиве, Реацт се може користити без ЈСКС-а

Сада имамо сваки концепт на месту, тако да смо у добром положају да напишемо counterкомпоненту коју смо раније видели као ГИФ.

Код је следећи и надам се да то већ знате како да прикажете на нашем игралишту.

Следе неке истакнуте тачке у вези са горњим кодом.

  1. ЈСКС користи camelCasingстога buttonатрибут је onClick, не onclick, као што користимо у ХТМЛ-у.
  2. Везивање је неопходно за thisрад на повратним позивима. Погледајте ред 8 и 9 у горњем коду.

Коначни интерактивни код се налази овде.

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

Ако имате било каквих питања или недоумица, ударите ме на Твиттер @ рајат1сакена или ми пишите на рајат@раинстудиос.цом.

Молимо вас да препоручите овај пост ако вам се свидео и поделите га са мрежом. Пратите ме за још постова везаних за технологију и размислите о претплати на мој канал Раин Студиос на ИоуТубе-у. Хвала пуно.