React Intermediate Tutorial: 3 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:16

React Intermediate Tutorial

მზა პროდუქტი იხილეთ აქ.

რას ისწავლი?

თქვენ შექმნით მარტივი დავალებების ჩამონათვალს React.js– ით და გაეცნობით რეაქციის უფრო რთულ ნაწილებს. წინაპირობები (რეკომენდებულია) დაასრულებს რეაქციას. Js დაწყების სახელმძღვანელო. HTML- ის ცოდნა CSS- ის ცოდნა ძირითადი shell ბრძანებები ღირსეული ცოდნა JavaScript- ში

მარაგები

ყველა პროგრამული უზრუნველყოფა იქნება გაკვეთილი.

თქვენ დაგჭირდებათ კომპიუტერი დაინსტალირებული შემდეგი პროგრამული უზრუნველყოფით:

• npm/ნართი
• IDE, რომელიც მხარს უჭერს js
• ვებ ბრაუზერი

ნაბიჯი 1: რეაგირება შუალედურ გაკვეთილზე

Ვიწყებთ

რატომ React.js?

React.js– ით არის მთავარი კოდის ხელახლა გამოყენება. მაგალითად, თქვით, რომ გაქვთ ნავიგაციის ზოლი, რომელიც გაქვთ 100 გვერდზე. თუ თქვენ გჭირდებათ ახალი გვერდის დამატება, მაშინ თქვენ უნდა შეცვალოთ ნავიგაციის ზოლი ყველა გვერდზე, რაც იმას ნიშნავს, რომ იგივე უნდა გააკეთოთ 100 გვერდისთვის. მაკროების შემთხვევაშიც კი, ეს ძალიან დამღლელი ხდება.

საჭირო პროგრამული უზრუნველყოფის/პაკეტების დაყენება

თქვენ დაგჭირდებათ:

npm/ნართი

Როგორ დავაყენოთ:

1. გადადით და დააინსტალირეთ Node.js- ის უახლესი LTS
2. სურვილისამებრ: თუ თქვენ გირჩევნიათ ნართი, როგორც პაკეტის მენეჯერი, დააინსტალირეთ ძაფები powerhell npm install -g ძაფის აკრეფით
3. გახსენით powerhell/cmd.exe
4. გადადით დირექტორიაში, რომელშიც გსურთ შექმნათ თქვენი პროექტი
5. ჩაწერეთ npx create-react-app.

თქვენ დაასრულეთ დაყენების ეტაპი. მისი შესამოწმებლად, გახსენით powerhell, გადადით თქვენი პროექტის დირექტორიაში და ჩაწერეთ 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 დირ.

შემდეგი, მოდით მოვახდინოთ დამოკიდებულების რეორგანიზაცია.

index.js- ში, ამოიღეთ იმპორტი იმპორტისთვის serviceWorker და index.css. წაშალეთ serviceWorker.register (). გადახედეთ ბილიკებს აპლიკაციისთვის.

App.js– ში ამოიღეთ იმპორტი logo.svg– სთვის, რადგან ის აღარ გვჭირდება. მარშრუტის აპლიკაცია. Css. წაშალეთ აპლიკაცია () ფუნქცია და ექსპორტი პროგრამისთვის.

React– ში ჩვენ გვაქვს ელემენტების განსაზღვრის 2 გზა. ჩვენ გვაქვს ფუნქციები და კლასები. ფუნქციები ნაკლებად რთულ საგნებზეა და კლასები ზოგადად უფრო რთულ კომპონენტებზეა. რადგან ტოდოს სია უფრო რთულია ვიდრე HTML– ის რამოდენიმე, ჩვენ გამოვიყენებთ კლასის სინტაქსს.

დაამატეთ ეს თქვენს კოდს:

pastebin.com/nGXeCpaH

html გადავა 2 დივიზიონში.

მოდით განვსაზღვროთ ელემენტი.

pastebin.com/amjd0jnb

შენიშნეთ, როგორ განვსაზღვრეთ ღირებულება სახელმწიფოში. ეს მოგვიანებით დაგვჭირდება.

