React Intermediate оқулығы: 3 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:23

React Intermediate Tutorial

Дайын өнімді мына жерден қараңыз.

Сіз не үйренесіз?

Сіз React.js көмегімен қарапайым істер тізімін жасайсыз және реакцияның күрделі бөліктері туралы білесіз. Пререквизиттер (ұсынылған) реакцияны аяқтайды. Js бастау бойынша нұсқаулық. HTML туралы білу CSS туралы Негізгі қабық командалары JavaScript бойынша лайықты білім

Жабдықтар

Барлық бағдарламалық қамтамасыз ету оқулықта қарастырылады.

Сізге келесі бағдарламалық жасақтама орнатылған компьютер қажет:

• npm/жіп
• Js қолдайтын IDE
• Веб -шолғыш

1 -қадам: Аралық оқулыққа жауап беріңіз

Бастау

Неліктен React.js?

React.js көмегімен кодты қайта пайдалану керек. Мысалы, сізде 100 беттен тұратын навигациялық жолақ бар дейік. Егер сізге жаңа бет қосу қажет болса, онда сіз әр беттегі шарлау жолағын өзгертуіңіз керек, яғни сіз 100 бетте дәл солай істеуіңіз керек. Тіпті макростармен бұл өте жалықтырады.

Қажетті бағдарламалық қамтамасыз етуді/пакеттерді орнату

Саған қажет болады:

npm/жіп

Қалай орнату керек:

1. Node.js соңғы LTS орнатыңыз
2. ҚОСЫМША: егер сіз иірілген жіпті пакет менеджері ретінде қолданғыңыз келсе, жіптерді powershell npm install -g жіпке енгізу арқылы орнатыңыз
3. Powershell/cmd.exe файлын ашыңыз
4. Жобаңызды жасағыңыз келетін каталогқа өтіңіз
5. Npx create-react-app теріңіз.

Сіз орнату кезеңін аяқтадыңыз. оны тексеру үшін, қуатты ашыңыз, жоба каталогына өтіңіз және npm start теріңіз. Сіз әдепкі шолғышқа жүктелген веб -бетті алуыңыз керек.

2 -қадам: 1 -қадам: Жұмысты бастау

Бастау үшін /src каталогынан келесі файлдарды жойыңыз:

• App.test.js
• index.css
• logo.svg
• serviceWorker.js
• setupTests.js

Бізге бұл файлдар қажет емес.

Файлдық жүйені де реттейік. Бұл каталогтарды /src /ішінде жасаңыз:

• js
• css

App.js файлын js dir -ге, App.css файлын CSS -ге салыңыз.

Әрі қарай, тәуелділікті қайта реттейік.

index.js ішінде serviceWorker және index.css импорттарын жойыңыз. ServiceWorker.register () қызметін жойыңыз. Қолданбаның жолдарын қайта бағыттаңыз.

App.js -те logo.svg үшін импортты алып тастаңыз, себебі ол бізге қажет емес. App.css бағытын өзгерту. App () функциясын және App үшін экспорттауды жойыңыз.

React -те бізде элементтерді анықтаудың 2 әдісі бар. Бізде функциялар мен сыныптар бар. функциялар күрделі емес элементтерге арналған, ал сыныптар әдетте күрделірек компоненттерге арналған. Тапсырмалар тізімі HTML -ге қарағанда күрделі болғандықтан, біз сынып синтаксисін қолданамыз.

Оны кодқа қосыңыз:

pastebin.com/nGXeCpaH

html 2 divs ішінде болады.

элементті анықтайық.

pastebin.com/amjd0jnb

штаттағы құндылықты қалай анықтағанымызға назар аударыңыз. Бұл бізге кейінірек қажет болады.

көрсету функциясында сәлемді {this.state.value} дегенге ауыстырыңыз

біз анықталған күйден өткен мәнді көрсетеміз.

сондықтан оны сынап көрейік!

Қолданбаның көрсету функциясында оны келесіге ауыстырыңыз:

pastebin.com/aGLX4jVE

ол мәнді көрсетуі керек: «тест».

көрейік, біз бірнеше тапсырманы орындай аламыз ба?

Тек бір элементті көрсетуге React алудың орнына, біз массив құра аламыз және оның орнына массивті көрсету үшін реакцияны айтамыз.

көрсету функциясын келесіге өзгертіңіз:

pastebin.com/05nqsw71

бұл 10 түрлі тапсырманы орындауы керек. Кілттерді қалай қосқанымызға назар аударыңыз. Бұл кілттер бізге қажет болған жағдайда реакция идентификаторы ретінде қолданылады.

