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

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

Предуслови за прављење листе обавеза

Пре него што започнете овај пројекат, постоји неколико захтева. Морате да имате основно разумевање следећег, ХТМЛ, ЦСС, ЈаваСцрипт, ЕС6, и Реацт. Морате да имате Ноде.јс и нпм, ЈаваСцрипт менаџер пакета. Такође вам је потребан уређивач кода, као што је Висуал Студио Цоде.

Ево ЦСС-а који ће овај пројекат користити:

/* стилес.цсс */
.Апликација {
породица фонтова: Санс Сериф;
приказ: флек;
оправдати-садржај: центар;
алигн-итемс: центар;
висина: 100вх;
}
.Урадити {
боја позадине: пшеница;
Поравнање текста: центар;
ширина: 50%;
паддинг: 20пк;
кутија-сенка: ргба(0, 0, 0, 0.24) 0пк 3пк 8пк;
маргина: ауто;
}





instagram viewer

ул {
листа-стил-тип: ниједан;
паддинг: 10пк;
маргина: 0;
}
дугме {
ширина: 70пк;
висина: 35пк;
боја позадине: пешчанобраон;
граница: ниједан;
фонт-сизе: 15пк;
фонт-веигхт: 800;
граница-радијус: 4пк;
кутија-сенка: ргба(0, 0, 0, 0.24) 0пк 3пк 8пк;
}
.улазни {
граница: ниједан;
ширина: 340пк;
висина: 35пк;
граница-радијус: 9пк;
Поравнање текста: центар;
кутија-сенка: ргба(0, 0, 0, 0.24) 0пк 3пк 8пк;
}
.Топ {
приказ: флек;
оправдати-садржај: центар;
јаз: 12пк;
}
ли {
приказ: флек;
оправдати-садржај: просторно равномерно;
алигн-итемс: центар;
паддинг: 10пк;
}
ли:пре него што {
садржаја: "*";
маргин-десно: 5пк;
}

1. Подесите окружење пројекта

Ова фаза укључује све команде и датотеке потребне за постављање пројекта. За почетак направите нови Реацт пројекат. Отворите терминал и покрените ову команду:

нпк цреате-реацт-апп тодо-лист

Ово траје неколико минута да се инсталирају све потребне датотеке и пакети. Креира нову Реацт апликацију под називом листа задатака. Када видите нешто овако, на правом сте путу:

Идите до директоријума вашег новокреираног пројекта помоћу ове команде:

цд тодо-лист

Покрените свој пројекат локално са овом командом:

нпм старт

А затим погледајте пројекат у свом претраживачу на http://localhost: 3000/.

У фасцикли срц вашег пројекта постоји неколико датотека које вам нису потребне. Избришите ове датотеке: Апп.цсс, Апп.тест.јс, лого.свг, репортВебВиталс.јс, сетупТестс.јс.

Обавезно потражите изјаве о увозу у доступним датотекама и уклоните све референце на избрисане датотеке.

2. Направите компоненту ТодоЛист

Ово је компонента у којој ћемо имплементирати све кодове потребне за листу обавеза. Направите датотеку под називом „ТодоЛист.јс“ у вашој срц фасцикли. Затим да бисте тестирали да ли све ради како треба, додајте следећи код:

увоз Реаговати из'реаговати';
конст ТодоЛист = () => {
повратак (



Здраво свет </h2>
 </div>
 );
};
извозУобичајено ТодоЛист; 

Отворите датотеку Апп.јс, увезите компоненту ТодоЛист и рендерујте је унутар компоненте апликације. Изгледаће отприлике овако:

увоз Реаговати из'реаговати';
увоз'./стилес.цсс'
увоз ТодоЛист из'./ТодоЛист';
конст Апп = () => {
повратак (




 </div>
 );
};
извозУобичајено Апликација;

Идите у свој локални прегледач који има покренут лоцалхост: 3000 и проверите да ли је „Хелло Ворлд“ храбро написано. Све у реду? До следећег корака.

3. Управљајте уносом и променом уноса

Овај корак вам омогућава да покренете догађај када унесете задатак у поље за унос. Увезите усеСтате куку из вашег Реацт пакета. усеСтате је Реацт кука која вам омогућава да ефикасно управљате стањем.

увоз Реагујте, { усеСтате } из'реаговати';

Користите куку усеСтате да креирате променљиву стања под називом „инпутТаск“ са почетном вредношћу празног стринга. Поред тога, доделите функцију „сетИнпутТаск“ да ажурирате вредност „инпутТаск“ на основу корисничког уноса.

конст [инпутТаск, сетИнпутТаск] = усеСтате("");

Креирајте функцију под називом „хандлеИнпутЦханге“, узимајући параметар догађаја. Требало би да ажурира стање инпутТаск помоћу функције сетИнпутТаск. Приступите вредности циља догађаја помоћу евент.таргет.валуе. Ово ће се покренути кад год се промени вредност поља за унос.

конст хандлеИнпутЦханге = (догађај) => {
 сетИнпутТаск (евент.таргет.валуе);
}; 

Вратите неколико ЈСКС елемената. Први је наслов који гласи „Моја Тодо-Листа“, можете одлучити за било који наслов који желите. Укључите неколико атрибута у своје улазне елементе. типе=“текст”: Ово одређује ваш тип уноса као текст, валуе={инпутТаск}: Ово повезује вредност поља за унос са променљивом стања инпутТаск, осигуравајући да она одражава тренутну вредност.онЦханге={хандлеИнпутЦханге}: Ово позива функцију хандлеИнпутЦханге када се вредност поља за унос промени, ажурирајући стање инпутТаск.

