ReactJS öğrenmek için ön koşullar

giriiş

React JS, açık kaynaklı bir ön uç kütüphanesidir. Bu kütüphanenin temel amacı, web ve mobil uygulamalar için hızlı ve ilgi çekici kullanıcı arayüzleri oluşturmaktır.

Facebook tarafından geliştirilen ReactJS, web sitelerinin çekici görünmesini sağlar ve çoğu geliştiricinin ilgisini çeker. Ancak birçok geliştirici, React JS'nin ön koşullarını anlamadan doğrudan ReactJS'ye (veya başka bir kütüphane veya framework'e) geçme hatasına düşer. Doğrudan React'e geçmek, kütüphaneyi öğrenirken ve mülakatlarda size birçok sorun çıkarabilir.

ReactJS öğrenmek için temel ön koşullar

HTML ve CSS

Web'in yapı taşları HTML ve CSS'dir. Web tarayıcınızda bir web sitesinin her bir bileşenini tanımlamak için kullanılan dile HTML veya Hiper Metin İşaretleme Dili denir. Sonuç olarak, tarayıcınızın görüntülediğiniz web sayfasını nasıl düzenleyeceğini anlamasına yardımcı olan HTML'i kullanarak başlıkları, paragrafları, bağlantıları, yerleştirmeleri ve daha fazlasını belirtebilirsiniz.

CSS veya Basamaklı Stil Sayfaları olarak bilinen dil, web sayfalarına görünüm ve düzen kazandıran şeydir. Başka bir deyişle, CSS, güzel yazı tipleri, canlı renkler, göz alıcı arka planlar ve hatta güzel geçişler ve 3B efektlerle çekici web siteleri oluşturmak için kullanılır.

Her ön uç geliştiricisi hem HTML hem de CSS ile başlar. Dolayısıyla, React kullanmayı öğrendiğinizde HTML ve CSS kodlamada yetkin hale gelmiş olmalısınız.

Reactjs öğrenmenin ilk ön koşulu, HTML ve CSS öğrenmeye başlamaktır. Ön uç uygulamaları ve duyarlı web uygulamaları için HTML ve CSS'nin yanı sıra anlamsal HTML etiketleri oluşturmayı, CSS seçicileri yazmayı, sınıfları ve CSS geçersiz kılmaları kullanmayı, kutu modelini uygulamayı ve border-box ve flexbox'a geçiş yapmayı bilmeniz gerekir. .

JavaScript ve ES6 Temelleri

JavaScript'in bir sonraki sürümü olan ECMAScript 6 veya ES6, birçok değişiklik ve yeni özellik getiriyor. ES6'nın muhteşem yeni özellikleri ve yeni JavaScript sözdizimi sayesinde kodunuz daha modern ve okunabilir olacak. Daha az kodla daha fazlasını yapabilirsiniz. Modüller, şablon dizeleri, sınıf yıkıcıları ve flash işlevleri gibi ES6'daki harika yeni özelliklerden bazılarını öğreneceğiz.

React öğrenmeden önce ES6'ya hakim olmalısınız çünkü kancalar artık sınıf tabanlı bileşenlerin yerini aldı. Kancaların ES6 özelliklerini kapsamlı bir şekilde kullandığını fark edeceksiniz.

Eğer ok fonksiyonlarını yazmakta zorluk çekiyorsanız React sizin için zorlayıcı olacaktır çünkü birçok kanca, ok fonksiyonlarını birbirinin içine yerleştirmenizi gerektirir ve bu da kafa karıştırıcı olabilir.

React JS, ES6'yı tam olarak desteklediğinden, ES6'yı öğrenmek ve anlamak, React JS ve Javascript geliştiricisi olarak hayatınızı iyileştirecektir çünkü React JS kodunu okumayı ve yazmayı çok daha kolay hale getirir.

Git ve CLI (Komut Satırı Arayüzü)

Yazılım geliştirme sürecinde Git oldukça önemli ve etkili bir araçtır.

Git, özünde uygulama geliştirme sırasında kaynak kodu değişikliklerini izlemek için kullanılan dağıtılmış bir sürüm kontrol sistemidir. Git, geliştiriciler arasındaki iş birliğini kolaylaştırmak için oluşturulmuş olsa bile, herhangi bir dosya sistemindeki ilerlemeyi izlemek için kullanılabilir.

Dosyalarınızın sürümünü takip etmek için push, pull, append, commit vb. gibi tüm komutları nasıl kullanacağınızı öğrenin. Ayrıca birleştirme, dallandırma ve birleştirme çakışmalarını nasıl yöneteceğinizi de öğrenin.

CLI (Komut Satırı Arayüzü), React'teki her işlemi gerçekleştirmenize yardımcı olacaktır. Paket yükleme, NPM kullanma, React uygulamaları oluşturup çalıştırma gibi birçok farklı görev için kullanılabildiğinden, CLI'yi kullanmaya alışmalısınız.

Paket Yöneticisi (Node + Npm)

ReactJS kullanırken, birden fazla küçük yazılım paketi yüklemek önemlidir. Node paketleri, gerekli tüm dosyaları içeren JavaScript kütüphaneleridir. Modüller ise Node projelerine dahil edilen JavaScript kütüphaneleridir. Paketlerde iki şey vardır... JS dosyaları ve package.json dosyaları. Bu paketleri kurmak için çok iyi bir yükleyiciye ihtiyacınız var çünkü bağımlılıklar konusunda endişelenmeden uygulamayı indirip kurmanızı kolaylaştırır.

Node Paket Yöneticisi (NPM) tam da bu noktada devreye girerek JavaScript uygulamalarını kurmanıza ve yönetmenize yardımcı olur. NPM'yi, önce Node.js'yi yükleyerek kurabilirsiniz. NPM, Node.js'yi yüklediğinizde otomatik olarak kurulur.

Nodejs'i resmi sitesinden indirebilirsiniz. Buraya tıklayın.

React'ta yeni bir tek sayfalık uygulama oluşturmaya başlamanın en iyi yolu, React öğrenmek için uygun bir ortam olan Create React App'i kullanmaktır.

Aşağıdaki komutlar sizin için örnek bir proje oluşturacaktır. Başlamak için şu adımları izleyebilirsiniz:

npx create-react-app my-app
cd my-app
npm start

Dolayısıyla, React'e başlamadan önce, NPM (Node Paket Yöneticisi) kayıt defteri ve paket yükleme tekniklerine aşina olmalısınız. Kısacası, NPM kayıt defteri, geliştiricilerin yazılım geliştirmek için ihtiyaç duydukları yazılımları edindikleri yerdir.

ES6 Değişkenleri – Let ve Const

ES6'dan önce geliştiriciler değişkenleri var anahtar sözcüğüyle veya anahtar sözcüğü olmadan tanımlıyordu. Ancak her şey değişti!

JavaScript, değişkenleri tanımlamak için let ve const adlı iki yeni anahtar sözcüğün eklendiği ES6 ile modern çağa adım attı. Bu anahtar sözcükler, bir değişkenin nerede ve kullanılıp kullanılamayacağını belirlemek için kullanılan kapsamları bakımından farklılık gösterir. Değişkenler bir fonksiyonun içinde, bir bloğun içinde veya bir fonksiyon ve bloğun dışında bulunabilir.

var: Fonksiyon kapsam düzeyi – Bu anahtar sözcük, fonksiyonların içinde bildirilen değişkenlere dışarıdan erişime izin vermez.

let: Blok kapsam düzeyi – let anahtar sözcüğü, değişkenlerin bildirim kapsamı dışında erişilebilir olmasını sağlar.

const: Blok düzeyinde kapsam – const anahtar sözcüğü, let anahtar sözcüğü kullanılarak bildirilen değişkenlere benzer. Bir sabitin değeri yeniden bildirim veya yeniden tahsis yoluyla değiştirilemez.

Ok Fonksiyonları

Ok fonksiyonları, JavaScript'in ES6 sürümündeki yeni bir özelliktir. Normal fonksiyonlara kıyasla, fonksiyonları daha basit bir şekilde yazmanıza olanak tanırlar.

• Kodu basitleştirir ve okunmasını kolaylaştırır.
• Bağlamsal "bu"nun en büyük faydası, işlevleri "bağlama" ihtiyacını ortadan kaldırmasıdır.
• Ok fonksiyonları günümüzdeki tüm tarayıcılar tarafından desteklenmektedir.

let x = (x, y) => x * y;

İhracat ve İthalat

ES6 kullanarak JavaScript'te modüller oluşturabiliriz. Bir modül sınıflar, fonksiyonlar, değişkenler ve nesneler içerebilir. JavaScript modüllerini kullanarak kodunuzu farklı dosyalara bölebilirsiniz. Böylece kod tabanı kolayca yönetilebilir.

Tümünü başka bir dosyada kullanılabilir hale getirmek için export ve import komutlarını kullanabiliriz. Bir modüldeki üyelerin export ve import işlemleri export ve import anahtar sözcükleri kullanılarak yapılır.

Dinlenme ve Yayılma Operatörü

JavaScript'te spread ve rest operatörleri üç nokta (…) ile gösterilir. Ancak, bu iki operatör aslında aynı değildir. Rest ve spread operatörleri arasındaki temel fark, bir JavaScript dizisinin rest operatörü kullanıldığında kullanıcı tarafından sağlanan belirli bir değer kümesinin kalanıyla doldurulmasıdır. Ancak, genişletilmiş bir sözdizimi, yinelemeli bir değişkeni öğelerine genişletir.

Nesne ve dizi yapısının parçalanması

Yapı çözme, bir nesnenin veya dizinin bileşenlerini ayrı ayrı açma işlemidir. Yapı çözme, öğeleri açtıktan sonra gerçekleştirmek istediğiniz eyleme bağlı olarak değiştirmenize ve değiştirmenize olanak tanır.

JavaScript, dizileri yok etmek için köşeli parantezleri [] kullanır; bu da elemanı içeren dizinin adına atanan değişkenin adını saklamamızı sağlar.

Bir nesneyi yok ettiğimizde, nesnenin tam adını içeren süslü parantezler kullanırız. Nesneler için, herhangi bir değişken adını kullanabildiğimiz dizilerin aksine, öğeyi açmak için yalnızca depolanan verilerin adını kullanabiliriz.

Şablon Literalleri

ES6'da Template Literal, dinamik dizelere kıyasla daha esnek bir dize oluşturmanıza olanak tanıyan yeni özellikler sunar. Bir dize genellikle tek tırnak (') veya çift tırnak (‘) ile oluşturulur.

