React Orta Düzey Eğitimi: 3 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:18

React Intermediate Eğitimi

Bitmiş ürünü buradan görüntüleyin.

Ne öğreneceksin?

React.js ile basit bir yapılacaklar listesi oluşturacak ve tepkinin daha karmaşık kısımlarını öğreneceksiniz. Önkoşullar (şiddetle tavsiye edilir) tepki.js başlangıç kılavuzunu tamamlar. HTML bilgisi CSSBasic kabuk komutları bilgisiJavaScript'te yeterli bilgi

Gereçler

Tüm yazılımlar eğitimde ele alınacaktır.

Aşağıdaki yazılımların kurulu olduğu bir bilgisayara ihtiyacınız olacak:

• npm/iplik
• js'yi destekleyen bir IDE
• bir web tarayıcısı

Adım 1: Orta Düzey Eğitimi Tepki

Başlarken

Neden React.js?

React.js ile amaç kodu yeniden kullanmaktır. Örneğin, 100 sayfada sahip olduğunuz bir gezinme çubuğunuz olduğunu varsayalım. Yeni bir sayfa eklemeniz gerekiyorsa, her sayfada gezinme çubuğunu değiştirmeniz gerekir, yani aynı şeyi 100 sayfa için yapmanız gerekir. Makrolarla bile bu çok sıkıcı hale geliyor.

Gerekli Yazılımları/Paketleri Yükleme

İhtiyacın olacak:

npm/iplik

Nasıl kurulur:

1. Gidin ve Node.js'nin en son LTS'sini yükleyin
2. İSTEĞE BAĞLI: Paket yöneticiniz olarak ipliği tercih ediyorsanız, powershell npm install -g thread'e yazarak ipliği kurun
3. powershell/cmd.exe'yi açın
4. Projenizi oluşturmak istediğiniz dizine gidin
5. npx create-tepki-app yazın.

Kurulum aşamasını tamamladınız. test etmek için powershell'i açın, proje dizininize gidin ve npm start yazın. varsayılan tarayıcınıza yüklenen bir web sayfası almalısınız.

Adım 2: Adım 1: Başlarken

Başlamak için /src dizininizden aşağıdaki dosyaları silin:

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

Bu dosyalara ihtiyacımız yok.

Ayrıca dosya sistemimizi de düzenleyelim. Bu dizinleri /src/ içinde oluşturun:

• js
• css

App.js'yi js dizinine ve App.css'i css dizinine koyun.

Ardından, bağımlılıkları yeniden düzenleyelim.

index.js'de serviceWorker ve index.css için içe aktarmaları kaldırın. serviceWorker.register()'ı silin. Uygulamanın yollarını yeniden yönlendirin.

App.js'de logo.svg için içe aktarmayı kaldırın, çünkü artık buna ihtiyacımız yok. App.css'yi yeniden yönlendirin. App() işlevini ve App için dışa aktarmayı silin.

React'te öğeleri tanımlamanın 2 yolu vardır. Fonksiyonlarımız ve sınıflarımız var. fonksiyonlar daha az karmaşık öğeler içindir ve sınıflar genellikle daha karmaşık bileşenler içindir. Yapılacaklar listesi bir grup HTML'den daha karmaşık olduğundan, sınıf sözdizimini kullanacağız.

Bunu kodunuza ekleyin:

pastebin.com/nGXeCpaH

html 2 div içinde gidecek.

Öğeyi tanımlayalım.

pastebin.com/amjd0jnb

durumda değeri nasıl tanımladığımıza dikkat edin. Buna daha sonra ihtiyacımız olacak.

render işlevinde, hi'yi {this.state.value} ile değiştirin

tanımladığımız durumdan geçen değeri render ediyoruz.

öyleyse test edelim!

Uygulamanın oluşturma işlevinde, şununla değiştirin:

pastebin.com/aGLX4jVE

bir değer göstermelidir: "test".

Bakalım birden fazla Görev gerçekleştirebilecek miyiz!

React'in yalnızca bir öğe oluşturmasını sağlamak yerine, bir dizi oluşturabilir ve bunun yerine diziyi oluşturmasını tepki olarak söyleyebiliriz.

bunun render işlevini değiştirin:

pastebin.com/05nqsw71

bu 10 farklı görev yapmalıdır. Anahtarları nasıl eklediğimize dikkat edin. Bu anahtarlar, ihtiyaç duymamız halinde tepki ve biz için tanımlayıcılar olarak kullanılır.

