Next.Js Nasıl Kurulur? Yeni Başlayanlar İçin Detaylı Bir Rehber

Güçlü bir React frameworkü olan Next.js , modern ölçeklenebilir web uygulamalarının tasarımını basitleştirir. Bu kılavuzda Next.js’yi resmi belgeleri kullanarak yükleme adımlarını inceleyeceğiz ve karmaşık geliştirme ortamları için ek kavramları tartışacağız.

Next.js, React, webpack ve babel tabanlıdır. Web uygulamaları geliştirmek için harika bir araçtır ve sunucu tarafı oluşturmasıyla tanınır.

Önkoşul

Next.js’yi yüklemeden önce Node.js’yi yüklemeniz gerekir. Bilgisayarınızda npm ve Node.js’nin yüklü olduğunu doğrulayın. Değilse Node.js’yi edinin . resmi web sitesinden ve yükleyin.

Düğümün makinenizde güncel olduğunu doğrulayın. Doğrulamak için terminalinizde aşağıdaki komutu çalıştırın ve ardından sonucu https://nodejs.org/ adresinde bulunan en yeni LTS sürümüyle karşılaştırın.

node -v

node -v

Node.js’yi yükledikten sonra komut satırınızda npm komutu görünecektir.

Artık Node’u en son sürüme ve npm’ye güncellediğinize göre, istediğiniz yerde, örneğin ana klasörünüzde boş bir klasör oluşturun ve şuraya gidin:

mkdir nextjs

1	mkdir nextjs

cd nextjs

cd nextjs

ve projenizi oluşturun.

next.js’yi Otomatik veya Manuel olarak yüklemenin iki yöntemi vardır . Next.js’nin resmi web sitesi, her şeyi sizin için otomatik olarak ayarlayan otomatik kurulumun kullanılmasını önerir.

Otomatik Kurulum

Otomatik kurulum için terminalinizi başlatın ve sonraki komutu uygulayın,

npx create-next-app my-nextjs-app

1	npx create-next-app my-nextjs-app

Eğer “yarn” kullanmayı tercih ediyorsanız yeni bir uygulama oluşturmak için Next.js’yi kullanın.

yarn create next-app my-nextjs-app

1	yarn create next-app my-nextjs-app

Şimdi aşağıda belirtilen komutu çalıştırarak Proje Dizinine gidin,

cd my-nextjs-app

1	cd my-nextjs-app

Geliştirme sunucusunu başlatmak için aşağıdaki komutu kullanın:

npm run dev

1	npm run dev

next.js uygulamamız artık http://localhost:3000/ üzerinde başarıyla çalışıyor

Manuel Kurulum

Manuel olarak kurmak için bir terminal penceresi açın ve aşağıdaki komutu yazın,

npm install next@latest react@latest react-dom@latest

1	npm install next@latest react@latest react-dom@latest

package.json dosyanızı açtıktan sonra aşağıda listelenen scriptleri ekleyin:

Bu komut dosyaları, bir uygulamanın oluşturulmasında yer alan birçok aşamaya atıfta bulunur:

Gelişmiş kurulumlar, özellikler ve en iyi uygulamalar için Next.js adresindeki resmi Next.js belgelerine göz atın.

dev: Next.js’yi geliştirme modunda başlatmak için “next dev”i çalıştırır.

build: Uygulamayı üretim kullanımına yönelik olarak oluşturmak için “sonraki yapıyı” çalıştırır.

start: Next.js üretim sunucusunu başlatmak için “next start”ı çalıştırır.

lint: Next.js’nin yerleşik ESLint yapılandırmasını ayarlamak için “next lint”i çalıştırır.

Dosya sistemi yönlendirmesi Next.js tarafından kullanıldığından, uygulamanızdaki rotalar dosyalarınızın düzenlenme şekline göre belirlenir.

Next.js, yeni uygulamalar geliştirirken Uygulama Yönlendiricisini kullanmanızı önerir. Bu yönlendirici, topluluk geri bildirimlerine dayalı olarak Pages Router’ın bir güncellemesidir ve React’in en yeni özelliklerinden yararlanmanızı sağlar.

Layout.tsx ve Page.tsx dosyaları app/ alt dizini oluşturulduktan sonra eklenmelidir. Kullanıcı uygulamanın köküne (/) bastığında bunlar sunulacaktır.

app/layout.tsx içinde bir kök düzen oluşturun ve gerekli <html> ve <body> etiketlerini ekleyin:

Son olarak, app/page.tsx ana sayfasına bazı ön içerik ekleyin:

Resmi web siteleri olan App Router’ı ziyaret ederek “Uygulama Yönlendirici” hakkında daha fazla bilgi edinebilirsiniz .

Uygulama Yönlendiricisi yerine Sayfa Yönlendiricisini kullanmayı tercih ediyorsanız, projenizin kökünde bir sayfalar/ dizin oluşturabilirsiniz .

Bundan sonra, sayfalar klasörüne bir index.tsx dosyası ekleyin. Bu sizin ana sayfanız olacak (/):

Genel düzeni oluşturmak için, pages/ next’in içine bir _app.tsx dosyası ekleyin. Resmi bağlantılarını ziyaret ederek özel uygulama dosyaları hakkında daha fazla bilgi edinebilirsiniz: Özel Uygulama

Son olarak, sunucunun ilk yanıtını yönetmek için sayfaların/ içine bir _document.tsx dosyası ekleyin . Belge dosyası özelleştirme hakkında daha fazla bilgi edinin.

Sayfa Yönlendirici hakkında daha fazla bilgiyi resmi bağlantısına bakarak öğrenebilirsiniz: Sayfa Yönlendirici

