Aracılığıyla paylaş

React'e genel bakış

React JS nedir?

React, ön uç kullanıcı arabirimleri oluşturmaya yönelik açık kaynaklı bir JavaScript kitaplığıdır. Tam uygulama çerçevesi sağlayan diğer JavaScript kitaplıklarından farklı olarak React, yalnızca durumu koruyan ve kullanıcı arabirimi öğeleri oluşturan bileşenler olarak adlandırılan kapsüllenmiş birimler aracılığıyla uygulama görünümleri oluşturmaya odaklanır. Tek bir bileşeni bir web sayfasına yerleştirebilir veya karmaşık bir kullanıcı arabirimi oluşturmak için bileşenlerin hiyerarşilerini iç içe yerleştirebilirsiniz.

React bileşenleri genellikle HTML'ye çok benzeyen bir JavaScript uzantısı olan JavaScript ve JSX (JavaScript XML) ile yazılır, ancak kullanıcı arabirimi öğeleri için olay işleyicileri kaydetme gibi yaygın görevleri gerçekleştirmeyi kolaylaştıran bazı söz dizimi özelliklerine sahiptir. React bileşeni, bileşenin kullanıcı arabirimini temsil eden JSX'i döndüren işleme yöntemini uygular. Bir web uygulamasında, bileşen tarafından döndürülen JSX kodu tarayıcıda işlenen tarayıcı uyumlu HTML'ye çevrilir.

Önemli

Şubat 2025'te React ekibi React Uygulaması Oluştur'un (CRA) yeni uygulamalar için kullanım dışı bırakıldığını duyurdu . Ekip, mevcut uygulamaların Next.js veya React Router gibi bir çerçeveye geçirilmesini ya da Vite, Parsel veya RSBuild gibi bir derleme aracına geçirilmesini önerir.

React Windows üzerinde çalışıyor mu?

Evet. Windows, React uygulamaları geliştirmek için iki farklı ortamı destekler:

React ile ne yapabilirsiniz?

Windows, React geliştiricileri için aşağıdakiler dahil olmak üzere çok çeşitli senaryoları destekler:

  • Temel web uygulamaları: React'i kullanmaya yeni başlamanız ve öncelikli olarak React ile temel bir web uygulaması oluşturma hakkında bilgi edinmek istiyorsanız , Windows'ta vite ön uç araçlarını kullanarak bir React uygulaması oluşturmanızı öneririz. Üretim için dağıtılacak bir web uygulaması oluşturmayı planlıyorsanız, daha iyi performans hızı, sistem çağrısı uyumluluğu ve yerel geliştirme ortamınızla dağıtım ortamınız (genellikle linux sunucusudur) arasında hizalama için Linux için Windows Alt Sistemi'nde (WSL) vite ön uç araçlarını kullanarak bir React uygulaması oluşturmayı düşünebilirsiniz.

  • Single-Page Uygulamaları (SPA): Bunlar, tüm yeni sayfaları yüklemek için tarayıcı varsayılanı yerine geçerli web sayfasını bir sunucudan yeni verilerle dinamik olarak yeniden yazarak kullanıcıyla etkileşim kuran web siteleridir. Statik içerik odaklı bir SPA web sitesi oluşturmak istiyorsanız Gatsby'yi WSL'ye yüklemenizi öneririz. Node.js arka uç ile sunucu tarafından oluşturulan bir SPA web sitesi oluşturmak istiyorsanız, WSL üzerine Next.js yüklemenizi öneririz. (Next.js artık statik dosya sunma da sunar).

  • Yerel masaüstü uygulamaları: Masaüstü için React Native + macOS , çeşitli masaüstü bilgisayar türleri, dizüstü bilgisayarlar, tabletler, Xbox ve Karma Gerçeklik cihazları arasında çalışan JavaScript ile yerel masaüstü uygulamaları oluşturmanıza olanak tanır. Hem Windows SDK'sını hem de macOS SDK'sını destekler.

  • Yerel mobil uygulamalar: React Native , yerel platform kullanıcı arabirimi koduna işleyen JavaScript ile Android ve iOS uygulamaları oluşturmanın platformlar arası bir yoludur. React Native'i yüklemenin iki ana yolu vardır: Expo CLI ve React Native CLI. StackOverflow'da ikisinin iyi bir karşılaştırması vardır. Expo,uygulamalarınızı çalıştırmak ve test etme amacıyla iOS ve Android mobil cihazlar için bir istemci uygulamasına sahiptir. Windows, React Native ve Expo CLI kullanarak android uygulaması geliştirme yönergeleri için bkz. Windows'da Android geliştirmesi için React Native.

Yükleme seçenekleri

React'i yüklemenin birkaç farklı yolu ve kullanım örneği senaryonuza en uygun tümleşik araç zinciri vardır. İşte en popülerlerden birkaçı.

React araçları

