Реацт је једна од најпопуларнијих фронт-енд ЈаваСцрипт библиотека. Многе компаније користе Реацт за развој својих корисничких интерфејса и стекао је велику популарност међу програмерима.
Лако је направити једноставан програм са Реацт-ом, попут ове основне апликације за бројање. Почевши од једноставног водича, помоћи ће вам да схватите неке од основних, али важних концепата Реацт-а.
Карактеристике апликације Цоунтер
У овом пројекту ћете развити шалтер апликацију са следећим карактеристикама:
- Дугме за повећање броја: Ово ће повећати број за један.
- Дугме за смањење броја: Ово ће смањити број за један.
- Ресет: Ово ће поставити број на нулу.
Основни концепти Реацт-а
Пре него што кренете напред, морате да разумете неке од ових основних концепата у Реацт-у које ћете користити у овом пројекту:
- Компоненте: Компоненте су основни градивни блокови Реацт апликација. Они садрже независан код за вишекратну употребу. Користећи компоненте можете поделити кориснички интерфејс на засебне делове. Затим можете поново користити те делове и радити са њима независно.
- Држава: У Реацт-у можете користити објекат за складиштење података који представљају стање компоненте. Ово омогућава компонентама да управљају сопственим подацима и ажурирају их. Стање компоненте одређује како се она приказује и понаша.
- Функционалне компоненте: Реацтова функционална компонента је једноставно ЈаваСцрипт функција која прихвата пропс као аргумент и враћа Реацт елемент (ЈСКС).
- Реквизити: Можете да користите пропс—скраћено за „пропертиес“—да бисте пренели податке из надређене компоненте у подређену компоненту. Реквизити су један од саставних делова Реацт-а и то можете користите пропс за обављање неколико операција у Реацт-у.
- Куке: Реацт Хоокс су уграђене функције који вам омогућавају да управљате стањем и другим Реацт функцијама као што су методе животног циклуса унутар функционалних компоненти. Такође вам могу помоћи да напишете сажет и јасан код. Ускоро ћете видети како можете да управљате стањем помоћу усеСтате() кука.
Код који се користи у овом пројекту доступан је у а ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценцом.
Корак 1: Постављање пројекта
Отворите свој терминал и покрените следећу команду да бисте започели:
нпк Креирај-реаговати-апликација реаговати-контра-апликацијаОво ће креирајте нову апликацију за реаговање, спреман да почнете да градите свој пројекат са. Он ће генерисати структуру система датотека са неколико датотека и фасцикли.
Покрените следећу команду у терминалу да бисте покренули развојни сервер:
нпм почетакТа команда би требало да отвори нову картицу у вашем претраживачу, показујући на http://localhost: 3000. Све промене које унесете у пројекат биће аутоматски ажуриране овде.
Корак 2: Креирање скелета шалтер апликације
Отвори срц/Апп.јс датотеку и избришите сав подразумевани код који је тамо присутан. Сада направите скелет апликације користећи следећи код:
увоз Реагујте, { усеСтате } из"реаговати";функцијаАпликација() {
конст [цоунт, сетЦоунт] = усеСтате(0);
дозволити инцрементЦоунт = () => {
// За додавање касније
};
дозволити децрементЦоунт = () => {
// За додавање касније
};
дозволити ресетЦоунт = () => {
// За додавање касније
}повратак (
<дивНазив класе="апликација">
<стр>Број: {цоунт}стр>
<дивНазив класе="дугмад">
див>
див>
);
}
извозУобичајено Апликација;
Прва изјава увози усеСтате кука из реаговати модул. Користите га за креирање цоунт стање и иницијализујте га на 0. Можете променити вредност цоунт помоћу сетЦоунт функција.
Користићете инцрементЦоунт, децрементЦоунт, и ресетЦоунт функције касније за повећање, смањење и ресетовање вредности бројача.
Можда ћете приметити витичасте заграде { } које се користе око променљиве цоунт у ознакама. Ово у суштини даје до знања ЈСКС парсеру да садржај унутар тих заграда треба да третира као ЈаваСцрипт.
Корак 3: Додавање функционалности у Цоунтер апликацију
Морате да креирате три дугмета да бисте применили функционалност апликације бројача: дугме за смањење броја, дугме за повећање броја и дугме за ресетовање. Додајте следећи код унутар дугмад див:
<Дугменаслов={"Декремент"} поступак={децрементЦоунт} />
<Дугменаслов={"Повећање"} поступак={инцрементЦоунт} />
<Дугменаслов={"Ресетовати"} поступак={ресетЦоунт} />Када кликнете на ова дугмад, децрементЦоунт, инцрементЦоунт, и ресетЦоунт функције ће се покренути. Имајте на уму да пролазите наслов и поступак реквизити од родитеља Апликација компонента детету Дугме саставни део.
Ажурирајте ове функције у Апп.јс датотеку са следећим кодом:
дозволити инцрементЦоунт = () => {
сетЦоунт (број + 1);
};дозволити децрементЦоунт = () => {
сетЦоунт (број - 1);
};
дозволити ресетЦоунт = () => {
сетЦоунт (0);
}
Тхе сетЦоунт функција ће ажурирати стање цоунт.
Имајте на уму да још увек нисте креирали компоненту дугмета. Створити нова компоненте фолдер у срц директоријум, а затим креирајте нову датотеку под називом Буттон.јс. Добра је пракса држати све компоненте у истој фасцикли.
Додајте следећи код у компоненте/Буттон.јс фајл:
увоз Реаговати из"реаговати";функцијаДугме(реквизити) {
дозволити { акција, наслов } = реквизити;
повратак<дугмеонЦлицк={поступак}>{титле}дугме>;
}
извозУобичајено Буттон;
Тхе Дугме компонента прима податке преко реквизита. Функција затим дсеструктурира ове пропс у засебне варијабле, користећи их за попуњавање маркупа које враћа.
Код поново користи ову компоненту три пута да би креирао дугмад за повећање, смањење и ресетовање.
На крају, увезите компоненту дугмета на врху Апп.јс страницу користећи следећи код:
увоз Дугме из"./цомпонентс/Боттон";Овако ће изгледати коначни код у Апп.јс фајл:
увоз Реагујте, { усеСтате } из"реаговати";
увоз Дугме из"./цомпонентс/Буттон";функцијаАпликација() {
конст [цоунт, сетЦоунт] = усеСтате(0);дозволити инцрементЦоунт = () => {
сетЦоунт (број + 1);
};дозволити децрементЦоунт = () => {
сетЦоунт (број - 1);
};дозволити ресетЦоунт = () => {
сетЦоунт (0);
}повратак (
<дивНазив класе="апликација">
<стр>Број: {цоунт}стр>
<дивНазив класе="дугмад">
<Дугменаслов={"Декремент"} поступак={децрементЦоунт} />
<Дугменаслов={"Повећање"} поступак={инцрементЦоунт} />
<Дугменаслов={"Ресетовати"} поступак={ресетЦоунт} />
див>
див>
);
}
извозУобичајено Апликација;
Придржавајте се најбољих пракси реаговања
Реацт код можете написати на различите начине, али је важно да га структурирате што је могуће чишће. Ово ће осигурати да га можете лако одржавати и може вам помоћи да побољшате укупне перформансе ваше апликације.
Можете пратити неколико Реацт пракси које препоручује Реацт заједница као што су избегавање понављајућег кода, писање тестова за сваку компоненту Реацт-а, коришћење деструктурирања објеката за пропс и праћење именовања конвенције.
