Yeni bir React Projesi Başlatma

React’i kesinlikle bir çatı (framework) olmadan da kullanabilirsiniz - bu, Sayfanızın bir bölümü için React’ı kullanın ile açıklanmaktadır Ancak, tamamen React ile yeni bir uygulama veya site oluşturuyorsanız, bir çatı kullanmanızı öneririz.

İşte nedeni.

Başlangıçta yönlendirme veya veri alımına ihtiyaç duymasanız bile, bunlar için bazı kütüphaneler eklemek isteyeceksinizdir. Yeni özelliklerle birlikte JavaScript paketiniz büyüdükçe, her rota için kodu bireysel olarak nasıl böleceğinizi bulmanız gerekebilir. Veri alımı ihtiyaçlarınız daha karmaşık hale geldikçe, uygulamanızın çok yavaş hissettiren sunucu-istemci ağ şelaleleriyle karşılaşma olasılığı yüksektir. Kitleniz, kötü ağ koşullarına sahip ve düşük uçlu cihazları olan daha fazla kullanıcıyı içerdiğinde, bileşenlerinizden HTML oluşturarak içeriği erken göstermek isteyeceksiniz - ister sunucuda, ister derleme sırasında. Kodunuzun bir kısmını sunucuda veya derleme sırasında çalıştırmak için kurulumunuzu değiştirmek oldukça zor olabilir.

Bu sorunlar React’a özgü değildir. İşte bu yüzden Svelte’nin SvelteKit’i, Vue’nun Nuxt’ı ve daha fazlası vardır. Bu sorunları kendi başınıza çözmek için, paketleyicinizi yönlendiricinizle ve veri alımı kütüphanenizle entegre etmeniz gerekecektir. İlk kurulumu çalıştırmak zor değildir, ancak zamanla büyüyen bir uygulamanın hızlı bir şekilde yüklenmesiyle ilgili birçok ince nokta vardır. Sayfanın gereken verilerle paralel olarak, mümkün olan en az uygulama kodunu göndermek isteyeceksiniz, ancak bunu tek bir istemci-sunucu turunda yapacaksınız. Muhtemelen sayfanın, progresif iyileştirmeyi desteklemek için JavaScript kodunuz çalışmadan önce etkileşimli olmasını isteyeceksiniz. Pazarlama sayfalarınız için JavaScript devre dışı bırakılsa bile her yerde barındırılabilen ve çalışabilen tamamen statik HTML dosyaları oluşturmak isteyebilirsiniz. Bu yetenekleri kendiniz oluşturmak gerçekten iş gerektirir.

Bu sayfadaki React çatıları, bu tür sorunları varsayılan olarak çözer ve sizden ekstra çalışma gerektirmeden bunları yapar. Sizin için çok hafif başlamalarına ve ardından uygulamanızı ihtiyaçlarınızla birlikte ölçeklendirmelerine izin verirler. Her React çatısının bir topluluğu vardır, bu nedenle sorulara yanıt bulmak ve araçları yükseltmek daha kolaydır. Çatılar ayrıca kodunuza yapı sağlar, böylece siz ve diğerleri farklı projeler arasında bağlam ve becerileri koruyabilirsiniz. Öte yandan, özel bir kurulumla desteklenmeyen bağımlılık sürümlerinde sıkışma olasılığı daha yüksektir ve esasen kendi çatınızı oluşturacaksınız - her ne kadar topluluksuz ve yükseltme yolu olmayan bir çatı olsa da (ve geçmişte yaptığımızlar gibi daha dağınık tasarlanmış).

Eğer hala ikna olmadıysanız veya uygulamanızın bu çatılar tarafından iyi hizmet edilmeyen sıradışı kısıtlamaları varsa ve kendi özel kurulumunuzu oluşturmak istiyorsanız, sizi durduramayız - devam edin! react ve react-dom‘u npm’den alın, Vite veya Parcel gibi bir paketleyici ile özel derleme sürecinizi ayarlayın ve yönlendirme, statik üretim veya sunucu tarafı işleme ve daha fazlası için ihtiyaç duyduğunuz diğer araçları ekleyin.

Next.js’in Uygulama Yönlendiricisi resmi React Sunucu bileşenleri spesifikasyonlarını tamamen uygular. Bu size, derleme zamanı bileşenleri, sadece sunucu bileşenleri ve inteaktif bileşenlerini tek React ağacı altında karışık olarak kullanmanıza olanak sağlar.

Mesela, sadece sunucu tarafında çalışan, veritabanından veya dosyadan okuma yapan bir React bileşenini async fonksiyon olarak yazabilirsiniz. Ardından veriyi alt taraftaki interaktif bileşenlere geçebilirsiniz.

// Bu bileşen *sadece* sunucu tarafında koşar. (veya toplanma sırasında)
async function Talks({ confId }) {
  // 1. Sunucu tarafındasınız, dolayısıyla data katmanı ile direkt iletişim kurabilirsin. API ucu gerekmiyor.
  const talks = await db.Talks.findAll({ confId });

  // 2. herhangi bir render mantığı oluşturabilirsiniz. Bu istemci tarafındaki javascript boyutunuzu arttırmayacaktır.
  const videos = talks.map(talk => talk.video);

  // 3. Oluşan veriyi tarayıcıda çalışacak ilgili bileşene geçiniz.
  return <SearchableVideoList videos={videos} />;
}

Next.js’in Uygulama Yönlendiricisi ayrıca Suspense ile data getirme ile entegre çalışmaktadır. Bu, React ağacınızdaki kullanıcı arayüzünüzün farklı bölümleri için bir yükleme durumu (iskelet yer tutucu gibi) belirtmenize olanak tanır.

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

Sunucu Bileşenleri ve Suspense, Next.js özelliklerinden ziyade React özellikleridir. Bununla birlikte, bu özellikleri çatı düzeyinde benimsemek, önemli ölçüde uygulama çalışması gerektiren ve destek almayı gerektiren bir süreçtir. Şu anda, Next.js Uygulama Yönlendiricisi en eksiksiz uygulamadır. React ekibi, bu özellikleri bir sonraki nesil çerçevelerde daha kolay uygulanabilir hale getirmek için paketleyici geliştiricileriyle çalışmaktadır.