Artık görev listemiz çalıştığına göre, görevleri yüklemenin bir yolunu buluyoruz. İşte bizim devletimiz burada devreye giriyor.

dosyamıza bir kurucu ekleyelim.

pastebin.com/9jHAz2AS

Bu yapıcıda, taskArray'i render işlevinden duruma taşıdık. render işlevinde taskArray ve for döngüsünü silin. div'deki taskArray öğesini this.state.taskArray olarak değiştirin.

Şimdiye kadar App.js kodunuz şöyle görünmelidir:

pastebin.com/1iNtUnE6

Adım 3: Nesneleri Eklemek ve Kaldırmak İçin Bir Yol Ekleme

Nesneleri eklemek ve kaldırmak için bir yol ekleyelim. Hadi planlayalım.

Neye ihtiyacımız var?

• Kullanıcının nesne eklemesi için bir yol
• Nesneleri saklamak için bir yer
• Nesneleri almanın bir yolu

Ne kullanacağız?

• Bir element
• JSON ile yerel depolama API'si

Giriş öğesiyle başlayalım.

{this.state.taskArray} altında, kodunuza bir giriş ve düğme ekleyin

Ekle

Şimdi bir metin girişi ve Ekle düğmesi olmalıdır.

Şu anda hiçbir şey yapmıyor, bu yüzden App yöntemimize 6 yöntem ekleyelim.

Düğmeye tıklandığında ve ayrıca biri girdi girdiğinde bir yönteme ihtiyacımız var. Ayrıca görev dizisini oluşturmanın yanı sıra görevleri kaydetme, yükleme ve kaldırma yöntemine de ihtiyacımız var.

şu 6 yöntemi ekleyelim:

düğmeClick()

inputTyped(evt)

oluşturmakTaskArray()

saveTasks(görevler)

getGörevler()

kaldırGörev(kimlik)

bu değişkeni de durumumuza ekleyelim:

giriş

Fonksiyonlarımızı da buna bağlamamız gerekiyor.

pastebin.com/syx465hD

İşlevsellik eklemeye başlayalım.

benzer şekilde 2 nitelik ekleyin:

bu, kullanıcı girdiye herhangi bir şey yazdığında işlevi yürütür.

Add gibi bir onClick özelliği ekleyin:

Ekle

kullanıcı düğmeye tıkladığında işlev yürütülür.

html kısmı da bittiğine göre şimdi işlevselliğe geçelim.

localStorage API arabirimini önceden yazdım, bu nedenle saveTasks, getTasks ve removeTask işlevlerini şununla değiştirin:

pastebin.com/G02cMPbi

inputTyped işleviyle başlayalım.

kullanıcı yazarken girdinin dahili değerini değiştirmemiz gerekiyor.

bunu tepki ile sağlanan setState işlevini kullanarak yapalım.

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

bu şekilde girdinin değerini alabiliriz.

bu yapıldıktan sonra, buttonClick işlevi üzerinde çalışabiliriz.

görev listesine bir görev eklememiz gerekiyor. önce localStorage'dan görev listesini çekiyoruz, düzenleyip kaydediyoruz. Ardından, onu güncellemek için görev Listesinin yeniden oluşturucusunu çağırırız.

var taskList = this.getTasks();

taskList.tasks.push(bu.durum.input);

this.saveTasks(görevListesi);

this.generateTaskArray();

görevleri alıyoruz, giriş değerini görevlere itiyoruz ve sonra kaydediyoruz. Daha sonra görev dizisini oluşturuyoruz.

şimdi, createTaskArray() işlevi üzerinde çalışalım.

Bizim ihtiyacımız:

• görevleri al
• bir dizi görev bileşeni oluşturun
• oluşturmak için görev bileşenlerini iletin

görevleri alabilir ve bunları getTasks() ile bir değişkende saklayabiliriz.

var görevler = getTasks().tasks

daha sonra bir dizi oluşturmamız ve onu doldurmamız gerekiyor.

pastebin.com/9gNXvNWe

şimdi çalışıyor olmalı.

KAYNAK KODU:

github.com/bluninja1234/todo_list_instructables

EKSTRA FİKİRLER:

Kaldırma işlevi (çok basit, bir onclick ekleyin ve anahtar dizininden removeTask kullanarak silin)

CSS (ayrıca basit, kendinizinkini yazın veya önyükleme kullanın)