Yeni bir React Projesi Başlatma

React’ı bir çatı (framework) olmadan da kullanabilirsiniz; ancak çoğu uygulamanın ve sitenin sonunda kod bölme, yönlendirme, veri çekme ve HTML oluşturma gibi yaygın sorunlara çözümler ürettiğini gördük. Bu sorunlar yalnızca React için değil, tüm UI kütüphaneleri için ortaktır.

Bir çatıyla başlayarak, React’e hızlı bir başlangıç yapabilir ve sonrasında kendi çatınızı oluşturmaktan kurtulabilirsiniz.

Canlı ortam seviyesi React Çatıları

These frameworks support all the features you need to deploy and scale your app in production and are working towards supporting our full-stack architecture vision. All of the frameworks we recommend are open source with active communities for support, and can be deployed to your own server or a hosting provider. If you’re a framework author interested in being included on this list, please let us know.

Next.js, tam özellikli bir React çatısıdır. Çok yönlüdür ve çoğunlukla, statik bir blogdan karmaşık bir dinamik uygulamaya kadar, her büyüklükte React uygulaması oluşturmanıza olanak tanır. Yeni bir Next.js projesi oluşturmak için terminalinizde şunu çalıştırın:

Next.js’e yeni başlıyorsanız, Next.js eğitimini takip edebilirsiniz.

Next.js Vercel tarafından desteklenmektedir. Bir Next.js uygulamasını herhangi bir Node.js sunucusuna, sunucusuz barındırmaya (serverless) veya kendi sunucunuza yapabilirsiniz. Tümüyle statik Next.js uygulamaları herhangi bir statik barındırmaya kurulabilir.

Remix

Remix iç içe yönlendirmeye sahip tam özellikli bir React çatısıdır. Uygulamanızı iç içe geçmiş parçalara bölebilmenizi sağlar ve bu parçalar, kullanıcı işlemlerine karşılık olarak paralel olarak veri yükleyebilir ve yenilenebilir. Yeni bir Remix projesi oluşturmak için şunu çalıştırın:

Remix’e yeni başlıyorsanız blog eğitimi (kısa) veya uygulama eğitimi (uzun) ni takip edebilirsiniz.

Remix Shopify tarafından desteklenmektedir. Yeni bir Remix projesi oluşturduğunuzda, dağıtım hedefinizi seçmeniz gerekmektedir. Bir Remix uygulamasını, bir adaptör kullanarak veya yazarak herhangi bir Node.js veya sunucusuz (serverless) barındırmaya dağıtabilirsiniz.

Gatsby

Gatsby hızlı CMS destekli web siteleri için bir React çatısıdır. Zengin eklenti ekosistemi ve GraphQL veri katmanı, içeriği, API’leri ve hizmetleri tek bir web sitesinde entegre etmeyi basitleştirir. Yeni bir Gatsby projesi oluşturmak için şunu çalıştırın:

Gatsby’e yeni başlıyorsanız, Gatsby eğitimini takip edebilirsiniz.

Gatsby Netlify tarafından desteklenmektedir. Tam statik Gatsby sitesini barındırma için herhangi bir statik barındırma hizmetini kullanabilirsiniz. Yalnızca sunucu özelliklerini kullanmayı tercih ederseniz, Gatsby için barındırma sağlayıcınızın bunları desteklediğinden emin olun.

Expo (yerel uygulamalar için)

Expo, gerçekten yerel kullanıcı arayüzlerine sahip evrensel Android, iOS ve web uygulamaları oluşturmanıza olanak tanıyan bir React çatısıdır. React Native için bir SDK sağlar ve yerel parçaların kullanımını kolaylaştırır. Yeni bir Expo projesi oluşturmak için şunu çalıştırın:

Expo’ya yeni başlıyorsanız, Expo eğitimini takip edebilirsiniz.

Expo Expo (firma) tarafından desteklenmektedir. Expo ile uygulama oluşturmak ücretsizdir ve uygulamalarınızı Google ve Apple uygulama mağazalarına kısıtlama olmaksızın gönderebilirsiniz. Ayrıca Expo, opsiyonel olarak ücretli bulut hizmetleri sunar.

Bleeding-edge React frameworks

React’ı nasıl daha da geliştirebileceğimizi keşfederken, React’ı çatılarla (özellikle yönlendirme, paketleme ve sunucu teknolojileriyle) daha yakından entegre etmenin, React kullanıcılarının daha iyi uygulamalar geliştirmelerine yardımcı olmak için en büyük fırsatımız olduğunu fark ettik. Next.js ekibi, React Sunucu Bileşenleri gibi çatı bağımsız ileri seviye React özelliklerinin araştırılması, geliştirilmesi, entegrasyonu ve test edilmesi konusunda bizimle işbirliği yapmayı kabul etti.

Bu özellikler, her geçen gün canlı ortama hazır olmaya daha da yaklaşıyor ve bunları entegre etme konusunda diğer paketleyici ve çatı geliştiricileriyle görüşmeler yapıyoruz. Umut ediyoruz ki, bir veya iki yıl içinde bu sayfadaki tüm çatılar, bu özelliklere tam desteğe sahip olacak. (Eğer bir çatı yazarı olarak bu özelliklerle deney yapmak için bizimle ortaklık kurmak istiyorsanız, lütfen bize bildirin!)

Next.js (App Router)

Next.js App Router (Uygulama Yönlendiricisi), React ekibinin tam yığın mimari vizyonunu gerçekleştirmeyi amaçlayan Next.js API’lerinin yeniden tasarımıdır. Bu, sunucuda veya hatta derleme sırasında çalışan eşzamansız bileşenlerde veri almanıza olanak tanır.

Next.js Vercel tarafından desteklenmektedir. Bir Next.js uygulamasını herhangi bir Node.js sunucusuna, sunucusuz barındırmaya (serverless) veya kendi sunucunuza yapabilirsiniz. Tümüyle statik Next.js uygulamaları herhangi bir statik barındırmaya kurulabilir.

// 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} />;
}

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