React Intermediate Tutorial: 3 Addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:44

React Intermediate Tutorial

Hazır məhsula burada baxın.

Nə öyrənəcəksən?

React.js ilə sadə bir işlər siyahısı yaradacaq və reaksiyanın daha mürəkkəb hissələrini öyrənəcəksiniz. Önkoşullar (yüksək dərəcədə tövsiyə olunur), reaksiyanı tamamlayır. Js başlayaraq bələdçi. HTML bilikləri CSS bilikləri Əsas qabıq əmrləri JavaScript -də ləyaqətli biliklər

Təchizat

Bütün proqramlar dərslikdə yer alacaq.

Aşağıdakı proqramlar quraşdırılmış bir kompüterə ehtiyacınız olacaq:

• npm/iplik
• Js dəstəkləyən bir IDE
• Veb brauzer

Addım 1: Orta Dərsliyə reaksiya verin

Başlanğıc

Niyə React.js?

React.js ilə əsas məsələ kodu yenidən istifadə etməkdir. Məsələn, 100 səhifədə bir naviqasiya çubuğunuz olduğunu söyləyin. Yeni bir səhifə əlavə etməlisinizsə, hər səhifədəki naviqasiya çubuğunu dəyişdirməlisiniz, yəni eyni şeyi 100 səhifə üçün etməlisiniz. Makrolarla belə bu çox yorucu olur.

Lazımi proqram/paketlərin quraşdırılması

Sizə lazım olacaq:

npm/iplik

Necə quraşdırılır:

1. Gedin və ən son LTS Node.js qurun
2. İSTEĞE BAĞLI: paket meneceriniz kimi ipliyə üstünlük verirsinizsə, powershell npm install -g ipliyinə yazaraq ipliyi quraşdırın.
3. Powershell/cmd.exe açın
4. Layihənizi yaratmaq istədiyiniz qovluğa gedin
5. Npx Create-React-app yazın.

Quraşdırma mərhələsini başa vurdunuz. sınamaq üçün powershell açın, layihə kataloqunuza gedin və npm start yazın. Varsayılan brauzerinizə bir veb səhifəsi yükləməlisiniz.

Addım 2: Adım 1: Başlayın

Başlamaq üçün /src qovluğundan aşağıdakı faylları silin:

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

Bu fayllara ehtiyacımız yoxdur.

Fayl sistemimizi də təşkil edək. Bu qovluqları /src /-də yaradın:

• js
• css

App.js -ni js dir -ə, App.css -ni də css dir -ə qoyun.

Sonra, asılılıqları yenidən təşkil edək.

index.js -də, serviceWorker və index.css üçün idxalları silin. ServiceWorker.register () xidmətini silin. Tətbiqin yollarını dəyişdirin.

App.js -də, artıq ehtiyacımız olmadığı üçün logo.svg üçün idxalı silin. App.css -ni yenidən yönləndirin. App () funksiyasını və tətbiq üçün ixracı silin.

React -də elementləri təyin etməyin 2 üsulu var. Fəaliyyət və siniflərimiz var. funksiyalar daha az mürəkkəb elementlər üçündür və siniflər ümumiyyətlə daha mürəkkəb komponentlər üçündür. Bir todo siyahısı bir dəstə HTML -dən daha mürəkkəb olduğu üçün sinif sintaksisindən istifadə edəcəyik.

Bunu kodunuza əlavə edin:

pastebin.com/nGXeCpaH

html 2 divs daxilində gedəcək.

Elementi təyin edək.

pastebin.com/amjd0jnb

əyalətdə dəyəri necə təyin etdiyimizə diqqət yetirin. Buna daha sonra ehtiyacımız olacaq.

render funksiyasında salamı {this.state.value} ilə əvəz edin

təyin etdiyimiz vəziyyətdən keçən dəyəri göstəririk.

buna görə sınayaq!

Tətbiqin göstərmə funksiyasında bunu bununla əvəz edin:

pastebin.com/aGLX4jVE

bir dəyər göstərməlidir: "test".

birdən çox tapşırıq verə biləcəyimizi görək!

React -in yalnız bir element göstərməsinə nail olmaq əvəzinə, bir sıra yarada bilərik və əvəzinə serialın göstərilməsinə reaksiya verə bilərik.

render funksiyasını buna dəyişdirin:

pastebin.com/05nqsw71

Bu, 10 fərqli vəzifəni yerinə yetirməlidir. Açarları necə əlavə etdiyimizə diqqət yetirin. Bu açarlar, ehtiyac duyduqda bizə reaksiya vermək üçün identifikator olaraq istifadə olunur.

