Направите једноставну апликацију за листу обавеза помоћу Реацт-а

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

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

МУО видео дана ПОМЕРИТЕ ДА БИСТЕ НАСТАВИЛИ СА САДРЖАЈЕМ

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

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

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

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

како извршити враћање система на Виндовс 10

59111009Б8ДАЕ477696Ф1ДБЕ9Д18471133Д0А257

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

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

Д52454136ЕД42Е4А0Ц24ЕФА740Ф28276Ф65Ц98А2

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

Листа команди за покретање унутар директоријума.

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

6Е1ЕБ80Е72А4Е3009ЕФД9ЦЦ0БФА971Е3А72213Б9

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

Ц033Ц336Б739558863А43978Ц09Ф314Е205033БД

А затим погледајте пројекат у свом претраживачу на адреси Ц941АД20ДЦ843Д199А8832622748БЦФ0Б460ЦА68.

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

Датотеке унутар срц фасцикле Реацт апликације.

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

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

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

БЦ579112Ф82Д16997Ц9458Ц116761ЕБ1А4ЦА1ЦЦ8

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

349ЕАЕ1ЕАФЦЦ16131А1ДБ560АЕА7520ДЕБФ8Ф622

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

3. Руковати уносом и променом уноса

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

Ц635ДД8251ФФ898011Б9АЦД7Д879614Б576ЦЦ717

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

0А4642472ДАЦ86ЦЦ8097Д730БЦ4185976БА41664

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

3838Б130Е0ДФ29Ц6БДБ5АД9Е6ЦФ7630А342Е6700

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

како могу да сазнам ко ме је позвао

Ц00ФЦФ81Ф01Ф3Б2А27ЕД118ФДБЦ94Ц52800ЕА986

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

2986Б261069793388940Е52ФЦФ46944Д784ФД7ФЕ

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

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

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

57Е53Б924348ФА45495305544ЕБ45107101ДБ064

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

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

Д17ДЕ9219667Д8ЦА04Ц8212010Ф69ЦФА8Ц205ЕБ3

Укључите 41ЕББ51759Д7789229Ф5ФЦ58Ц9756ДД11Б50ЕБДФ атрибут елементу дугмета са текстом „ДОДАЈ“. Када се кликне, покреће функцију 971695Ц438Б652Ф40397Б28Д3АЕА6ЕФ55Ц7Ф716Ц, која додаје нови задатак у стање листе

3Ф85Д647Ф3Ц6Ф635Ц85Б2А0ЕФЦЕ3ЦЦЦФ97АЦДБ42

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

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

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

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

1895ЕБ3Ц08517097ЦА6Б03Е046АЦБ62ЦФА7Д1596

Користите метод мапе да пређете преко сваке ставке у низу листе и вратите нови низ. Затим креирајте елемент <ли> који представља задатак за сваки задатак у низу листе. Обавезно додајте атрибут кључа када рендерујете листу елемената у Реацт-у. Помаже Реацт-у да јединствено идентификује сваку ставку листе и ефикасно ажурира кориснички интерфејс када се промени. У овом случају, поставите кључ за ИД сваког Тодо објекта да бисте осигурали јединственост.

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

43А218Ц8040Е020ФФЦФДЕ4ЕБ722Д9Б63Ф53ДАА33

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

сат од јабуке од нерђајућег челика вс алуминијум 2

7АА338565ЕБ678ЦЦ2АФ747АФА602823Е2ЦБ99419

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

Листа обавеза која приказује неколико задатака.

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

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

Вежбање може бити ефикасан начин учења. Омогућава вам да примените Реацт концепте и најбоље праксе на практичан начин, ојачавајући ваше разумевање оквира. Постоји много пројеката, требало би да пронађете оне праве.18Ф891А350А5Ф8Е30Е437Е6ФБ068Ф503А7Б4Е55Д