React Intermediate tutorial: 3 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:24

O'rta darajadagi darslikka javob bering

Tayyor mahsulotni bu erda ko'ring.

Siz nimani o'rganasiz?

Siz React.js bilan oddiy ishlar ro'yxatini tuzasiz va reaktsiyaning murakkab qismlari haqida bilib olasiz. Oldindan shartlar (tavsiya etilgan) reaktsiyani to'ldiradi.js boshlang'ich qo'llanma HTML haqida ma'lumot CSS -ning asosiy qobiq buyruqlari JavaScript -da yaxshi ma'lumot.

Ta'minotlar

Qo'llanmada barcha dasturiy ta'minot ko'rib chiqiladi.

Sizga quyidagi dasturiy ta'minot o'rnatilgan kompyuter kerak bo'ladi:

• npm/ip
• Js -ni qo'llab -quvvatlaydigan IDE
• Veb -brauzer

1 -qadam: O'rta darslikka javob bering

Ishni boshlash

Nega React.js?

React.js yordamida kodni qayta ishlatish kerak. Misol uchun, sizda 100 sahifada joylashgan navigatsiya paneli bor. Agar siz yangi sahifa qo'shishingiz kerak bo'lsa, siz har bir sahifadagi navigatsiya panelini o'zgartirishingiz kerak, ya'ni siz 100 sahifada xuddi shunday qilishingiz kerak. Hatto makrolar bilan ham, bu juda zerikarli bo'ladi.

Kerakli dasturiy ta'minot/paketlarni o'rnatish

Sizga kerak bo'ladi:

npm/ip

Qanday o'rnatiladi:

1. Boring va Node.js -ning so'nggi LTS -ni o'rnating
2. Ixtiyoriy: agar siz ipni paket menejeri sifatida afzal ko'rsangiz, ipni powershell npm install -g ipiga yozib o'rnating.
3. Powershell/cmd.exe faylini oching
4. O'z loyihangizni yaratmoqchi bo'lgan katalogga o'ting
5. Npx create-reaktsiya-ilovasini kiriting.

Siz sozlash bosqichini yakunladingiz. uni sinab ko'rish uchun, powerhell -ni oching, loyiha katalogingizga o'ting va npm start yozing. standart brauzerda yuklangan veb -sahifani olishingiz kerak.

2 -qadam: 1 -qadam: Boshlash

Boshlash uchun /src katalogidan quyidagi fayllarni o'chirib tashlang:

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

Bizga bu fayllar kerak emas.

Keling, fayl tizimini tartibga solaylik. Ushbu kataloglarni /src /da yarating:

• js
• css

App.js -ni js dir -ga, App.css -ni CSS -diriga qo'ying.

Keyin, qaramlikni qayta tashkil qilaylik.

index.js -da, serviceWorker va index.css uchun importni olib tashlang. ServiceWorker.register () ni o'chirib tashlang. Ilova yo'llarini qayta yo'naltiring.

App.js -da, logo.svg uchun importni olib tashlang, chunki bizga endi kerak emas. App.css -ni qayta yo'naltirish. App () funktsiyasini va App uchun eksportni o'chirib tashlang.

React -da biz elementlarni aniqlashning 2 usuliga egamiz. Bizda funktsiyalar va sinflar mavjud. funktsiyalar unchalik murakkab bo'lmagan elementlar uchun, sinflar esa odatda murakkab komponentlar uchun. Todo ro'yxati HTML -ga qaraganda murakkabroq bo'lgani uchun biz sinf sintaksisidan foydalanamiz.

Buni kodingizga qo'shing:

pastebin.com/nGXeCpaH

html 2 divs ichida bo'ladi.

Keling, elementni aniqlaylik.

pastebin.com/amjd0jnb

Shtat qiymatini qanday aniqlaganimizga e'tibor bering. Bu bizga keyinroq kerak bo'ladi.

render funktsiyasida salomni {this.state.value} bilan almashtiring

biz o'tgan qiymatni biz aniqlagan holatdan ko'rsatamiz.

shuning uchun sinovdan o'tkazamiz!

ilovaning render funktsiyasida uni quyidagicha o'zgartiring:

pastebin.com/aGLX4jVE

u qiymatni ko'rsatishi kerak: "test".

Keling, bir nechta vazifalarni bajarishimiz mumkinligini ko'rib chiqaylik!

React -ni bitta elementni ko'rsatishning o'rniga, biz qatorni yaratishimiz va uning o'rniga qatorni ko'rsatish uchun reaktsiyani aytishimiz mumkin.

render funktsiyasini quyidagicha o'zgartiring:

pastebin.com/05nqsw71

