Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере. Опширније.

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

Хајде да изнесемо основне концепте које треба да знате о ЈаваСцрипт-у пре него што пређете на РеацтЈС.

1. Функције са стрелицама

Функције стрелица се широко користе у Реацт-у. Од верзије 16.8, Реацт је прешао са компоненти заснованих на класама на функционалне компоненте. Функције стрелица омогућавају вам да креирате функције са краћом синтаксом.

Илуструјмо то на следећим примерима:

Редовна функција

функцијаПоздрав() {
повратак'Здраво'
}
конзола.лог (греетинг()) //hello

Функција стрелице

дозволити поздрав = () =>'Здраво'
конзола.лог (греетинг()) //hello
instagram viewer

Две функције изнад имају исти излаз, иако је синтакса другачија. Функција стрелице изгледа краће и чистије од обичне функције. Обично, Реацт компоненте имају следећу структуру:

увоз Реаговати из'реаговати'
конст Књига = () => {


повратак (




Боок</div>



 )


}
извозУобичајено Боок

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

2. Деструктурирање

Деструктурирање се користи за добијање података из сложених структура података. У ЈаваСцрипт-у, низови и објекти могу да чувају многе вредности. Можете манипулисати вредностима и користити их у различитим деловима апликације.

Да бисте добили ове вредности, морате деструктурирати променљиву. У зависности од структуре података са којом се бавите, можете користити ознаку тачке (.) или заграду. На пример:

конст студент = {
'име': 'Мари',


'адреса': 'Јужни парк, Витлејем',


'старост': 15
}

Деструктурирање:

конзола.лог (име ученика) // излаз Мари

У горњем примеру, нотација тачке приступа вредности кључа 'наме'. У РеацтЈС-у ћете користити концепт деструктурирања да бисте добили и поделили вредности у вашој апликацији. Деструктурирање помаже да се избегне понављање и чини ваш код читљивијим.

3. Методе низа

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

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

На пример, тхе Мапа() метода понавља све ставке у низу. Делује на сваки елемент низа да би створио нови низ.

конст бројеви = [9, 16, 25, 36];
конст скуаредАрр = нумберс.мап(Матх.скрт) // 3,4,5,6

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

4. Кратки услови

Услови су изјаве које ЈаваСцрипт користи за доношење одлука у коду. Кратки услови укључују && (и), ИИ (или) и тернарни оператор. Ово су краћи изрази услова и иф/елсе искази.

Следећи пример показује како се користи тернарни оператор.

Код са иф/елсе наредбом:

функцијаРадно време(дан) {
ако (дан == НЕДЕЉА) {
повратак12;
 } 
друго {
повратак9;
 }
}

Код са тернарним оператором:

функцијаРадно време(дан) {
повратак дан == НЕДЕЉА? 12: 9;
}

Учи о различите врсте кондиционала са посебним освртом на кратке кондиционале. Они се широко користе у Реацт-у.

5. Литерали шаблона

Литерали шаблона користе повратне ознаке (``) да дефинишу стринг. Литерали шаблона вам омогућавају да манипулишете подацима стрингова чинећи их динамичнијим. Означени литерали шаблона вам омогућавају да обављате операције унутар стринга. Ово су краћи изрази услова и иф/елсе искази.

На пример:

дозволити име = "Јане";
дозволити презиме = "Срна";
дозволити текст = `Добро дошли ${фирстНаме}, ${ластНаме}!`; // Велцоме Јане Дое!

6. Спреад Оператори

Оператор Спреад (...) копира вредности једног објекта или низа у други. Његова синтакса се састоји од три тачке праћене именом променљиве. На пример (...име). Он спаја својства два низа или објеката.

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

конст имена = ['Мари', 'Јане']; 
конст чланови групе = ['Фред',... имена, 'Анђела']; // ["Фред", "Мери", "Јане", "Ангела"]

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

Зашто научити РеацтЈС?

РеацтЈС је популаран са добрим разлогом. Има кратку криву учења, поуздан је и брзо се приказује у ДОМ-у. Подржава самосталне компоненте и има одличне алате за отклањање грешака.

РеацтЈС укључује нове ЈаваСцрипт концепте из ЕЦМАСцрипт 6 (ЕС6). Учење основних концепата у ЈаваСцрипт-у ће олакшати развој пројеката у РеацтЈС-у.

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