Tapşırıq siyahımız işlədiyi üçün tapşırıqları yükləmək üçün bir yol tapırıq. Dövlətimizin gəldiyi yer budur.

işimizə bir konstruktor əlavə edək.

pastebin.com/9jHAz2AS

Bu qurucuda, taskArray -ı render funksiyasından uzaq vəziyyətə gətirdik. render funksiyasında taskArray və loop üçün silin. div -dəki taskArray -ı bu vəziyyətə salın.dövlət.təşkili Array.

İndiyə qədər App.js kodunuz belə görünməlidir:

pastebin.com/1iNtUnE6

Addım 3: Nəsnələr əlavə etmək və silmək üçün bir yol əlavə edin

Nəsnələri əlavə etmək və silmək üçün bir yol əlavə edək. Planlaşdıraq.

Bizə nə lazımdır?

• İstifadəçinin obyekt əlavə etmə üsulu
• Obyektlərin saxlandığı yer
• Obyektləri geri qaytarmağın bir yolu

Nə istifadə edəcəyik?

• Bir element
• JSON ilə yerli saxlama API

Giriş elementindən başlayaq.

{this.state.taskArray} altında, kodunuza bir giriş və düymə əlavə edin

Əlavə et

İndi mətn daxil etmə və Əlavə etmək düyməsi olmalıdır.

Hal -hazırda heç bir şey etmir, buna görə də tətbiq üsulumuza 6 metod əlavə edək.

Düyməni tıkladıqda və kimsə girişdə yazanda bir üsula ehtiyacımız var. Həm də tapşırıqlar silsiləsini yaratmaq, vəzifələri saxlamaq, yükləmək və silmək üçün bir yola ehtiyacımız var.

bu 6 metodu əlavə edək:

buttonClick ()

inputTyped (evt)

generateTaskArray ()

saveTasks (vəzifələr)

getTasks ()

removeTask (id)

bu dəyişəni vəziyyətimizə əlavə edək:

giriş

Bunun üçün funksiyalarımızı da bağlamalıyıq.

pastebin.com/syx465hD

İşlevsellik əlavə etməyə başlayaq.

buna bənzər 2 xüsusiyyət əlavə edin:

İstifadəçi girişdə bir şey yazanda bu funksiyanı yerinə yetirir.

OnClick atributunu əlavə et:

Əlavə et

istifadəçi düyməni basdıqda funksiya yerinə yetirilir.

İndi html hissəsi tamamlandıqdan sonra funksionallığa davam edək.

LocalStorage API interfeysini əvvəlcədən yazmışam, buna görə saveTasks, getTasks və removeTask funksiyalarını bununla əvəz edin:

pastebin.com/G02cMPbi

inputTyped funksiyasından başlayaq.

istifadəçi yazdıqda, girişin daxili dəyərini dəyişdirməliyik.

Reaksiya verilən setState funksiyasından istifadə edərək bunu edək.

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

bu şəkildə, giriş dəyərini əldə edə bilərik.

bitdikdən sonra buttonClick funksiyası üzərində işləyə bilərik.

tapşırıq siyahısına bir vəzifə əlavə etməliyik. əvvəlcə tapşırıq siyahısını localStorage -dan çıxarırıq, redaktə edirik və sonra saxlayırıq. Daha sonra onu yeniləmək üçün taskListin yenidən işlənməsini çağırırıq.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

tapşırıqları alırıq, giriş dəyərini vəzifələrə itələyirik və sonra saxlayırıq. Sonra tapşırıq dizisini yaradırıq.

İndi generateTaskArray () funksiyası üzərində işləyək.

etməliyik:

• vəzifələr almaq
• bir sıra vəzifə komponentləri yaradın
• göstərmək üçün tapşırıq komponentlərini ötürün

getTasks () ilə vəzifələri əldə edə və onları dəyişəndə saxlaya bilərik

var vəzifələri = getTasks (). tapşırıqlar

sonra bir sıra yaratmalı və onu doldurmalıyıq.

pastebin.com/9gNXvNWe

indi işləməlidir.

QAYNA KODU:

github.com/bluninja1234/todo_list_instructables

EKSTRA FİKİRLƏR:

Silmə funksiyası (çox sadə, onclick əlavə edin və açar indeksindən removeTask istifadə edərək silin)

CSS (eyni zamanda özünüz yazın və ya bootstrap istifadə edin)