"Урадити">
Моја листа обавеза</h1>
"врх">
"улазни" типе="текст" валуе={инпутТаск}
 онЦханге={хандлеИнпутЦханге} чувар места=„Унесите задатак“ />

Крените даље, креирајте дугме које ће додати унети задатак на листу.

"бтн">ДОДАЈ</button>
 </div>
</div>

У овој фази, овако ће изгледати излаз вашег претраживача.

4. Додајте функционалност дугмету „ДОДАЈ“.

Користити усеСтате кука за креирање променљиве стања под називом „лист“ са почетном вредношћу празног низа. Променљива „сетЛист“ чува низ задатака на основу корисничког уноса.

конст [лист, сетЛист] = усеСтате([]);

Креирајте функцију хандлеАддТодо која ће се покренути када корисник кликне на дугме „ДОДАЈ“ да би додао нови задатак. Узима параметар тодо, који представља нови задатак који је унео корисник. Затим креирајте објекат невТаск са јединственим ИД-ом генерисаним помоћу Матх.рандом() и својством задатака које садржи улазни текст.

Настављамо даље, ажурирајте стање листе коришћењем оператора ширења [...лист] да бисте креирали нови низ са постојећим задацима на листи. Додајте невТаск на крај низа. Ово осигурава да не мутирамо оригинални низ стања. На крају, ресетујте стање инпутТаск на празан стринг, бришући поље за унос када корисник кликне на дугме.

конст хандлеАддТодо = (урадити) => {
конст нови задатак = {
 ид: Матх.рандом(),
 тодо: тодо
 };
 сетЛист([...лист, невТаск]);
 сетИнпутТаск('');
}; 

Укључите онЦлицк атрибут елементу дугмета са текстом „ДОДАЈ“. Када се кликне, покреће хандлеАддТодо функција, која додаје нови задатак у стање листе

 хандлеАддТодо (инпутТаск)}>АДД</button> 

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

5. Додајте дугме за брисање

Ово је последњи корак који омогућава корисницима да избришу свој задатак ако су направили грешку или су извршили задатак. Креирајте функцију хандлеДелетеТодо која делује као руковалац догађаја када корисник кликне на дугме „Избриши“ за одређени задатак. Узима ид задатка као параметар.

Унутар функције користите метод филтера на низу листе да бисте креирали нови низ невЛист који искључује задатак са одговарајућим ИД-ом. Метод филтера итерира кроз сваку ставку у низу листе и враћа нови низ који садржи само ставке које задовољавају дати услов. У овом случају, проверите да ли је ИД сваког задатка једнак ИД-у који је прослеђен као параметар. Ажурирајте стање листе позивањем сетЛист (невЛист), који поставља стање на нови филтрирани низ, ефективно уклањајући задатак са одговарајућим ИД-ом са листе.

конст хандлеДелетеТодо = (ид) => {
конст новаЛиста = листа.филтер((урадити) =>
 тодо.ид !== ид
 );
 сетЛист (нова листа); 
};

Користите метод мапе да пређете преко сваке ставке у низу листе и вратите нови низ. Затим креирајте ан

Приступите својству задатака сваког Тодо објекта. на крају, креирајте дугме које када се кликне, покреће функцију хандлеДелетеТодо са ИД-ом одговарајућег задатка као параметром, омогућавајући нам да избришемо задатак са листе.

<ул>
{ лист.мап((урадити) => (
<лиНазив класе="задатак"кључ={тодо.ид}>
 {тодо.тодо}
<дугмеонЦлицк={() => хандлеДелетеТодо (тодо.ид)}>Избришидугме>
ли>
))}
ул>

Овако би ваш коначни код требао изгледати:

увоз Реагујте, { усеСтате } из'реаговати';
конст ТодоЛист = () => {
конст [инпутТаск, сетИнпутТаск] = усеСтате('');
конст [листа, сетЛист] = усеСтате([]);
конст хандлеАддТодо = () => {
конст нови задатак = {
 ид: Матх.рандом(),
 задатак: инпутТаск
 };
 Сет листа([...листа, Нови задатак]);
 сетИнпутТаск('');
 };
конст хандлеДелетеТодо = (ид) => {
конст новаЛиста = листа.филтер((урадити) => тодо.ид !== ид);
 сетЛист (нова листа);
 };
конст хандлеИнпутЦханге = (догађај) => {
сетИнпутТаск(догађај.таргет.вредност);
 };
повратак (
<дивНазив класе="Урадити">

Мој За-УрадитеЛиста

<дивНазив класе="врх">
<улазниНазив класе="улазни"тип="текст"вредност={инпутТаск}
 онЦханге={хандлеИнпутЦханге} чувар места=„Унесите задатак“ />
<дугмеНазив класе="бтн"онЦлицк={хандлеАддТодо}>ДОДАТИдугме>
див>
<ул>
 { лист.мап((урадити) => (
<лиНазив класе="задатак"кључ={тодо.ид}>
 {тодо.тодо}
<дугмеонЦлицк={() => хандлеДелетеТодо (тодо.ид)}>
Избриши
дугме>
ли>
 ))}
ул>
див>
 );
};
извозУобичајено ТодоЛист; 

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

Честитамо, направили сте листу обавеза која додаје и брише задатке. Можете ићи даље додавањем стила и више функционалности.

Користите пројекте из стварног света да научите да реагујете

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