რენდერის ფუნქციაში ჩაანაცვლეთ hi {this.state.value} - ით

ჩვენ ვაძლევთ მნიშვნელობას, რომელიც გადაეცემა ჩვენს მიერ განსაზღვრულ მდგომარეობას.

მოდით გამოვცადოთ!

პროგრამის რენდერის ფუნქციაში შეცვალეთ იგი შემდეგით:

pastebin.com/aGLX4jVE

მან უნდა აჩვენოს მნიშვნელობა: "ტესტი".

ვნახოთ, შეგვიძლია თუ არა რამოდენიმე ამოცანის შესრულება!

იმის ნაცვლად, რომ მივიღოთ რეაქცია მხოლოდ ერთი ელემენტის გამოსაყენებლად, ჩვენ შეგვიძლია შევქმნათ მასივი და ვუთხრა რეაქცია მის ნაცვლად რენდერი.

შეცვალეთ რენდერის ფუნქცია:

pastebin.com/05nqsw71

ამან უნდა შეასრულოს 10 განსხვავებული ამოცანა. გაითვალისწინეთ როგორ დავამატეთ გასაღებები. ეს გასაღებები გამოიყენება როგორც რეაგირების იდენტიფიკატორი და ჩვენ გვჭირდება ისინი.

ახლა, როდესაც ჩვენი ამოცანების სია მუშაობს, ჩვენ ვპოულობთ გზას დავალებების ჩატვირთვისთვის. ეს არის სადაც ჩვენი სახელმწიფო შემოდის.

მოდით დავამატოთ კონსტრუქტორი ჩვენს.

pastebin.com/9jHAz2AS

ამ კონსტრუქტორში ჩვენ taskArray გადავაცილეთ რენდერის ფუნქციას სახელმწიფოში. წაშალეთ taskArray და for loop რენდერის ფუნქციაში. შეცვალეთ taskArray div- ში this.state.taskArray.

ამ დროისთვის თქვენი App.js კოდი ასე უნდა გამოიყურებოდეს:

pastebin.com/1iNtUnE6

ნაბიჯი 3: ობიექტების დამატებისა და ამოღების გზის დამატება

მოდით დავამატოთ საგნების დამატებისა და ამოღების გზა. მოდი დავგეგმოთ.

რა გვჭირდება?

• გზა, რომელიც მომხმარებელს დაემატება ობიექტებს
• ადგილი საგნების შესანახად
• საგნების ამოღების საშუალება

რას გამოვიყენებთ?

• ელემენტი
• ლოკალური შენახვის API w/ JSON

დავიწყოთ შეყვანის ელემენტით.

ქვემოთ {this.state.taskArray}, დაამატეთ შეყვანა და ღილაკი თქვენს კოდს

დამატება

ახლა უნდა იყოს ტექსტის შეყვანა და დამატების ღილაკი.

ის ახლა არაფერს აკეთებს, ამიტომ მოდით დავამატოთ 6 მეთოდი ჩვენს აპლიკაციის მეთოდს.

ჩვენ გვჭირდება მეთოდი, როდესაც ღილაკზე დაჭერილია და ასევე, როდესაც ვიღაც აკრიფებს შეყვანას. ჩვენ ასევე გვჭირდება გზა დავალებების მასივის შესაქმნელად, ასევე დავალებების შენახვა, ჩატვირთვა და წაშლა.

დავამატოთ ეს 6 მეთოდი:

ღილაკი დააწკაპუნეთ ()

შეყვანის ტიპი (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});

ამ გზით, ჩვენ შეგვიძლია მივიღოთ შეყვანის მნიშვნელობა.

ამის დასრულების შემდეგ, ჩვენ შეგვიძლია ვიმუშაოთ ღილაკზე დაჭერის ფუნქციაზე.

ჩვენ უნდა დავამატოთ დავალება დავალებების სიას. ჩვენ პირველად ამოვიღებთ ამოცანების ჩამონათვალს 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 კლავიშის ინდექსიდან)

CSS (ასევე მარტივი, დაწერე საკუთარი ან გამოიყენე ჩამტვირთავი სამაჯური)