Енді біздің тапсырмалар тізімі жұмыс істеп жатқандықтан, біз тапсырмаларды жүктеудің жолын табамыз. Бұл жерде біздің мемлекет пайда болады.

конструкторды қосамыз.

pastebin.com/9jHAz2AS

Бұл конструкторда біз taskArray -ды рендеринг функциясынан күйге ауыстырдық. render функциясындағы taskArray және for циклін жойыңыз. div ішіндегі taskArray тапсырмасын this.state.taskArray етіп өзгертіңіз.

Қазіргі уақытта сіздің App.js коды келесідей болуы керек:

pastebin.com/1iNtUnE6

3 -қадам: Объектілерді қосу және жою әдісін қосу

Нысандарды қосу және жою әдісін қосайық. Оны жоспарлап алайық.

Бізге не керек?

• Пайдаланушыға объектілерді қосу әдісі
• Объектілерді сақтау орны
• Объектілерді шығарып алу әдісі

Біз нені қолданамыз?

• Элемент
• JSON көмегімен жергілікті сақтау API

Енгізу элементінен бастайық.

{this.state.taskArray} астында кодқа енгізу мен түймені қосыңыз

Қосу

Мәтін енгізу және қосу түймесі болуы керек.

Бұл қазір ештеңе жасамайды, сондықтан App әдісіне 6 әдісті қосайық.

Бізге түйме басылған кезде, сондай -ақ кірісте біреу тергенде әдіс қажет. Бізге тапсырмалар массивін құрудың, сонымен қатар тапсырмаларды сақтаудың, жүктеудің және жоюдың әдісі қажет.

мына 6 әдісті қосайық:

buttonClick ()

inputTyped (evt)

generateTaskArray ()

saveTasks (тапсырмалар)

getTasks ()

removeTask (id)

осы айнымалы мәнді біздің күйге қосайық:

енгізу

Біз бұған өз функцияларымызды байланыстыруымыз керек.

pastebin.com/syx465hD

Функционалдылықты қосуды бастайық.

келесідей 2 атрибутты қосыңыз:

бұл пайдаланушы кірісте бірдеңе тергенде, ол функцияны орындайды.

onClick атрибутын келесідей қосу үшін қосыңыз:

Қосу

пайдаланушы батырманы шерткенде функция орындалады.

Енді html бөлігі аяқталғаннан кейін функционалдылықты жалғастырайық.

Мен localStorage API интерфейсін алдын ала жазғанмын, сондықтан saveTasks, getTasks және removeTask функцияларын осымен ауыстырыңыз:

pastebin.com/G02cMPbi

inputTyped функциясын бастайық.

пайдаланушы терген кезде біз кірістің ішкі мәнін өзгертуіміз керек.

реакциямен қамтамасыз етілген setState функциясын қолдану арқылы осылай жасайық.

this.setState ({енгізу: evt.target.value});

осылайша біз кіріс мәнін ала аламыз.

бұл аяқталғаннан кейін, біз buttonClick функциясымен жұмыс жасай аламыз.

бізге тапсырмалар тізіміне тапсырма қосу керек. Біз алдымен localStorage -дан тапсырмалар тізімін аламыз, оны өңдейміз, содан кейін сақтаймыз. Содан кейін біз оны жаңарту үшін taskList рендерерін шақырамыз.

var taskList = this.getTasks ();

taskList.tasks.push (this.state.input);

this.saveTasks (taskList);

this.generateTaskArray ();

біз тапсырмаларды аламыз, кіріс мәнін тапсырмаларға енгіземіз, содан кейін оны сақтаймыз. Содан кейін біз тапсырмалар жиынын жасаймыз.

Енді generateTaskArray () функциясында жұмыс жасайық.

бізге керек:

• тапсырмаларды алу
• тапсырма компоненттерінің массивін жасаңыз
• көрсету үшін тапсырма компоненттерін жіберіңіз

біз тапсырмаларды ала аламыз және оларды айнымалы мәнде getTasks () көмегімен сақтай аламыз

var міндеттері = getTasks (). тапсырмалар

содан кейін біз массив құрып, оны толтыруымыз керек.

pastebin.com/9gNXvNWe

ол қазір жұмыс істеуі керек.

КӨЗ КОДЫ:

github.com/bluninja1234/todo_list_instructables

ҚОСЫМША ИДЕЯЛАР:

Жою функциясы (өте қарапайым, кілт индексінен removeTask көмегімен onclick қосыңыз және жойыңыз)

CSS (сонымен қатар қарапайым, өзіңіз жазыңыз немесе жүктеу жолағын қолданыңыз)