Basit bir React bileşenini düz metin düzenleyicisinde yazmak React'e iyi bir giriş olsa da, bu şekilde oluşturulan kod büyük miktardadır, bakımı ve dağıtımı zordur ve yavaştır. Üretim uygulamalarının gerçekleştirmesi gereken bazı yaygın görevler vardır. Bu görevler, uygulama tarafından bağımlılık olarak alınan diğer JavaScript çerçeveleri tarafından işlenir. Bunlar aşağıdakileri içerebilir:

  • Derleme - JSX, React uygulamaları için yaygın olarak kullanılan dildir, ancak tarayıcılar bu söz dizimini doğrudan işleyemez. Bunun yerine kodun standart JavaScript söz diziminde derlenmesi ve farklı tarayıcılar için özelleştirilmesi gerekir. Babel , JSX'i destekleyen bir derleyici örneğidir.
  • Paketleme - Modern web uygulamaları için performans önemli olduğundan, bir uygulamanın JavaScript'inin yalnızca uygulama için gerekli kodu içermesi ve mümkün olduğunca az dosyada birleştirilmesi önemlidir. Bu görevi sizin için webpack gibi bir paketleyici gerçekleştirir.
  • Paket yönetimi - Paket yöneticileri, uygulamanıza üçüncü taraf paketleri güncelleştirme ve bağımlılıkları yönetme gibi işlevleri eklemeyi kolaylaştırır. Yaygın olarak kullanılan paket yöneticileri arasında Yarn ve npm vardır.

Birlikte, uygulamanızı oluşturmanıza, oluşturmanıza ve dağıtmanıza yardımcı olan çerçeve paketine araç zinciri adı verilir. Bu araç zincirini kullanan react için kurulumu kolay bir geliştirme ortamı, sizin için tek sayfalık basit bir uygulama oluşturan Vite'dir . Vite'ı kullanmak için gerekli olan tek kurulum Node.js'dir.

React Native bileşen dizini

React Native uygulamasında kullanılabilecek bileşenler şunlardır:

  • Temel bileşenler - React Native çerçevesinin bir parçası olarak geliştirilen ve desteklenen bileşenler.
  • Topluluk bileşenleri - Topluluk tarafından geliştirilen ve sürdürülen bileşenler.
  • Yerel bileşenler - Platforma özel kod kullanarak kendi yazdığınız ve React Native'den erişilebilecek şekilde kaydettiğiniz bileşenler.

React Native Directory, hedef platforma göre filtrelenebilen bileşen kitaplıklarının listesini sağlar.

Fullstack React araç zinciri seçenekleri

React bir çerçeve değil bir kitaplıktır, bu nedenle daha karmaşık bir uygulama oluşturmak için ek araçlar gerekebilir. React'i kullanmaya ek olarak şunları da kullanmayı düşünebilirsiniz:

  • Paket yöneticisi: React için iki popüler paket yöneticisi npm (NodeJS ile birlikte gelir) ve yarn'dır. Her ikisi de yüklenebilen, bakımlı paketlerden oluşan geniş bir kitaplığı destekler.
  • React Router: Web uygulamanız için yer işaretlenebilir URL'ler veya React Native'de birleştirilebilir gezinme yolları gibi konulara çözüm sağlayabilecek bir navigasyon bileşenleri koleksiyonu. React yalnızca durum yönetimi ve bu durumu DOM'a işlemeyle ilgilenir, bu nedenle React uygulamaları oluşturmak için genellikle React Router gibi bir yönlendirme kitaplığı kullanılması gerekir.
  • Redux: Veri akışı mimarisine yardımcı olan tahmin edilebilir bir durum kapsayıcısı. Daha gelişmiş React geliştirmesine girene kadar büyük olasılıkla ihtiyacınız olan bir şey değildir. Redux'ün yaratıcılarından Dan Abramov'dan alıntı yapmak gerekirse: "Vanilya React ile ilgili sorun yaşamadan Redux'i kullanmayın."
  • Webpack: Modül paketleyicisi olarak da bilinen JavaScript modüllerini derlemenize olanak tanıyan bir derleme aracı. Webpack uygulamanızı işlediğinde, projenizin ihtiyaç duyduğu her modülü eşleyen ve bir veya daha fazla paket oluşturan bir bağımlılık grafiği oluşturur.
  • Uglify: JavaScript ayrıştırıcısı, küçültücü, sıkıştırıcı ve güzelleştirici araç seti.
  • Babel: EcMAScript 2015+ kodunu geçerli ve eski tarayıcılarda veya ortamlarda geriye dönük uyumlu bir JavaScript sürümüne dönüştürmek için kullanılan bir JavaScript derleyicisi. Bazı söz dizimi dönüşümlerini veya tarayıcı polyfill'lerini mikro düzeyde yönetmenize gerek kalmaması ve hangi internet tarayıcılarını destekleyeceğinizi tanımlayabilmeniz için babel-preset-env kullanmak da faydalı olabilir.
  • ESLint: Kodunuzu daha tutarlı hale getirmenize ve hatalardan kaçınmanıza yardımcı olan JavaScript kodunuzda bulunan desenleri tanımlamaya ve raporlamaya yönelik bir araçtır.
  • Enzim: React için, React Bileşenlerinizin çıkışını test etmenizi kolaylaştıran bir JavaScript test yardımcı aracıdır.
  • Jest: React uygulamalarında idiomatic JavaScript testleri yazmaya yardımcı olmak için Babel ile birlikte çalışan bir test çerçevesi.
  • Mocha: Asenkron test, raporlama ve yakalanmayan özel durumları doğru test vakalarına eşleme konusunda yardımcı olmak için Node.js ve tarayıcıda çalışan bir test çerçevesi.

React kursları ve öğreticileri

React'i öğrenmek ve örnek uygulamalar oluşturmak için önerilen birkaç yer şunlardır:

Ek kaynaklar

  • Last updated on