Yazı tipleri ve fotoğraflar gibi statik malzemeleri depolamak için ortak bir klasör oluşturun. Kodunuz daha sonra temel URL (/) ile başlayarak ortak dizinde bulunan dosyalara referans verebilir.

Geliştirme sunucusunu çalıştırarak başlatın,

npm run dev

1	npm run dev

Düzeltilen sonucu tarayıcınızda görüntülemek için app/page.tsx (veya sayfaları/index.tsx) dosyasını düzenleyin ve kaydedin.

Next.js kullanılarak gelişmiş kurulumlar mümkündür. Örneğin, TypeScript desteğini etkinleştirmek için aşağıdakiler kullanılabilir.

npx create-next-app my-nextjs-app --example with-typescript

1	npx create-next-app my-nextjs-app --example with-typescript

TypeScript nedir? Yeni başlayanlar için adım adım kılavuz

Web’in yeni şekillenmeye başladığı 90’lı yılların başında etkileşimli web sayfalarına talep vardı. İnsanlar statik verileri göstermekten fazlasını yapan web siteleri istiyordu. JavaScript bu arzudan doğdu.

JavaScript başlangıçta Mocha olarak biliniyordu . Daha sonra LiveScript olarak yeniden adlandırıldı ve sonunda JavaScript oldu . Biraz kafa karıştırıcı, biliyorum 😄

Mocha => Livescript => Javascript

JavaScript, 1995 yılında Netscape Communications’ta çalışırken Brendan Eich adlı bir geliştirici tarafından oluşturuldu .

JavaScript, web geliştirme için kullanılan ilk dil olmasa da, kullanım kolaylığı ve web geliştiricilerinin web sitelerine animasyonlar, etkileşimli formlar ve dinamik içerik gibi özellikler eklemesine olanak sağlaması nedeniyle hızla popülerlik kazandı.

Takip eden yıllarda JavaScript, yeni özellikler ekleyerek, hataları düzelterek ve dili daha güçlü hale getirerek gelişmeye ve gelişmeye devam etti.

Günümüze hızlı bir şekilde ilerlersek, JavaScript’in etkisi web geliştirmenin çok ötesine uzanıyor. Çok yönlülüğü mobil uygulamalara, sunucu tarafı uygulamalara ve hatta masaüstü yazılımlara kadar uzanır.

TypeScript, JavaScript’in modernleştirilmiş bir sürümüdür . Statik yazmayı ve daha fazlasını içerir. Bu, JavaScript’in tamamen yeniden yazılması değildi; basitçe kendi temelleri üzerine inşa edildi ve geliştiricilere daha yapılandırılmış bir geliştirme süreci seçeneği sundu.

TypeScript’in tarihi, 2012 yılında Microsoft’un onu geliştirmede öncülük etmesiyle başladı. TypeScript, JavaScript’e statik yazma özelliği ekleyerek kodun sürdürülebilirliğini ve ölçeklenebilirliğini geliştirmenin yanı sıra geliştirici üretkenliğini de artırmak için tasarlandı. O zamandan bu yana, özellikle statik yazmanın avantajlarının en iyi olduğu büyük projelerde büyük ilgi gördü.

Bugün TypeScript, web geliştirme teknolojilerinin ne kadar sürekli geliştiğinin ve uyum sağladığının bir örneği olarak duruyor.

TypeScript’i neden kullanmalıyım?

Hataların Erken Yakalanmasına Yardımcı Olur: TypeScript, kodunuzu çalıştırmadan önce hatalara karşı kontrol eder. Bu, inşaata başlamadan önce bir yapı mühendisinin planınızı kusurlara karşı kontrol etmesi gibidir.

Koda Yapı Ekler: TypeScript ile farklı veri türlerini (örneğin sayı, dize veya özel tür) tanımlayabilir ve bu veri türlerinin nasıl kullanıldığını kontrol edebilirsiniz. Bu, kodunuzu daha yapılandırılmış ve okunabilir hale getirmenize yardımcı olur.

İşbirliğini Geliştirir: Birden fazla kişi bir proje üzerinde birlikte çalıştığında, TypeScript okunabilirliği ve tutarlılığı arttırdığı için onların birbirlerinin kodunu daha iyi anlamalarına yardımcı olur.

Üretkenliği Artırır: TypeScript, kodlama süresini azaltabilen ve hataları en aza indirebilen otomatik kod tamamlama ve gelişmiş araç desteği gibi yerleşik özelliklere sahiptir.

Sürdürülebilirlik: Projelerinizin boyutu arttıkça hepsini yönetmek zorlaşır. TypeScript tam da burada devreye giriyor. Arayüzler ve tür kontrolü gibi özellikler sunarak kodunuzun güncellenmesini ve zaman içinde güncellenmesini kolaylaştırır.

Kod Okunabilirliğini ve Bakımını Artırır: TypeScript’in sağlam yazımına ek olarak, kodun okunmasını ve anlaşılmasını kolaylaştıran arayüzler ve tür açıklamaları gibi özelliklere de sahiptir. Birisi kodunuzu okurken, her değişkenin veya işlevin döndürdüğü ve beklediği veri türlerini kolayca görebilecek. Bu, zaman içinde kod tabanınızın bakımını ve anlaşılmasını kolaylaştırır; bu da mevcut kodu değiştirirken hata yapma veya kasıtsız değişiklikler yapma riskini azaltır.

TypeScript’teki Türler

Number:

Bu tür 1, 2 ve 3 gibi tam sayıları temsil etmek için kullanılır. Hem tam sayıları (kayan noktalı sayılar) hem de ondalık noktalı sayıları içerir.