Bir literal, backtick ( ) karakterlerini kullanarak gömülü ifadeleri etkinleştiren bir literal dizedir. Dize enterpolasyonu ve çok satırlı dizeler bunlarla kullanılabilir. Bu dize daha önce desen dizesi olarak biliniyordu.

Harita Filtresi ve Azaltma

JavaScript'te üç dizi işlevi vardır: map, reduce ve filter. Her biri, yineleme sırasında dizi üzerinde bir dönüşüm veya işlem gerçekleştirir. Her biri, işlevin çıktısına yanıt olarak yeni bir dizi üretir.

map() metodu kullanılarak eski dizinin her bir elemanına bir fonksiyon uygulanarak bir dizi oluşturulur.

filter() yöntemi, dizinin her bir öğesine bir koşul ifadesi uygular. Koşul doğru döndürürse, bir öğeyi çıktı dizisine iter. Koşul yanlış döndürürse, öğeler çıktı dizisine itilmez.

Değer dizileri, reduce() yöntemi kullanılarak tek bir sayıya indirgenir. Dizinin her bir elemanı, çıktı değerini üretmek için bir indirgeyici fonksiyondan geçirilir.

Sınıflar

JavaScript ES6, sınıfları yeni bir özellik olarak sunar. Nesneler, sınıflar kullanılarak tasarlanır. Nesneler, sınıflardan oluşturulabilir.

