Bu klasik, anlaşılması kolay örnek uygulama ile React becerilerinizi geliştirin.

Uygulamalı deneyim olmadan React gibi yeni bir teknoloji öğrenmek kafa karıştırıcı olabilir. Bir geliştirici olarak, gerçek dünya projeleri oluşturmak, kavramları ve özellikleri anlamanın en etkili yollarından biridir.

React ile basit bir yapılacaklar listesi oluşturma sürecini takip edin ve React'in temellerine ilişkin anlayışınızı geliştirin.

Yapılacaklar Listesi Oluşturmak için Ön Koşullar

Bu projeye başlamadan önce birkaç gereksinim vardır. Aşağıdakiler hakkında temel bir anlayışa sahip olmanız gerekir, HTML, CSS, JavaScript, ES6, ve Tepki. Node.js'ye sahip olmanız gerekir ve npm, JavaScript paket yöneticisi. Ayrıca Visual Studio Code gibi bir kod düzenleyiciye de ihtiyacınız var.

İşte bu projenin kullanacağı CSS:

/* stiller.css */
.Uygulama {
font ailesi: sans Serif;
görüntülemek: esnek;
haklı içerik: merkez;
hizalama öğeleri: merkez;
yükseklik: 100vh;
}
.Yapmak {
arka plan rengi: buğday;
Metin hizalama: merkez;
Genişlik





instagram viewer

: 50%;
dolgu malzemesi: 20piksel;
kutu gölgesi: rgba(0, 0, 0, 0.24) 0piksel 3piksel 8piksel;
marj: Oto;
}


Ul {
liste stili türü: hiçbiri;
dolgu malzemesi: 10piksel;
marj: 0;
}


düğme {
Genişlik: 70piksel;
yükseklik: 35piksel;
arka plan rengi: kumlu kahverengi;
sınır: hiçbiri;
yazı Boyutu: 15piksel;
yazı tipi ağırlığı: 800;
sınır yarıçapı: 4piksel;
kutu gölgesi: rgba(0, 0, 0, 0.24) 0piksel 3piksel 8piksel;
}


.giriş {
sınır: hiçbiri;
Genişlik: 340piksel;
yükseklik: 35piksel;
sınır yarıçapı: 9piksel;
Metin hizalama: merkez;
kutu gölgesi: rgba(0, 0, 0, 0.24) 0piksel 3piksel 8piksel;
}


.Tepe {
görüntülemek: esnek;
haklı içerik: merkez;
açıklık: 12piksel;
}


li {
görüntülemek: esnek;
haklı içerik: eşit boşluk;
hizalama öğeleri: merkez;
dolgu malzemesi: 10piksel;
}
li:önce {
içerik: "*";
sağ kenar boşluğu: 5piksel;
}

1. Proje Ortamını Ayarlama

Bu aşama, projeyi kurmak için gereken tüm komutları ve dosyaları içerir. Başlamak için yeni bir React projesi oluşturun. Bir terminal açın ve şu komutu çalıştırın:

npx create-react-app yapılacaklar listesi

Bu, gerekli tüm dosyaları ve paketleri de yüklemek için birkaç dakika sürer. Yapılacaklar listesi adlı yeni bir React uygulaması oluşturur. Böyle bir şey gördüğünüzde doğru yoldasınız:

Bu komutu kullanarak yeni oluşturduğunuz projenizin dizinine gidin:

cd yapılacaklar listesi

Projenizi bu komutla yerel olarak çalıştırın:

Npm başlangıç

Ardından projeyi şu adreste tarayıcınızda görüntüleyin: http://localhost: 3000/.

Projenizin src klasöründe ihtiyacınız olmayan birkaç dosya var. Bu dosyaları silin: Uygulama.css, Uygulama.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Mevcut dosyalarda içe aktarma ifadelerini aradığınızdan emin olun ve silinen dosyalara yapılan tüm referansları kaldırın.

2. Yapılacaklar Listesi Bileşeni Oluşturma

Bu, yapılacaklar listesi için gerekli tüm kodları uygulayacağımız bileşendir. src klasörünüzde “TodoList.js” adlı bir dosya oluşturun. Ardından, her şeyin olması gerektiği gibi çalıştığını test etmek için aşağıdaki kodu ekleyin:

içe aktarmak Tepki itibaren'tepki';
sabit Yapılacaklar Listesi = () => {
geri dönmek (




Merhaba Dünya </h2>
 </div>
 );
};


ihracatvarsayılan Yapılacaklar listesi;