let myNumber: number = 5;

String:

Bu tür, “hello” veya “TypeScript” gibi metni veya metin dizelerini temsil etmek için kullanılır.

let myString: string = "hello";

Boolean:

Bu tür, doğru veya yanlış olabilen mantıksal değerleri temsil etmek için kullanılır.

let isDone: boolean = false;

Array:

Alan aynı türdeki verilerin koleksiyonudur. Sayılardan oluşan bir alanınız, dizelerden oluşan bir alanınız veya başka türden bir alanınız olabilir.

let myArray: number[] = [1, 2, 3, 4, 5];

Tuple: Tuple, belirli sayıda öğenin türde olduğu bilinen ancak aynı olması gerekmeyen bir diziyi temsil eden bir ifadedir.

let myTuple: [string, number] = ["hello", 10];

Herhangi:

Herhangi bir tür, herhangi bir değer türünü temsil eden soyut bir türdür. Değer türü bilinmediğinde veya türü olmayan JavaScript koduyla uğraşırken yaygın olarak kullanılır.

let myVariable: any = "hello";

Void:

void türü, bir türün yokluğunu temsil eder. Genellikle değer döndürmeyen işlevler için dönüş değeri türü olarak kullanılır.

function sayHello(): void { console.log("Hello!"); }

Object:

Nesne türü herhangi bir ilkel türün temsilidir. Bu, bir dizi, bir işlev, hatta NULL veya tanımsız olabileceği anlamına gelir.

let myObject: object = { name: "John", age: 30 };

Basit bir toplam örneğiyle anlayalım,

Öncelikle toplam fonksiyonumuzu tanımlayalım. TypeScript’te, tür güvenliğini garanti altına almak ve kodun okunabilirliğini geliştirmek için işlev bağımsız değişkenlerinin türünü ve dönüş değerlerini belirtebilirsiniz.

Bunu nasıl yapabileceğimize bakalım:

Yukarıdaki kod parçacığında, a ve b olmak üzere iki argüman alan toplam adında bir fonksiyon tanımladık. Bu argümanların her ikisi de sayı türleridir. Parametre listesinden sonra gelen: sayı, bu fonksiyonun bir sayı değeri döndürdüğünü belirtir. Bu fonksiyonun içinde sadece a ve b’yi toplayıp döndürüyoruz.

Artık toplam fonksiyonumuzu tanımladığımıza göre, onu çalışırken görelim.

Yukarıdaki örnekte toplam fonksiyonunu 5 ve 3 argümanla çağırdık. Bağımsız değişkenlerin türü TypeScript’teki işlev imzasından çıkarılır, dolayısıyla bunları açıkça belirtmemize gerek yoktur.

Fonksiyon bu iki sayının toplamının sonucunu döndürür ve bunu konsolumuza kaydederiz.

Özetle

Özetlemek gerekirse TypeScript, JavaScript’in dinamik doğası ile yapılandırılmış, hataya dayanıklı kod gereksinimi arasındaki boşluğu doldurur. JavaScript’in Mocha olarak ilk günlerinden şu anki her yerde bulunmasına kadar TypeScript, geliştiricileri daha üretken, kod bakımı yapılabilir ve işbirlikçi hale getirdi. TypeScript, statik yazma ve gelişmiş araçlar sunarak geliştiricilerin tüm platformlarda daha sağlam uygulamalar oluşturmasına olanak tanır ve bu da onu web geliştirmede ezber bozan bir hale getirir.

NPM ve Yarn arasındaki farklar nelerdir?

JavaScript dünyasında paket yöneticileri, bağımlılıkları yönetmek ve iş akışlarını basitleştirmek için en önemli araçlardan biridir. En popüler paket yöneticilerinden biri Node Package Manager (NPM), diğeri ise Yarn’dır. İkisi de aynı şeyi yapıyor ancak farklı özelliklere, performansa ve topluluk desteğine sahipler. Bu yazıda, JavaScript projeleriniz için doğru olanı seçmenize yardımcı olmak amacıyla NPM ile Yarn arasındaki temel farklara bakacağız.

Zaman Çizelgesi: npm ve yarn

2009: Ryan Dahl, JavaScript kodunu tarayıcı dışında çalıştırmak için bir çalışma zamanı ortamı olan Node.js’yi tanıttı.

2010: npm, Node.js programlama dili için paket yöneticisinin adıdır. İlk olarak geliştirici Bay Schlueter tarafından geliştirildi ve kısa sürede JavaScript geliştiricilerinin kod paketlerini paylaşması ve yönetmesi için en önemli araçlardan biri haline geldi.

2016: Yarn, Facebook tarafından npm’nin yerini alacak bağımsız bir paket yöneticisi olarak oluşturuldu. Yarn’ın amacı, geliştiricilerin karşılaştığı performans sorunlarını ve bağımlılık yönetimi sorunlarını çözmekti.

Npm’nin karşılaştığı en dikkate değer olaylardan biri, bir geliştiricinin popüler bir paket olan “left-pad”i yayınlamasıydı; bu, Node.js topluluğu içinde çok fazla kafa karışıklığına neden oldu. Bu, bağımlılık yönetimi ve paket sahipliği hakkında birçok tartışmaya neden oldu.

2017: Performansı, kararlılığı ve güvenliği artıran Yarn 1.0 sürümünün piyasaya sürülmesiyle JavaScript topluluğu arasında popüler hale geldi.

