Create React App kullanımdan kaldırıldıktan sonra React, resmi olarak başlangıç için framework kullanılmasını öneriyor.
React’e başlamanın yeni yolu: Create React App’ten framework’lere
React ile yeni bir uygulama veya web sitesi oluşturmak istiyorsanız, bir framework ile başlamak en iyi seçenektir.
Eğer uygulamanızın mevcut framework’lerin iyi karşılamadığı kısıtları varsa, kendi framework’ünüzü oluşturmayı tercih ediyorsanız ya da sadece bir React uygulamasının temellerini öğrenmek istiyorsanız, React uygulamasını sıfırdan da kurabilirsiniz.
Full-stack framework’ler
Bu önerilen framework’ler, uygulamaları production ortamında dağıtmak ve ölçeklemek için gereken tüm özellikleri destekler. Modern React özelliklerini entegre ederler ve React’in mimarisinden yararlanırlar.
Full-stack framework’ler sunucu gerektirmez
Bu sayfadaki tüm framework’ler client-side rendering (CSR), single-page app (SPA) ve static site generation (SSG) desteği sunar. Bu uygulamalar, sunucu olmadan CDN’e veya statik hosting hizmetlerine dağıtılabilir. Ayrıca bu framework’ler, kullanım senaryonuza uygunsa rota bazında server-side rendering eklemenize de olanak tanır.
Bu sayede yalnızca istemci taraflı bir uygulamayla başlayabilir ve daha sonra gereksinimleriniz değişirse uygulamayı yeniden yazmadan belirli rotalarda sunucu özelliklerini kullanmayı seçebilirsiniz. Rendering stratejisini nasıl yapılandıracağınız için framework dokümantasyonuna bakın.
Next.js (App Router)
Next.js’in App Router’ı, React’in mimarisinden en iyi şekilde yararlanarak full-stack React uygulamalarını mümkün kılan bir React framework’üdür.
npx create-next-app@latest
Next.js, Vercel tarafından sürdürülmektedir. Bir Next.js uygulaması oluşturup bunu Node.js ve serverless hosting’e ya da kendi sunucunuza dağıtabilirsiniz. Next.js ayrıca sunucu gerektirmeyen statik dışa aktarmayı da destekler. Vercel buna ek olarak isteğe bağlı ücretli bulut hizmetleri de sunar.
React Router (v7)
React Router, React ekosistemindeki en popüler routing kütüphanelerinden biridir ve Vite ile birlikte kullanıldığında full-stack bir React framework’ü oluşturabilir. Standart Web API’lerini öne çıkarır ve farklı JavaScript runtime’ları ile platformlar için hazır deployment şablonları sunar.
Yeni bir React Router framework’ü oluşturmak için şu komutu kullanın.
npx create-react-router@latest
React Router, Shopify tarafından sürdürülmektedir.
Expo (native uygulamalar için)
Expo, native UI kullanarak Android, iOS ve web için evrensel uygulamalar oluşturmanıza olanak tanıyan bir React framework’üdür. Native parçaların kullanımını kolaylaştıran bir React Native SDK’sı sağlar. Yeni bir Expo projesi oluşturmak için şu komutu kullanın.
npx create-expo-app@latest
Expo’yu ilk kez kullanıyorsanız, Expo eğitimine göz atın.
Expo, Expo (the company) tarafından sürdürülmektedir. Expo ile uygulama geliştirmek ücretsizdir ve uygulamaları Google veya Apple mağazalarına sınırlama olmadan gönderebilirsiniz. Expo ayrıca isteğe bağlı ücretli bulut hizmetleri de sunar.
Diğer framework’ler
Full-stack React vizyonuna doğru ilerleyen başka yükselen framework’ler de var.
- TanStack STart (Beta): TanStack Start, TanStack Router üzerine kurulu full-stack bir React framework’üdür. Nitro veya Vite ile tam belge SSR, streaming, server functions, bundling ve daha birçok kullanışlı araç sunar.
- RedwoodJS: Redwood, full-stack web uygulamalarını kolayca oluşturmak için önceden paketlenmiş bileşenler ve yapılandırmalarla gelen full-stack bir React framework’üdür.
React ekibinin full-stack mimari vizyonunu oluşturan özellikler nelerdir?
Next.js’in App Router bundler’ı, resmi React Server Components spesifikasyonunu eksiksiz biçimde uygular. Bu sayede build zamanı, yalnızca sunucuda çalışan ve etkileşimli bileşenleri tek bir React ağacında birleştirebilirsiniz.
Örneğin, yalnızca sunucuda çalışan bir React component’ini veritabanını veya dosyaları okuyan async bir fonksiyon olarak yazabilirsiniz. Ardından veriyi etkileşimli component’lere aktarabilirsiniz.
// Bu component *yalnızca* sunucuda (veya build sırasında) çalışır.
async function Talks({ confId }) {
// 1. Sunucudayken veri katmanıyla iletişim kurabilirsiniz. API endpoint’e gerek yoktur.
const talks = await db.Talks.findAll({ confId });
// 2. Rendering mantığı eklense bile JavaScript bundle boyutunu çok fazla artırmaz.
const videos = talks.map(talk => talk.video);
// 3. Veriyi tarayıcıda çalışacak component’e aktarır.
return <SearchableVideoList videos={videos} />;
}
Next.js’in App Router’ı, Suspense ile veri getirmeyi entegre eder. React tree içinde farklı kullanıcı arayüzleri için yükleme durumlarını (örneğin skeleton placeholder’lar) doğrudan tanımlamanıza imkan verir.
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
Server Components ve Suspense, Next.js’e özgü özellikler değil, React özellikleridir. Ancak bunları framework düzeyinde benimsemek için koordinasyon ve kayda değer bir uygulama emeği gerekir. Şu anda Next.js App Router en eksiksiz uygulamadır. React ekibi, bu özelliklerin yeni nesil framework’lerde daha kolay uygulanabilmesi için bundler geliştiricileriyle birlikte çalışıyor.
Sıfırdan başlamak
Eğer uygulamanızın mevcut framework’lerin iyi karşılamadığı kısıtları varsa, kendi framework’ünüzü oluşturmayı tercih ediyorsanız ya da bir React uygulamasının temellerini öğrenmek istiyorsanız, React projesine sıfırdan başlamak için kullanabileceğiniz başka seçenekler de vardır.
Sıfırdan başlamak daha fazla esneklik sağlar; ancak routing, veri getirme ve diğer yaygın kullanım kalıpları için hangi araçları kullanacağınıza karar vermeniz gerekir. Bu, mevcut bir framework kullanmak yerine kendi framework’ünüzü inşa etmeye benzer. Önerdiğimiz framework’ler bu sorunlar için yerleşik çözümler sunar.
Kendi çözümünüzü oluşturmak istiyorsanız, Vite, Parcel veya RSbuild gibi build araçlarıyla başlamanıza yardımcı olan sıfırdan React uygulaması oluşturma rehberine bakın.
6 yorum
React, bileşen tabanlı bir UI kütüphanesinden ibarettir. Yalnızca HTML üzerinde bileşen göstermek kolaydır, ancak bir web sitesi ya da uygulama oluşturmak için çok sayıda özelliğe ihtiyaç vardır. Bu yüzden framework kullanımı önerilir. Bu yalnızca React'e özgü bir durum değildir; günümüzde pek çok modern web uygulaması web framework'leriyle geliştirilmektedir. Ayrıca React, mutlaka React tabanlı bir framework ile kullanılmak zorunda değildir; farklı dillerle yazılmış web framework'leriyle de (ör. Go, Rust, Java vb.) birlikte kullanılabilir. Bu nedenle seçim her zaman kullanıcının elindedir.
Programcının React'ı hangi kısıtlar altında kullanacağını bilmediğiniz bir durumda, resmî belgelerin mümkün olduğunca vanilla'ya yakın bir ortam temel alınarak yazılması gerektiğini düşünüyorum.
React'in mutlaka React tabanlı bir framework olması gerekmez; çeşitli dillerle yazılmış web framework'leriyle (ör. Go, Rust, Java vb.) birlikte de kullanılabildiği için
-> aslında tam da bu nedenle, bence en azından React'in resmi belgelerindeki get started kısmında mümkün olduğunca başka bağımlılıklar olmadan yalnızca React kullanılması yönünde rehberlik edilmesi daha doğru olur.
Şey... ben de yakın zamanda React öğrenen biri olarak, CRA durdurulunca elimdeki çalışma kaynakları CRA tabanlı olduğu için ne yapacağım diye Next, React Router gibi seçeneklere baktım; ama bunlar kendi teknolojilerini de eklemiş yapılar olduğundan, React öğrenmeye çalışan biri açısından çok uygun görünmüyor.. Bana kalırsa kişisel olarak en azından Vite biraz daha iyi bir seçenek gibi.
React tarafı resmen framework ile başlamayı öneriyor -> Aslında buna epey geç kalınmış olsa da, React’in resmi dokümantasyonunun en baştan belirli bir framework ya da build tool ile başlamayı önermesi gerçekten doğru mu diye düşündürüyor. Mevcut kod tabanında o framework’ü ya da build tool’u kullanmanın mümkün olmadığı durumlar da olabilir ve bağımlılıkları artırmanın kendisi de başlı başına yük gibi gelebilir. Tek bir
scriptetiketiyle HTML’in içine ekleyip o kütüphanenin işlevlerini doğrudan kullanabildiğimiz zamanlar sanki daha rahattı. Fazla mı eski bir hikâye bu...Ben de illa öyle mi olmalı diye düşünüyorum.