Bu sınıf, bir evin temel prototipine benzetilebilir. Odalar, girişler vb. hakkındaki tüm bilgileri içerir. Evi, bu açıklamayı kılavuz olarak kullanarak inşa edersiniz. Nesne ise evdir. Aynı özellikler kullanılarak birden fazla ev inşa edilebildiği için aynı sınıftan birden fazla nesne üretebiliriz.

// creation of a class
class Home {
constructor(area) {
this.area = area;
}
}
// creation of an object
const home1 = New Home(100);

Fonksiyonel bileşenleri inceleyerek başlayın. React kancaları kullanımı daha kolaydır ve sınıf tabanlı eşdeğerlerine kıyasla aynı hedeflere ulaşmak için daha az kod satırı gerektirir.

Herkes uygulamasını fonksiyonel bileşenler kullanarak yeniden yazmasa da, sınıf bileşenlerinin de farkında olmalısınız. Çünkü çoğu uygulama sınıf bileşenleri kullanılarak geliştirilir.

Fonksiyonel bileşenlerle karşılaştırıldığında, React JS sınıf bileşenlerini oluşturmak daha karmaşıktır. Bir React JS sınıfının parçası olarak, verilerinizi yönetmek için oluşturucular, yaşam döngüsü yöntemleri, işleme işlevleri ve hatta durum yönetimi bulacaksınız.