2018: Yarn, daha hızlı kurulum süreleri ve gelişmiş önbellekleme yetenekleri vaat eden 2.0 sürümüne yükseltildi. Yarn 2.0 aynı zamanda Tak ve Çalıştır (PnP), sıfır kurulum ve performansı ve verimliliği artıran diğer özellikleri de tanıttı.

2020: npm daha sonra GitHub tarafından satın alındı. Bu, npm’nin artık JavaScript geliştirme topluluğunun bir parçası olduğu ve geliştiricilere daha fazla işbirliği fırsatı sunduğu anlamına geliyor.

Yarn, hayatın her kesiminden geliştiricilerin yardımıyla kendi kendini idame ettiren bir projeye dönüştü. Performans, güvenilirlik ve geliştirici deneyimini göz önünde bulundurarak büyümeye devam ediyor.

Özellik	NPM	Yarn
Kurulum	Düz yapı, kopyalanmaya neden olabilir.	Deterministiktir, tutarlılığı sağlar.
Performans	Özellikle büyük projelerde daha yavaş.	Paralel indirmeyle daha hızlı.
Kilitleme mekanizması	package-lock.json’u kullanır.	Açık sürüm kontrolü olan yarn.lock’u kullanır.
Eşzamanlılık	Kurulum sırasında sınırlıdır.	Geliştirilmiş hız için paralel indirmeler sunar.
Kayıt Entegrasyonu	Npm kayıt defteri ile etkileşime girer.	Npm ve Yarn kayıtlarını destekler.
Güvenlik özellikleri	Paket imzalama ve taramayı uygular.	Bütünlük kontrolüne odaklanır.
Topluluk Desteği	Yaygın olarak benimsenmiş, kapsamlı destek.	Güçlü destekle popülerlik kazanıyor.

JavaScript geliştirme dünyasında, projenin sorunsuz yürütülmesi için iyi paket yönetimi şarttır. Node.js bağımlılık yönetimi, Node Paket Yöneticisi (Node.js) ve Yarn’ın yardımıyla yapılır.

Node.js, büyük bir paket deposu sağlayan, uzun süredir devam eden varsayılan paket yöneticisidir. Yarn ise Facebook tarafından geliştirildi ve performans iyileştirmelerine odaklanıyor.

Geliştiricilere, geliştirme iş akışlarını basitleştirmek için çok çeşitli komutlar sunulur. Bu komutlar arasındaki farkları belirleyerek geliştirme sürecinizi optimize edebilir, projenizi daha verimli ve ölçeklenebilir hale getirebilirsiniz.

Aşağıdaki tablo, npm ve yarn için en sık kullanılan komutları, işlevlerini ve sözdizimlerini vurgulayarak gösterir.

Komutlar

Komut	NPM	Yarn

Paketleri Yükleme	npm install <paket-adı>	yarn add <paket-adı>
Paketleri global olarak yükleme	npm install -g <paket adı>	yarn global add<paket-adı>
Paketleri Kaldırma	npm uninstall<paket-adı>	yarn remove <paket-adı>
Bağımlılıkları package.json’dan yükleme	npm install	yarn
Güncelleme	npm update<paket-adı>	yarn upgrade <paket-adı>
Güncel Olmayan Paketleri Kontrol Etme	npm outdated	yarn outdated
package.json’da Tanımlanan Komut Dosyalarını Çalıştırma	npm run <komut dosyası adı>	yarn<script-name>
Paketleri Tam Sürümle Yükleme	npm install <paket-adı>@<sürüm>	yarn add <paket-adı>@<sürüm>

Özetle

Özetlemek gerekirse, Yarn ile npm arasındaki karar proje ihtiyaçlarınıza, performansınıza ve topluluğunuza bağlıdır. Yarn yaygın olarak benimsenme ve sağlamlık avantajına sahipken, Yarn daha hızlı, daha tutarlı ve daha iyi güvenlik sağlar. Daha hızlı dağıtımlara, deterministik bağımlılık yönetimine veya güçlü güvenliğe öncelik veriyorsanız, Yarn ve npm, JavaScript bağımlılıklarınızı verimli bir şekilde yönetmenize yardımcı olur.

React ve React Native arasındaki farklar nelerdir?

Çoğunuz React veya React Native’i duymuşsunuzdur ancak farkın ne olduğundan emin değilsiniz. Endişelenmeyin, bu makalede react ve react native arasındaki farklılıkları inceleyeceğiz.

Günümüzün sürekli değişen web ve mobil geliştirme ortamında iki framwork öne çıkıyor: React ve React Native . Bu framworklerin her ikisi de verimlilikleri, ölçeklenebilirlikleri ve performansları nedeniyle son yıllarda oldukça popüler hale geldi.

Ancak aynı adı ve temeli paylaşsalar da iki framwork farklı amaçlara hizmet eder ve farklı özelliklere sahiptir. Artıları ve eksileriyle birlikte aralarındaki temel farkları inceleyelim.

React açık kaynaklı bir JavaScript kütüphanesidir . Facebook tarafından oluşturulmuştur ve esas olarak web uygulamaları için dinamik kullanıcı arayüzleri (UDI’ler) oluşturmak için kullanılır. React, bileşen odaklı bir mimari üzerine inşa edilmiştir; bu, kullanıcı arayüzlerinin durumlarını koruyan yeniden kullanılabilir bileşenler olduğu anlamına gelir.

Avantajları

Bildirime dayalı sözdizimi: React’in bildirime dayalı sözdizimi, kodun okunmasını ve bakımını kolaylaştırır çünkü geliştiricilerin, istenen kullanıcı arayüzü durumunu tanımlayabildikleri sürece DOM manipülasyonu konusunda endişelenmelerine gerek yoktur.

