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:

• Windows
• Windows Subsystem for Linux üzerinde bir React geliştirme ortamı yükleme

React ile ne yapabilirsiniz?

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

• Basic web uygulamaları: React'i kullanmaya yeni yeniyseniz ve öncelikli olarak React ile temel bir web uygulaması oluşturmayı öğrenmek istiyorsanız Windows üzerindeki vite ön uç araçlarını kullanarak 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 Windows Subsystem for Linux (WSL) üzerindeki vite ön uç araçlarını kullanarak 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 ucu olan sunucu tarafından işlenmiş bir SPA web sitesi oluşturmak istiyorsanız WSL'ye Next.js yüklemenizi öneririz. (Ancak Next.js artık statik dosya sunma da sunuyor).

• Yerel masaüstü uygulamaları: React Native for Desktop + macOS, çeşitli masaüstü bilgisayarlar, dizüstü bilgisayarlar, tabletler, Xbox ve Karma Gerçeklik cihazlarında çalışan JavaScript ile yerel masaüstü uygulamaları oluşturmanıza olanak tanır. Hem Windows SDK hem de macOS SDK 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. React Native, Expo CLI ve Windows kullanarak Android uygulaması geliştirme talimatları için Windows'ta Android geliştirmek için React Native sayfasına bakın.

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çı.

• Windows üzerinde Vite kullanarak React'i doğrudan yükleyin
• Linux için Windows Alt Sisteminde (WSL) Vite kullanarak React'i yükleyin
• WSL'ye Next.js çerçevesini yükleme
• WSL'de Gatsby çerçevesini yükleme
• Masaüstü masaüstü geliştirmesi için React Native'i yükleme
• Windows üzerinde Android geliştirmesi için React Native'i yükleyin
• Platformlar arasında mobil geliştirme için React Native'i yükleme)
• React'i araç zinciri olmadan tarayıcıya yükleyin: React, en temel biçimiyle yalnızca metin dosyalarının bir koleksiyonu olan bir JavaScript kitaplığı olduğundan, bilgisayarınıza herhangi bir araç veya kitaplık yüklemeden React uygulamaları oluşturabilirsiniz. Web sayfasına yalnızca birkaç "etkileşim serpme" eklemek isteyebilirsiniz ve derleme araçlarına ihtiyacınız olmayabilir. Yalnızca HTML sayfasına düz <script> etiket ekleyerek React bileşeni ekleyebilirsiniz. React belgelerindeki "Bir Dakikada React Ekle" adımlarını izleyin.

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 Yarn ve npm'dir.

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 gereken tek kurulum Node.js.

• Windows geliştirme için Node.js'i WSL üzerinde veya Windows üzerinde yüklemek için yönergeleri izleyin.

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 gezinmek için birleştirilebilir yol gibi konularda size yardımcı olabilecek bir gezinti 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ı, minifier, kompresör 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. Söz dizimi dönüşümlerini veya tarayıcı polyfill'leri mikro yönetim gerekmemesi ve hangi internet tarayıcılarının destekleneceğini belirleyebilmeniz 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 Bileşenlerinizin çıkışını test etmenizi kolaylaştıran React için bir JavaScript test yardımcı programı.
• Jest: React uygulamalarında idiomatic JavaScript testleri yazmaya yardımcı olmak için Babel ile birlikte çalışan bir test çerçevesi.
• Mocha: Eşzamansız 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:

• React öğrenme yolu, temel bilgileri kullanmaya başlamanıza yardımcı olacak çevrimiçi kurs modülleri içerir.
• Tarayıcıda çalışan tek sayfalı bir uygulama (SPA) oluşturun (Microsoft Graph API ile bir kullanıcının takvim bilgilerini alan bu örnek web uygulaması gibi)
• Next.js ile sunucu tarafından işlenmiş bir uygulama veya Gatsby ile statik site tarafından oluşturulan bir uygulama oluşturma
• Windows, Android ve iOS cihazlarında çalışan bir native uygulama için kullanıcı arabirimi (UI) oluşturun (bu native Windows uygulama örneklerine veya Microsoft Graph API ile bir kullanıcının takvim bilgilerini alan bu örnek yerel uygulamasına göz atın)
• Surface Duo çift ekranlı cihaz için bir uygulama geliştirme
• Fluent UI React bileşenlerini kullanarak web uygulaması veya yerel uygulama oluşturma
• TypeScript ile React uygulaması oluşturma

Ek kaynaklar

• Resmi React belgeleri, React ile ilgili en son güncel bilgileri içerir.
• React Geliştirici Araçları için Microsoft Edge Eklentileri: React geliştirmenize yardımcı olmak için Microsoft Edge geliştirme araçlarınıza iki sekme ekler: Bileşenler ve Profil Oluşturucu.