Bu tarayıcıda

JavaScript'te, bir fonksiyonun THIS anahtar sözcüğü diğer dillerden biraz farklı çalışır. Ayrıca, sıkı ve sıkı olmayan durumlar arasında ayrım yapar.

THIS'in değeri genellikle bir fonksiyonun nasıl çağrıldığına (çalışma zamanı yürütme) göre belirlenir. Fonksiyon çağrıldığında, yürütme sırasında atama yoluyla ayarlanamayacağı için her seferinde farklı bir değere sahip olabilir. Bu fonksiyon, bind() metodu kullanılarak nasıl çağrıldığına bakılmaksızın ayarlanabilir.

Sözler ve Asenkron Bekleme

JavaScript veya Node.js'de işlemleri yönetmenin farklı yolları vardır. Eşzamansız yürütme sırasında farklı işlemler eş zamanlı olarak çalışır ve her işlemin çıktısı, erişildiği anda işlenir.

NodeJS'deki bir Promise, gerçek dünyadaki bir Promise'a benzer. Bir eylemin gerçekleştirileceğine dair güvence sağlar. Bir Promise, eşzamansız bir olay meydana geldikten sonra ne olacağını kontrol eder ve olayın gerçekleştirilip gerçekleştirilmediğini takip eder.

Promise'ler, Async/Await kullanılarak eşzamansız yöntemlerle işlenir. Promise'lerin okunmasını ve kullanılmasını kolaylaştırmak için kod yakın zamanda yeniden düzenlendi. Bu, onu eşzamansız koda daha benzer hale getirerek eşzamansız programlamayı basitleştirir.

Şirketler neden Reactjs'i tercih ediyor?

1. Bileşenler daha akıcı yazılır – JavaScript kod verimliliği JSX ile arttırılabilir.
2. Verimliliği artırmanın yanı sıra, ileride bakım ihtiyacını da basitleştirir.
3. Render işlemi daha hızlı gerçekleşir.
4. İçerisinde kullanışlı geliştirici araçları da mevcut.
5. SPA (Tek Sayfalık Başvuru)
6. Veri bağlantısı tek yönlüdür, tıpkı tek yönlü veri akışı gibi.
7. SEO dostu

Sonuç

React JS, açık kaynaklı bir ön uç kütüphanesidir. Bu kütüphanenin temel amacı, web ve mobil uygulamalar için hızlı ve ilgi çekici kullanıcı arayüzleri tasarlamaktır. ReactJS için temel ön koşullar HTML ve CSS, JavaScript ve ES6 temelleri, Git ve CLI (Komut Satırı Arayüzü) ve Paket Yöneticisi'dir (Node + Npm). Bilmeniz gereken tek şey ES6 değişkenleri, ok fonksiyonları, dışa ve içe aktarmalar, Rest ve Spread operatörleri, nesne yıkıcılar ve diziler (JavaScript'te this anahtar kelimesi). Desen alfabesi, ters tırnak işaretleri kullanarak gömülü ifadeleri etkinleştiren bir dize sabitidir. JavaScript'te üç dizi fonksiyonu vardır: bir dizi üzerinde yineleme yaparken işlemler gerçekleştirmek için map, reduce ve filter.