Sanal dom: React’in sanal DOM’u, DOM manipülasyonlarının sayısını azaltarak DOM manipülasyonunu azaltır, böylece daha hızlı güncelleme ve işleme sağlanır.

Değiştirilebilir bileşenler: React, bileşenlerin yeniden kullanımını teşvik ederek modüler ve genişletilebilir bir kod tabanı sağlar.

JSX: JSX, geliştiricilerin JavaScript dosyaları içinde HTML benzeri kod yazmasına olanak tanıyarak, kodun okunabilirliğini ve sürdürülebilirliğini geliştirerek kullanıcı arayüzü bileşenlerinin oluşturulmasını basitleştirir.

Statista’ya göre React, 2023 yılında geliştiriciler arasında dünya çapında en çok kullanılan ikinci teknoloji oldu.

Dezavantajları

Öğrenme Eğrisi: React’ın öğrenme eğrisi, özellikle bileşen odaklı mimariye ve JSX sözdizimine yeni başlayanlar için çok zorludur.

Araç Oluşturma Karmaşıklığı: Bir React geliştirme ortamını kurmak ve yapılandırmak, ek araçlar, yapı kurulumları ve araç karmaşıklığı gerektiren karmaşık bir süreç olabilir.

Durum yönetimi: React, bileşen durumunu kontrol etmek için yerleşik mekanizmalara sahiptir, ancak daha karmaşık durum yönetimi durumlarında ek kitaplıklara ve kalıplara güvenmeniz gerekebilir.

React Native , Facebook tarafından oluşturulan yerel bir mobil uygulama geliştirme framworküdür. Yerel mobil uygulamalar oluşturmak için JavaScript ve React’ı kullanır. React Native, geliştiricilerin tek bir kod parçası yazıp bunu birden fazla platforma (örn. iOS ve Android) dağıtmasına olanak tanırken aynı zamanda yerel bir kullanıcı deneyimi sunmaya devam eder.

Avantajları

Platformlar Arası Geliştirme: React Native, tek bir kod parçası yazmanıza ve onu hem iOS hem de Android’e dağıtmanıza olanak tanıyarak zamandan ve emekten tasarruf etmenizi sağlar.

Yerel Bileşenler: React Native, kullanıcı arayüzü bileşenlerini oluşturmak için yerel platform API’lerini kullanarak kullanıcı arayüzünü daha duyarlı ve yerel hale getirir.

Çalışırken Yeniden Yükleme: React Native, uygulamanızın tamamını yeniden oluşturmanıza gerek kalmadan, yaptığınız değişiklikleri gerçek zamanlı olarak görüntülemenize olanak tanıyan çalışırken yeniden yüklemeyi destekler, böylece geliştirme süresini azaltır.

Yerel API Erişimi: React Native ile yerel API’lere ve yerel modüllere erişmek için JavaScript’i kullanabilirsiniz. Bu, uygulamalarınıza kolayca platforma özgü işlevsellik eklemenizi sağlar.

Statista’ya göre React Native, dünya çapındaki geliştiriciler arasında en çok tercih edilen platformlar arası framework olarak ikinci sırada yer alıyor.

Dezavantajları

Platform Sınırlamaları: React Native, yerel API’ler sağlarken bazı özellikler veya performans iyileştirmeleri için platforma özel kod yazmanız gerekebilir.

Üçüncü Taraf Bağımlılıkları: 3. Taraf Bağımlılıkları: React Native, bazı özellikleri için üçüncü taraf kitaplıklara bağımlıdır ve bu da uyumluluk sorunlarına veya sunucu tarafı yüküne yol açabilir.

Performans Ek Yükü: React Native, yerel düzeyde performans sağlar, ancak karmaşık bir animasyon veya etkileşiminiz varsa, yerel çözümlerle karşılaştırıldığında performans ek yüküyle karşılaşabilirsiniz.

Temel Farklılıklar

Platform: React ile Native arasındaki en büyük fark odaklandıkları platformlardır. React esas olarak web geliştirmede kullanılırken, React Native öncelikle mobil uygulama geliştirmede kullanılır.

Kullanıcı Arayüzü Bileşenleri: React ve React Native, kullanıcı arayüzü bileşenleri oluşturmak için aynı kavramları kullanır, ancak React bileşenlerinin web tarayıcıları için, React Native’in ise mobil cihazlar için oluşturulmuş olması bakımından farklıdırlar.

İşleme: React, web tarayıcılarında UI bileşenlerini işlemek için sanal DOM kullanır. Öte yandan React Native, iOS ve Android’e özgü yerel bileşenleri kullanır ve bu da mobil uygulamalara daha doğal bir görünüm ve his verir.

Geliştirme Ortamı: React öncelikle web geliştirme için tasarlandığından, geliştirme ortamının kurulumu nispeten kolaydır. Ancak React Native’in, platforma özel araçlar ve bağımlılıklar da dahil olmak üzere mobil uygulama geliştirme için ayarlanması gerekir.

Performans: Hem React hem de React Native harika bir performansa sahiptir, ancak React Native uygulamaları, yerel oluşturmaları nedeniyle genellikle daha iyi bir kullanıcı deneyimine sahiptir.

Karşılaştırma Tablosu

Bakış açısı	React	React Native
Amaç	Web geliştirme için JavaScript kütüphanesi	Yerel mobil uygulamalar oluşturmaya yönelik framework
İşleme	Sanal DOM	Platforma özgü API’leri kullanan yerel bileşenler
Kod tabanı	JavaScript ve JSX	React Native’in yerel bileşenleriyle JavaScript
Bildirimsel Sözdizimi	Evet	Evet
Bileşenin Yeniden Kullanılabilirliği	Evet	Evet
Hot Reloading	HAYIR	Evet
Native API Erişimi	HAYIR	Evet