bu 10 xil vazifani bajarishi kerak. Kalitlarni qanday qo'shganimizga e'tibor bering. Bu kalitlar, agar kerak bo'lsa, bizga reaktsiya uchun identifikator sifatida ishlatiladi.

Endi bizning vazifalar ro'yxatimiz ishlayotganda, biz vazifalarni yuklash yo'lini topamiz. Bu erda bizning davlatimiz paydo bo'ladi.

ning konstruktorini qo'shamiz.

pastebin.com/9jHAz2AS

Ushbu konstruktorda biz taskArray -ni render funktsiyasidan uzoqlashtirdik. render funktsiyasida taskArray va for loop -ni o'chirib tashlang. div -dagi taskArray -ni this.state.taskArray -ga o'zgartiring.

Hozircha sizning App.js kodingiz shunday bo'lishi kerak:

pastebin.com/1iNtUnE6

3 -qadam: Ob'ektlarni qo'shish va o'chirish usulini qo'shish

Keling, ob'ektlarni qo'shish va o'chirish usulini qo'shamiz. Keling, buni rejalashtiraylik.

Bizga nima kerak?

• Foydalanuvchiga ob'ektlarni qo'shish usuli
• Ob'ektlarni saqlash joyi
• Ob'ektlarni qaytarish usuli

Biz nimadan foydalanmoqchimiz?

• Element
• JSON bilan mahalliy saqlash API

Kirish elementidan boshlaylik.

{this.state.taskArray} ostida kodingizga kiritish va tugma qo'shing

Qo'shish

Endi matn kiritish va Qo'shish tugmasi bo'lishi kerak.

Bu hozir hech narsa qilmaydi, shuning uchun ilova usuliga 6 usulni qo'shamiz.

Bizga tugma bosilganda va kimdir kirishni yozganda usul kerak. Bizga vazifalar majmuasini yaratish, shuningdek, vazifalarni saqlash, yuklash va o'chirish usullari kerak.

bu 6 usulni qo'shamiz:

tugmasini bosing ()

inputTyped (evt)

generateTaskArray ()

saveTasks (vazifalar)

getTasks ()

removeTask (id)

bu o'zgaruvchini o'z holatimizga qo'shamiz:

kiritish

Biz ham bunga o'z vazifalarimizni bog'lashimiz kerak.

pastebin.com/syx465hD

Funktsionallikni qo'shishni boshlaylik.

shunga o'xshash ikkita atribut qo'shing:

Bu shuni anglatadiki, foydalanuvchi kiritishda biror narsa yozganda, u vazifani bajaradi.

onClick atributini quyidagicha qo'shing:

Qo'shish

foydalanuvchi tugmani bosganida, funksiya bajariladi.

Endi html qismi tugagach, funksionallikni davom ettiramiz.

Men localStorage API interfeysini oldindan yozganman, shuning uchun saveTasks, getTasks va removeTask funktsiyalarini bu bilan almashtiring:

pastebin.com/G02cMPbi

inputTyped funktsiyasidan boshlaylik.

foydalanuvchi yozganda, biz kiritishning ichki qiymatini o'zgartirishimiz kerak.

buni reaktsiya bilan ta'minlangan setState funktsiyasidan foydalanib qilaylik.

this.setState ({kiritish: evt.target.value});

Shunday qilib, biz kirish qiymatini olishimiz mumkin.

tugagandan so'ng, biz buttonClick funktsiyasida ishlashimiz mumkin.

vazifalar ro'yxatiga vazifani qo'shishimiz kerak. biz avval localStorage -dan vazifalar ro'yxatini olamiz, tahrir qilamiz va keyin saqlaymiz. Keyin uni yangilash uchun taskList rerenderini chaqiramiz.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

biz vazifalarni olamiz, kirish qiymatini vazifalarga kiritamiz va keyin saqlaymiz. Keyin biz vazifalar qatorini yaratamiz.

Endi generateTaskArray () funktsiyasi ustida ishlaylik.

Biz … kerak:

• vazifalarni olish
• vazifa komponentlari majmuasini yarating
• ko'rsatish uchun vazifa komponentlarini o'tkazing

biz vazifalarni olishimiz va ularni getTasks () yordamida o'zgaruvchida saqlashimiz mumkin.

var vazifalari = getTasks (). vazifalar

keyin biz qatorni yaratishimiz va uni to'ldirishimiz kerak.

pastebin.com/9gNXvNWe

u hozir ishlashi kerak.

MANBA KODI:

github.com/bluninja1234/todo_list_instructables

Qo'shimcha fikrlar:

O'chirish funktsiyasi (juda oddiy, tugmani qo'shish va kalit indeksidan removeTask yordamida o'chirish)

CSS (shuningdek, o'zingizni yozing yoki bootstrap -dan foydalaning)