Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

En popüler ön uç kitaplığı olarak herkes React'i öğrenmek ister. ReactJS temelde JavaScript'tir. Ancak bu, ReactJS'ye geçmek için JavaScript'teki her şeyi öğrenmeniz gerektiği anlamına gelmez. Temel JavaScript kavramlarını anlamak, React kavramlarını daha kolay kavramanıza yardımcı olacak ve sonuçta projeler üzerinde çalışma becerinizi hızlandıracaktır.

ReactJS'ye geçmeden önce JavaScript hakkında bilmeniz gereken temel kavramları ana hatlarıyla açıklayalım.

1. Ok İşlevleri

Ok işlevleri, React'te yaygın olarak kullanılmaktadır. 16.8 sürümünden itibaren React, sınıf tabanlı bileşenlerden işlevsel bileşenlere geçmiştir. Ok işlevleri daha kısa bir sözdizimi ile işlevler oluşturmanıza izin verir.

Bunu aşağıdaki örneklerde açıklayalım:

Düzenli fonksiyon

işlevselamlama() {
geri dönmek'Merhaba'
}
konsol.log (selamlama()) //hello
instagram viewer

Ok İşlevi

izin vermek tebrik = () =>'Merhaba'
konsol.log (selamlama()) //hello

Sözdizimi farklı olsa da yukarıdaki iki işlev aynı çıktıya sahiptir. Ok işlevi, normal işlevden daha kısa ve temiz görünür. Genellikle, React bileşenleri aşağıdaki yapıya sahiptir:

içe aktarmak Tepki itibaren'tepki'
sabit kitap = () => {


geri dönmek (




kitap</div>



 )


}
ihracatvarsayılan Kitap

Ok işlevlerinin adları yoktur. Adlandırmak isterseniz, bir değişkene atayın. Normal ve ok işlevi arasındaki fark, yalnızca sözdiziminden daha fazlasıdır. Şuradaki ok işlevleri hakkında daha fazla bilgi edinin: Mozilla geliştiricilerin belgeleri.

2. Şeklini bozma

Yıkım, karmaşık veri yapılarından veri elde etmek için kullanılır. JavaScript'te diziler ve nesneler birçok değeri saklayabilir. Değerleri manipüle edebilir ve uygulamanın farklı bölümlerinde kullanabilirsiniz.

Bu değerleri elde etmek için değişkeni imha etmeniz gerekir. Uğraştığınız veri yapısına bağlı olarak nokta (.) notasyonu veya parantez notasyonu kullanabilirsiniz. Örneğin:

sabit öğrenci = {
'isim': 'Mary',


'adres': "Güney Parkı, Beytüllahim",


'yaş': 15
}

Şeklini bozma:

konsol.log (öğrenci.adı) // çıktı Meryem

Yukarıdaki örnekte, nokta notasyonu 'name' anahtarının değerine erişir. ReactJS'de, uygulamanızdaki değerleri elde etmek ve paylaşmak için yok etme konseptini kullanacaksınız. Yıkım, tekrardan kaçınmaya yardımcı olur ve kodunuzu daha okunaklı hale getirir.

3. Dizi Yöntemleri

React projeleri üzerinde çalışırken dizilerle birkaç kez karşılaşacaksınız. Bir dizi, bir veri koleksiyonudur. Verileri dizilerde saklarsınız, böylece gerektiğinde yeniden kullanabilirsiniz.

Dizi yöntemleri öncelikle verileri işlemek, almak ve görüntülemek için kullanılır. Yaygın olarak kullanılan bazı dizi yöntemleri şunlardır: harita(), filtre(), Ve azaltmak(). aşina olmalısınız dizi yöntemleri her birinin ne zaman uygulanacağını anlamak için.

Örneğin, harita() yöntem, bir dizideki tüm öğeler üzerinde yinelenir. Yeni bir dizi oluşturmak için dizinin her elemanına etki eder.

sabit sayılar = [9, 16, 25, 36];
sabit squaredArr = sayılar.harita(Matematik.sqrt) // 3,4,5,6