Hangisini seçmelisin?

Bu sorunun cevabı ne inşa ettiğinize bağlıdır. Bir web sitesi oluşturuyorsanız React’ı tercih etmelisiniz çünkü etkileşimli ve duyarlı web uygulamaları oluşturmak için harikadır. Ancak bir mobil uygulama geliştiriyorsanız React Native gidilecek yoldur. iOS ve Android için uygulamaları hızlı ve kolay bir şekilde oluşturmak için JavaScript becerilerinizden yararlanmanıza olanak tanır. Yani bir web sitesi için React’ı tercih edin. Mobil uygulama için React native’i tercih edin. Her şey projeniz için en iyi neyin işe yaradığıyla ilgilidir.

Sonuçlar

Hem React hem de React Native, modern kullanıcı arayüzleri oluşturmaya yönelik güçlü frameworklerdir.. Ancak her birinin güçlü ve zayıf yönleri vardır. Proje ihtiyaçlarınız için doğru olanı seçmek için iki farasındaki farkları anlamak önemlidir.

İster React kullanarak bir web uygulaması, ister React Native kullanarak yerel bir mobil uygulama oluşturuyor olun, her ikisi de dinamik ve etkileşimli kullanıcı deneyimleri oluşturmak için güçlü çözümler sunar.

React – Excel Dosyalarını Yükleyelim/Önizleme Yapalım

Bu blog gönderisindeki eğitimle React uygulamalarınızda Excel dosyalarını zahmetsizce nasıl yükleyeceğinizi ve görüntüleyeceğinizi öğreneceğiz. React ile web geliştirme becerilerinizi geliştirmek için diğer blog gönderilerini inceleyebilirsiniz. Şimdi hemen başlayalım ve projelerinizi Excel dosya entegrasyonuyla güçlendirelim!

app.js

import { useState } from "react";
import * as XLSX from 'xlsx';

function App() {

  // onchange states
  const [excelFile, setExcelFile] = useState(null);
  const [typeError, setTypeError] = useState(null);

  // submit state
  const [excelData, setExcelData] = useState(null);

  // onchange event
  const handleFile=(e)=>{
    let fileTypes = ['application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','text/csv'];
    let selectedFile = e.target.files[0];
    if(selectedFile){
      if(selectedFile&&fileTypes.includes(selectedFile.type)){
        setTypeError(null);
        let reader = new FileReader();
        reader.readAsArrayBuffer(selectedFile);
        reader.onload=(e)=>{
          setExcelFile(e.target.result);
        }
      }
      else{
        setTypeError('Please select only excel file types');
        setExcelFile(null);
      }
    }
    else{
      console.log('Please select your file');
    }
  }
  
  // submit event
  const handleFileSubmit=(e)=>{
    e.preventDefault();
    if(excelFile!==null){
      const workbook = XLSX.read(excelFile,{type: 'buffer'});
      const worksheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[worksheetName];
      const data = XLSX.utils.sheet_to_json(worksheet);
      setExcelData(data.slice(0,10));
    }
  }

  return (
    <div className="wrapper">

      <h3>Upload & View Excel Sheets</h3>

      {/* form */}
      <form className="form-group custom-form" onSubmit={handleFileSubmit}>
        <input type="file" className="form-control" required onChange={handleFile} />
        <button type="submit" className="btn btn-success btn-md">UPLOAD</button>
        {typeError&&(
          <div className="alert alert-danger" role="alert">{typeError}</div>
        )}
      </form>

      {/* view data */}
      <div className="viewer">
        {excelData?(
          <div className="table-responsive">
            <table className="table">

              <thead>
                <tr>
                  {Object.keys(excelData[0]).map((key)=>(
                    <th key={key}>{key}</th>
                  ))}
                </tr>
              </thead>

              <tbody>
                {excelData.map((individualExcelData, index)=>(
                  <tr key={index}>
                    {Object.keys(individualExcelData).map((key)=>(
                      <td key={key}>{individualExcelData[key]}</td>
                    ))}
                  </tr>
                ))}
              </tbody>

            </table>
          </div>
        ):(
          <div>No File is uploaded yet!</div>
        )}
      </div>

    </div>
  );
}

export default App;

import { useState } from "react";

import * as XLSX from 'xlsx';