App.js dosyanızı açın, TodoList bileşenini içe aktarın ve App bileşeninin içinde işleyin. Bunun gibi bir şey görünecek:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak'./styles.css'
içe aktarmak Yapılacaklar listesi itibaren'./Yapılacaklar listesi';
sabit uygulama = () => {
geri dönmek (





 </div>
 );
};
ihracatvarsayılan Uygulama;

Localhost: 3000'in çalıştığı yerel tarayıcınıza gidin ve cesurca yazılmış "Merhaba Dünya"yı kontrol edin. Hepsi iyi? Bir sonraki adıma.

3. Giriş ve Giriş Değişikliğini Yönet

Bu adım, giriş kutusuna bir görev yazdığınızda bir olayı tetiklemenizi sağlar. React paketinizden useState kancasını içe aktarın. useState, durumu verimli bir şekilde yönetmenize izin veren bir React kancasıdır.

içe aktarmak Tepki, { useState } itibaren'tepki';

Boş bir dizenin başlangıç ​​değeriyle "inputTask" adlı bir durum değişkeni oluşturmak için useState kancasını kullanın. Ayrıca, kullanıcı girişine dayalı olarak "inputTask" değerini güncellemek için "setInputTask" işlevini atayın.

sabit [inputTask, setInputTask] = useState("");

Bir olay parametresini alarak "handleInputChange" adlı bir işlev oluşturun. setInputTask işlevini kullanarak inputTask durumunu güncellemelidir. event.target.value ile olayın hedefinin değerine erişin. Bu, giriş alanının değeri değiştiğinde çalışır.

sabit handleInputChange = (etkinlik) => {
 setInputTask (event.target.value);
};

Birkaç JSX öğesi döndürün. İlki “Yapılacaklar Listem” yazan başlıktır, istediğiniz başlığa karar verebilirsiniz. Giriş öğelerinize birkaç özellik ekleyin. yazın=“metin”: Bu, giriş türünüzü metin olarak belirtir, değer={inputTask}: Bu, giriş alanının değerini inputTask durum değişkenine bağlayarak geçerli değeri yansıtmasını sağlar.onChange={handleInputChange}: Bu, giriş alanının değeri değiştiğinde, inputTask durumunu güncelleyerek, handleInputChange işlevini çağırır.

"Yapmak">
Yapılacaklar Listem</h1>
"Tepe">
"giriş" tür="metin" değer={inputTask}
 onChange={handleInputChange} yer tutucu="Bir görev girin" />

Devam ederek, girilen görevi listeye ekleyecek bir düğme oluşturun.

Bu aşamada, tarayıcı çıktınız bu şekilde görünecektir.

4. "EKLE" Düğmesine İşlevsellik Ekleyin

Kullan kullanımDevlet boş bir dizinin başlangıç ​​değeriyle 'liste' adlı bir durum değişkeni oluşturmak için kancayı kullanın. "setList" değişkeni, kullanıcı girişine dayalı olarak görev dizisini depolar.

sabit [liste, setList] = useState([]);

Kullanıcı yeni bir görev eklemek için "EKLE" düğmesini tıkladığında çalışacak bir işlev handleAddTodo oluşturun. Kullanıcı tarafından girilen yeni görevi temsil eden todo parametresini alır. Ardından, Math.random() kullanılarak oluşturulan benzersiz bir kimliğe ve giriş metnini tutan todo özelliğine sahip bir newTask nesnesi oluşturun.

Devam ederek, listedeki mevcut görevlerle yeni bir dizi oluşturmak için forma operatörünü […list] kullanarak liste durumunu güncelleyin. newTask'ı dizinin sonuna ekleyin. Bu, orijinal durum dizisini mutasyona uğratmamamızı sağlar. Son olarak, kullanıcı düğmeyi tıklattığında giriş alanını temizleyerek inputTask durumunu boş bir dizeye sıfırlayın.

sabit handleAddTodo = (yapmak) => {
sabit yeniGörev = {
 İD: Matematik.rastgele(),
 yapılacak: yapılacak
 };
 setList([...liste, yeniGörev]);
 setInputTask('');
};

Dahil et tıklamada "EKLE" metniyle düğme elemanına öznitelik. Tıklandığında, tetikler koluAddTodo liste durumuna yeni bir görev ekleyen işlev

Bu aşamada tarayıcı çıktınız aynı gözükecektir ancak bir görev girdikten sonra "EKLE" butonuna tıklarsanız giriş alanı boşalacaktır. Her şey yolundaysa, bir sonraki adıma geçin.

5. Sil Düğmesi Ekle