Dizi yöntemlerini ReactJS'de çok kullanacaksınız. Bunları dizileri dizgelere dönüştürmek, birleştirmek, öğe eklemek ve diğer dizilerden öğe kaldırmak için kullanacaksınız.

4. Kısa Koşullar

Koşullu ifadeler, JavaScript'in kodda karar vermek için kullandığı ifadelerdir. Kısa koşul ifadeleri arasında && (ve), II (veya) ve Üçlü İşleç bulunur. Bunlar daha kısa koşul ifadeleri ve if/else ifadeleridir.

Aşağıdaki örnek, bir üçlü işlecin nasıl kullanılacağını gösterir.

if/else deyimi içeren kod:

işlevaçılış zamanı(gün) {
eğer (gün == PAZAR) {
geri dönmek12;
 } 
başka {
geri dönmek9;
 }
}

Üçlü Operatörlü Kod:

işlevaçılış zamanı(gün) {
geri dönmek gün == PAZAR? 12: 9;
}

Hakkında bilgi al farklı şart koşullu türleri kısa koşullu ifadelere özel bir odaklanma ile. Bunlar React'te yaygın olarak kullanılmaktadır.

5. Şablon Değişmezleri

Şablon Değişmezleri, bir dize tanımlamak için geri tikler (``) kullanır. Şablon hazır değerleri, dize verilerini değiştirmenize izin vererek onları daha dinamik hale getirir. Etiketli şablon hazır değerleri, bir dize içinde işlemler gerçekleştirmenize olanak tanır. Bunlar daha kısa koşul ifadeleri ve if/else ifadeleridir.

Örneğin:

izin vermek ilkAdı = "Jane";
izin vermek soyadı = "doe";
izin vermek metin = `Hoş geldiniz ${ilkAd}, ${soyadı}!`; // Jane Doe'ya hoş geldiniz!

6. Yayılma Operatörleri

Spread operatörü (...), bir nesnenin veya dizinin değerlerini diğerine kopyalar. Sözdizimi, değişken adının ardından gelen üç noktadan oluşur. Örneğin (...isim). İki dizinin veya nesnenin özelliklerini birleştirir.

Aşağıdaki örnek, yayılma operatörünün bir değişkenin değerlerini diğerine kopyalamak için nasıl kullanılacağını gösterir.

sabit isimler = ['Mary', 'Jane']; 
sabit grup Üyeleri = ["Fred", ...isimler, "melek"]; // ["Fred", "Mary", "Jane", "Angela"]

Bir dizi işlem yapmak için yayılma operatörünü kullanabilirsiniz. Bunlar, bir dizinin içeriğini kopyalamayı, bir diziyi diğerine eklemeyi, iç içe geçmiş dizilere erişmeyi ve dizileri argüman olarak iletmeyi içerir. Bileşenlerdeki durum değişikliklerini işlemek için ReactJS'deki yayılma operatörünü kullanabilirsiniz.

Neden ReactJS Öğrenin?

ReactJS iyi bir nedenden dolayı popülerdir. Kısa bir öğrenme eğrisine sahiptir, güvenilirdir ve DOM'a hızla işlenir. Bağımsız bileşenleri destekler ve mükemmel hata ayıklama araçlarına sahiptir.

ReactJS, ECMAScript 6'dan (ES6) yeni JavaScript kavramlarını içerir. JavaScript'teki temel kavramları öğrenmek, ReactJS'de proje geliştirmeyi kolaylaştıracaktır.

Hepsinden önemlisi, ReactJS sürekli olarak yeni güncellemeler yayınlayan harika bir topluluğa sahiptir. Bir JavaScript kitaplığı öğrenmek istiyorsanız, ReactJS harika bir seçim olacaktır. Next.js çerçevesi, ReactJS'nin sınırlamalarını tamamlar. İkisinin birleşimi, ReactJS'yi güçlü bir ön uç kitaplığı yapar.