function App() {

// onchange states

const [excelFile, setExcelFile] = useState(null);

const [typeError, setTypeError] = useState(null);

// submit state

const [excelData, setExcelData] = useState(null);

// onchange event

const handleFile=(e)=>{

let fileTypes = ['application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','text/csv'];

let selectedFile = e.target.files[0];

if(selectedFile){

if(selectedFile&&fileTypes.includes(selectedFile.type)){

setTypeError(null);

let reader = new FileReader();

reader.readAsArrayBuffer(selectedFile);

reader.onload=(e)=>{

setExcelFile(e.target.result);

}

else{

setTypeError('Please select only excel file types');

setExcelFile(null);

}

else{

console.log('Please select your file');

}

// submit event

const handleFileSubmit=(e)=>{

e.preventDefault();

if(excelFile!==null){

const workbook = XLSX.read(excelFile,{type: 'buffer'});

const worksheetName = workbook.SheetNames[0];

const worksheet = workbook.Sheets[worksheetName];

const data = XLSX.utils.sheet_to_json(worksheet);

setExcelData(data.slice(0,10));

}

return (

<h3>Upload & View Excel Sheets</h3>

{/* form */}

<button type="submit" className="btn btn-success btn-md">UPLOAD</button>

{typeError&&(

<div className="alert alert-danger" role="alert">{typeError}</div>

)}

</form>

{/* view data */}

{excelData?(

<thead>

<tr>

{Object.keys(excelData[0]).map((key)=>(

))}

</tr>

</thead>

<tbody>

{excelData.map((individualExcelData, index)=>(

{Object.keys(individualExcelData).map((key)=>(

<td key={key}>{individualExcelData[key]}</td>

))}

</tr>

))}

</tbody>

</table>

</div>

):(

<div>No File is uploaded yet!</div>

)}

</div>

);

}

export default App;

Github: https://github.com/fatihsoysal/React-Upload-And-View-Excel-Files

WebAPI – React Login Uygulaması Yapalım

Merhaba, bu yazımda basit bir uygulama ile react içerisinde login mantığı nasıl kurgulanır, bunu anlatacağım.

Oturum açma ve Kullanıcı Profili ekranları oluşturacağız. Örnek bir webapi üzerinden işlemlerimizi gerçekleştireceğiz.

Method: POST
URL: https://www.fatihsoysal.com/api/login (Dikkat: URL örnek için verilmiştir.)
Body (JSON):

{
    "username": "info@fatihsoysal.com",
    "password": "testpass"
}

{

"username": "info@fatihsoysal.com",

"password": "testpass"

}

Geri dönüş(response) ise şu şekilde olduğunu düşünelim:

{
    "status": "ok",
    "message": "Logged in",
    "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "user": {
        "id": 1,
        "fname": "Fatih",
        "lname": "Soysal",
        "username": "info@fatihsoysal.com",
        "email": "info@fatihsoysal.com",
        "avatar": "https://www.fatihsoysal.com/users/1.png"
    }
}

{

"status": "ok",

"message": "Logged in",

"accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",

"user": {

"id": 1,

"fname": "Fatih",

"lname": "Soysal",

"username": "info@fatihsoysal.com",

"email": "info@fatihsoysal.com",

"avatar": "https://www.fatihsoysal.com/users/1.png"

}

Gereklilikler:

Node.js https://nodejs.org
Yarn

npm install --global yarn

1 2	npm install --global yarn

Kurulum için bir test react projesi oluşturalım:

npx create-react-app react-basic-login

1 2	npx create-react-app react-basic-login

Kurulum gerçekleştirdik, şimdi çalışma klasörünü açalım:

cd react-basic-login

1 2	cd react-basic-login

Kullanacağımız paket kurulumlarını gerçekleştirelim:

Material UI
react-router-dom
Sweetalert

yarn add @material-ui/core @material-ui/icons react-router-dom sweetalert

1 2	yarn add @material-ui/core @material-ui/icons react-router-dom sweetalert

Oturum Açma ve Profil için ekranlar oluşturalım

2 ekran oluşturacağız:

Oturum açma API’sinin kullanıldığı oturum açma sayfası için Sigin.js
Kullanıcı profilini görüntülemek için Profile.js (bu ekrana gitmeden önce oturum açmış olmanız gerekecek)

SignIn.js:

import React, { useState } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import swal from 'sweetalert';

const useStyles = makeStyles((theme) => ({
  root: {
    height: '100vh',
  },
  image: {
    backgroundImage: 'url(https://source.unsplash.com/random)',
    backgroundSize: 'cover',
  },
  paper: {
    margin: theme.spacing(8, 4),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%',
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

async function loginUser(credentials) {
  return fetch('https://www.mecallapi.com/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(credentials)
  })
    .then(data => data.json())
 }

export default function Signin() {
  const classes = useStyles();
  const [username, setUserName] = useState();
  const [password, setPassword] = useState();

  const handleSubmit = async e => {
    e.preventDefault();
    const response = await loginUser({
      username,
      password
    });
    if ('accessToken' in response) {
      swal("Success", response.message, "success", {
        buttons: false,
        timer: 2000,
      })
      .then((value) => {
        localStorage.setItem('accessToken', response['accessToken']);
        localStorage.setItem('user', JSON.stringify(response['user']));
        window.location.href = "/profile";
      });
    } else {
      swal("Failed", response.message, "error");
    }
  }

  return (
    <Grid container className={classes.root}>
      <CssBaseline />
      <Grid item xs={false} md={7} className={classes.image} />
      <Grid item xs={12} md={5} component={Paper} elevation={6} square>
        <div className={classes.paper}>
          <Avatar className={classes.avatar}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <form className={classes.form} noValidate onSubmit={handleSubmit}>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="email"
              name="email"
              label="Email Address"
              onChange={e => setUserName(e.target.value)}
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="password"
              name="password"
              label="Password"
              type="password"
              onChange={e => setPassword(e.target.value)}
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
            >
              Sign In
            </Button>
          </form>
        </div>
      </Grid>
    </Grid>
  );
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

import React, { useState } from 'react';

import Avatar from '@material-ui/core/Avatar';

import Button from '@material-ui/core/Button';

import CssBaseline from '@material-ui/core/CssBaseline';

import TextField from '@material-ui/core/TextField';

import Paper from '@material-ui/core/Paper';

import Grid from '@material-ui/core/Grid';

import LockOutlinedIcon from '@material-ui/icons/LockOutlined';

import Typography from '@material-ui/core/Typography';

import { makeStyles } from '@material-ui/core/styles';

import swal from 'sweetalert';

const useStyles = makeStyles((theme) => ({

root: {

height: '100vh',

image: {

backgroundImage: 'url(https://source.unsplash.com/random)',

backgroundSize: 'cover',

paper: {

margin: theme.spacing(8, 4),

display: 'flex',

flexDirection: 'column',

alignItems: 'center',

avatar: {

margin: theme.spacing(1),

backgroundColor: theme.palette.secondary.main,

form: {

width: '100%',

marginTop: theme.spacing(1),

submit: {

margin: theme.spacing(3, 0, 2),

}));

async function loginUser(credentials) {

return fetch('https://www.mecallapi.com/api/login', {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify(credentials)

})

.then(data => data.json())

}

export default function Signin() {

const classes = useStyles();

const [username, setUserName] = useState();

const [password, setPassword] = useState();

const handleSubmit = async e => {

e.preventDefault();

const response = await loginUser({

username,

password

});

if ('accessToken' in response) {

swal("Success", response.message, "success", {

buttons: false,

timer: 2000,

})

.then((value) => {

localStorage.setItem('accessToken', response['accessToken']);

localStorage.setItem('user', JSON.stringify(response['user']));

window.location.href = "/profile";

});

} else {

swal("Failed", response.message, "error");

}

return (

</Avatar>

</Typography>

<TextField

variant="outlined"

margin="normal"

required

fullWidth

id="email"

name="email"

label="Email Address"

onChange={e => setUserName(e.target.value)}

<TextField

variant="outlined"

margin="normal"

required

fullWidth

id="password"

name="password"

label="Password"

type="password"

onChange={e => setPassword(e.target.value)}

<Button

type="submit"

fullWidth

variant="contained"

color="primary"

className={classes.submit}

</Button>

</form>

</div>

</Grid>

);

}

Profile.js:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import Avatar from '@material-ui/core/Avatar';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
  large: {
    width: theme.spacing(20),
    height: theme.spacing(20),
  },
}));

export default function Profile() {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const user = JSON.parse(localStorage.getItem('user'));

  const handleMenu = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleLogout = () => {
    localStorage.removeItem("accessToken");
    localStorage.removeItem("user");
    window.location.href = "/";
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            Profile
          </Typography>
            <div>
            <IconButton onClick={handleMenu} color="inherit">
              <Avatar src={user.avatar} />
            </IconButton>
            <Menu id="menu-appbar" 
              anchorEl={anchorEl} 
              open={open}
              onClose={handleClose}
            >
              <MenuItem onClick={handleLogout}>Logout</MenuItem>
            </Menu>
          </div>
        </Toolbar>
      </AppBar>
      <Card className={classes.root} variant="outlined">
        <CardContent>
          <Avatar src={user.avatar} className={classes.large} />
          <Typography variant="h5">
          Welcome {user.fname} {user.lname}
          </Typography>
        </CardContent>
      </Card>
    </div>
  );
}

import React from 'react';

import { makeStyles } from '@material-ui/core/styles';

import AppBar from '@material-ui/core/AppBar';

import Toolbar from '@material-ui/core/Toolbar';

import Typography from '@material-ui/core/Typography';

import IconButton from '@material-ui/core/IconButton';

import MenuItem from '@material-ui/core/MenuItem';

import Menu from '@material-ui/core/Menu';

import Avatar from '@material-ui/core/Avatar';

import Card from '@material-ui/core/Card';

import CardContent from '@material-ui/core/CardContent';

const useStyles = makeStyles((theme) => ({

root: {

flexGrow: 1,

menuButton: {

marginRight: theme.spacing(2),

title: {

flexGrow: 1,

large: {

width: theme.spacing(20),

height: theme.spacing(20),

}));

export default function Profile() {

const classes = useStyles();

const [anchorEl, setAnchorEl] = React.useState(null);

const open = Boolean(anchorEl);

const user = JSON.parse(localStorage.getItem('user'));

const handleMenu = (event) => {

setAnchorEl(event.currentTarget);

};

const handleClose = () => {

setAnchorEl(null);

};

const handleLogout = () => {

localStorage.removeItem("accessToken");

localStorage.removeItem("user");

window.location.href = "/";

};

return (

Profile

</Typography>

<div>

</IconButton>

<Menu id="menu-appbar"

anchorEl={anchorEl}

open={open}

onClose={handleClose}

<MenuItem onClick={handleLogout}>Logout</MenuItem>

</Menu>

</div>

</Toolbar>

</AppBar>

Welcome {user.fname} {user.lname}

</Typography>

</CardContent>

</Card>

</div>

);

}

Son olarak, Oturum Açma ve Profil ekranları arasındaki yönlendirme için App.js’yi düzenleyin . Oturum açma API’sinin çağrılmasında erişim belirteci yoksa kullanıcı yalnızca Oturum açma ekranına erişebilecektir .

app.js:

import React from 'react';
import './App.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Signin from './Signin';
import Profile from './Profile';

function App() {
  const token = localStorage.getItem('accessToken');

  if(!token) {
    return <Signin />
  }

  return (
    <div className="wrapper">
      <BrowserRouter>
        <Switch>
          <Route path="/profile">
            <Profile />
          </Route>
          <Route path="/">
            <Profile />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

import React from 'react';

import './App.css';

import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Signin from './Signin';

import Profile from './Profile';

function App() {

const token = localStorage.getItem('accessToken');

if(!token) {

return <Signin />

}

return (

</Route>

</Route>

</Switch>

</BrowserRouter>

</div>

);

}

export default App;

İşlemler bu kadar, şimdi uygulamayı başlatalım:

yarn start

1 2	yarn start

İşlem başarılı görünüyor! Bu makalemizde react üzerinde basit bir login işlemi ve session kontrolü nasıl yapılır, bunu inceledik, bir sonraki makalede görüşmek üzere, kendinize iyi bakın.