React Intermediate Tutorial: 3 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:01

React Intermediate Tutorial

Бэлэн бүтээгдэхүүнийг эндээс үзнэ үү.

Та юу сурах вэ?

Та React.js ашиглан хийх ёстой энгийн жагсаалтыг гаргаж, хариу үйлдлийн илүү төвөгтэй хэсгүүдийн талаар олж мэдэх болно. Урьдчилсан нөхцөлүүд (маш их санал болгож буй) нь re.js эхлэх гарын авлага, HTML -ийн мэдлэг CSS -ийн үндсэн бүрхүүлийн командууд JavaScript -ийн зохих мэдлэг.

Хангамж

Бүх програм хангамжийг зааварт тусгасан болно.

Танд дараах програм хангамжийг суулгасан компьютер хэрэгтэй болно.

• npm/утас
• Js дэмждэг IDE
• Вэб хөтөч

Алхам 1: Дунд шатны зааварчилгааг авах

Эхлэх

Яагаад React.js гэж?

React.js -ийн тусламжтайгаар кодыг дахин ашиглах нь чухал юм. Жишээлбэл, танд 100 хуудастай навигацийн самбар байгаа гэж хэлээрэй. Хэрэв та шинэ хуудас нэмэх шаардлагатай бол хуудас бүрийн навигацийн самбарыг өөрчлөх хэрэгтэй бөгөөд энэ нь та 100 хуудсанд ижил зүйлийг хийх ёстой гэсэн үг юм. Макро байсан ч гэсэн энэ нь маш уйтгартай болдог.

Шаардлагатай програм хангамж/багцыг суулгах

Танд хэрэгтэй болно:

npm/утас

Хэрхэн суулгах вэ:

1. Node.js -ийн хамгийн сүүлийн үеийн LTS -ийг суулгаарай
2. СОНГОЛТТОЙ: хэрэв та өөрийн утас менежерээр утсыг илүүд үздэг бол, powerhell npm install -g утас руу бичиж утас суулгаарай.
3. Powershell/cmd.exe -ийг нээнэ үү
4. Төслөө үүсгэхийг хүсч буй лавлах руу очно уу
5. Npx create-react-app гэж бичнэ үү.

Та тохиргооны үе шатыг дуусгасан. Үүнийг шалгахын тулд powershell -ийг нээгээд төслийнхөө лавлах руу очоод npm start гэж бичнэ үү. Та вэб хөтөч дээрээ вэб хуудсыг ачаалах ёстой.

Алхам 2: Алхам 1: Эхлэх

Эхлэхийн тулд дараах файлуудыг /src директороос устгана уу.

• App.test.js
• индекс.css
• logo.svg
• serviceWorker.js
• setupTests.js

Бидэнд эдгээр файл хэрэггүй.

Мөн файлын системээ зохион байгуулцгаая. Эдгээр сангуудыг /src /дээр үүсгэ:

• js
• css

App.js -ийг js dir -д, App.css -ийг css dir -д оруулна уу.

Дараа нь хараат байдлыг дахин зохион байгуулцгаая.

index.js дээр serviceWorker болон index.css -ийн импортыг устгана уу. ServiceWorker.register () -г устгана уу. Аппликешны замыг дахин чиглүүлэх.

App.js дээр logo.svg -ийн импортыг устгах хэрэгтэй болно, учир нь бидэнд энэ шаардлагагүй болно. App.css програмыг дахин чиглүүлэх. App () функцийг устгаж, програмыг экспортлох.

React дээр бидэнд элементүүдийг тодорхойлох 2 арга бий. Бидэнд функц, ангиуд байдаг. функцууд нь арай бага төвөгтэй зүйлүүдэд зориулагдсан бөгөөд ангиуд нь ерөнхийдөө илүү төвөгтэй бүрэлдэхүүн хэсгүүдэд зориулагдсан болно. Todo -ийн жагсаалт нь HTML -ээс илүү төвөгтэй байдаг тул бид ангийн синтаксийг ашиглах болно.

Үүнийг код дээрээ нэмнэ үү:

pastebin.com/nGXeCpaH

html 2 divs дотор орно.

Элементийг тодорхойлъё.

pastebin.com/amjd0jnb

Бид муж улсын үнэ цэнийг хэрхэн тодорхойлсныг анхаарч үзээрэй. Энэ нь бидэнд хожим хэрэгтэй болно.

рендер функц дээр сайн байна уу {this.state.value} гэж орлуулаарай

бид тодорхойлсон төлөвөөс дамжуулсан утгыг үзүүлж байна.

Тиймээс туршиж үзье!

Апп -ийн рэндэрлэх функцэд үүнийг дараах байдлаар солино уу.

pastebin.com/aGLX4jVE

Энэ нь "тест" гэсэн утгыг харуулах ёстой.

хэд хэдэн даалгавар хийх боломжтой эсэхийг харцгаая!

React -ийг зөвхөн нэг элемент үзүүлэхийн оронд бид массив үүсгэж, оронд нь массивыг үзүүлэхийн тулд хариу өгөхийг хэлж болно.

render функцийг дараах байдлаар өөрчилнө үү.

pastebin.com/05nqsw71

Энэ нь 10 өөр ажил гүйцэтгэх ёстой. Бид түлхүүрүүдийг хэрхэн нэмсэнийг анхаарч үзээрэй. Эдгээр түлхүүрүүд нь бидэнд хэрэгтэй бол хариу үйлдэл үзүүлэх, бидэнд таних тэмдэг болгон ашигладаг.

Одоо бидний даалгаврын жагсаалт ажиллаж байгаа тул бид даалгавруудыг ачаалах арга замыг хайж байна. Энд л манай төр орж ирдэг.

манайд конструктор нэмж оруулъя.

pastebin.com/9jHAz2AS

Энэ бүтээгч дээр бид taskArray -ийг рендер хийх функцээс шилжүүлж төлөвт шилжүүлсэн. render функц дахь taskArray болон for loop -ийг устгана уу. div доторх taskArray -ийг this.state.taskArray болгон өөрчил.

Одоогоор таны App.js код дараах байдлаар харагдах ёстой.

pastebin.com/1iNtUnE6

Алхам 3: Объект нэмэх, хасах аргыг нэмж оруулах

Объект нэмэх, хасах аргыг нэмж оруулъя. Үүнийг төлөвлөж үзье.

Бидэнд юу хэрэгтэй вэ?

• Хэрэглэгч объект нэмэх арга
• Объект хадгалах газар
• Объектуудыг буцааж авах арга

Бид юу ашиглах гэж байна вэ?

• Элемент
• JSON -тэй localstorage 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 функцийг эхлүүлье.

Хэрэглэгч бичих үед бид оролтын дотоод утгыг өөрчлөх хэрэгтэй болно.

Үүнийг react -т өгсөн 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 task = getTasks (). task

дараа нь бид массив үүсгэж түүнийг дүүргэх хэрэгтэй.

pastebin.com/9gNXvNWe

энэ нь одоо ажиллах ёстой.

ЭХ КОД:

github.com/bluninja1234/todo_list_instructables

Нэмэлт санаа:

Устгах функц (маш энгийн, товчлуурыг нэмж, түлхүүр индексээс removeTask ашиглан устгаарай)

CSS (бас энгийн, өөрөө бичих эсвэл bootstrap ашиглах)