Bu, kullanıcıların bir hata yapmaları veya görevi tamamlamaları durumunda görevlerini silmelerini sağlamak için son adımdır. Kullanıcı belirli bir görev için "Sil" düğmesini tıkladığında bir olay işleyicisi görevi gören bir handleDeleteTodo işlevi oluşturun. Parametre olarak görevin kimliğini alır.

İşlevin içinde, eşleşen kimliğe sahip görevi hariç tutan yeni bir newList dizisi oluşturmak için list dizisindeki filter yöntemini kullanın. Filtre yöntemi, liste dizisindeki her öğeyi yineler ve yalnızca verilen koşulu karşılayan öğeleri içeren yeni bir dizi döndürür. Bu durumda, her görevin kimliğinin parametre olarak iletilen kimliğe eşit olup olmadığını kontrol edin. Durumu yeni filtrelenmiş diziye ayarlayan setList'i (newList) çağırarak liste durumunu güncelleyin ve eşleşen kimliğe sahip görevi listeden etkili bir şekilde kaldırın.

sabit handleDeleteTodo = (İD) => {
sabit yeniListe = liste.filter((yapmak) =>
 yapılacaklar.id !== kimlik
 );
 setList (yeniListe); 
};

Liste dizisindeki her öğeyi yinelemek ve yeni bir dizi döndürmek için map yöntemini kullanın. Ardından, bir

  • liste dizisindeki her yapılacak iş nesnesi için bir görevi temsil eden öğe. React'te bir öğe listesi oluştururken key niteliğini eklediğinizden emin olun. React'in her liste öğesini benzersiz bir şekilde tanımlamasına ve değiştiğinde kullanıcı arayüzünü verimli bir şekilde güncellemesine yardımcı olur. Bu durumda, benzersizliği sağlamak için anahtarı her yapılacak iş nesnesinin kimliğine ayarlayın.

    • Her yapılacak iş nesnesinin yapılacak iş özelliğine erişin. son olarak, tıklandığında, ilgili görevin kimliğini bir parametre olarak kullanarak handleDeleteTodo işlevini tetikleyen ve görevi listeden silmemizi sağlayan bir düğme oluşturun.

    <Ul>
    { liste.harita((yapmak) => (
    <lisınıf adı="görev"anahtar={todo.id}>
     {todo.todo}
    <düğmetıklamada={() => handleDeleteTodo (todo.id)}>Sildüğme>
    li>
    ))}
    Ul>

    Son kodunuz şöyle görünmelidir:

    içe aktarmak Tepki, { useState } itibaren'tepki';
    sabit Yapılacaklar Listesi = () => {
    sabit [inputTask, setInputTask] = useState('');
    sabit [liste, setList] = useState([]);
    

    sabit handleAddTodo = () => {
    sabit yeniGörev = {
     İD: Matematik.rastgele(),
     yapılacaklar: inputTask
     };
    

     set listesi([...liste, Yeni görev]);
     setInputTask('');
     };
    

    sabit handleDeleteTodo = (İD) => {
    sabit yeniListe = liste.filter((yapmak) => todo.id !== id);
     setList (yeniListe);
     };
    

    sabit handleInputChange = (etkinlik) => {
    setInputTask(etkinlik.hedef.değer);
     };
    

    geri dönmek (
    <divsınıf adı="Yapmak">
    

    benim içinYapmakListe

    

    <divsınıf adı="Tepe">
    <girişsınıf adı="giriş"tip="metin"değer={girişGörevi}
     onChange={handleInputChange} yer tutucu="Bir görev girin" />
    

    <düğmesınıf adı="btn"tıklamada={handleAddTodo}>EKLEMEKdüğme>
    div>
    

    <Ul>
     { liste.harita((yapmak) => (
    <lisınıf adı="görev"anahtar={todo.id}>
     {todo.todo}
    <düğmetıklamada={() => handleDeleteTodo (todo.id)}>
    Silmek
    düğme>
    li>
     ))}
    Ul>
    div>
     );
    };
    ihracatvarsayılan Yapılacaklar listesi;

    Hem ekle hem de sil düğmeleri beklendiği gibi çalışırken son çıktınız bu şekilde olacaktır.

    Tebrikler, görevleri ekleyen ve silen bir Yapılacaklar listesi oluşturdunuz. Stil ve daha fazla işlevsellik ekleyerek daha da ileri gidebilirsiniz.

    React'i Öğrenmek için Gerçek Dünya Projelerini Kullanın

    Pratik, öğrenmenin etkili bir yolu olabilir. React kavramlarını ve en iyi uygulamaları uygulamalı bir şekilde uygulamanıza olanak tanıyarak çerçeve anlayışınızı güçlendirir. Dışarıda tonlarca proje var, doğru olanları bulmalısın.