Başlayın: React uygulamanızı optimize etme

React sitenizi mümkün olduğunca hızlı ve erişilebilir hâle getirmek mi istiyorsunuz? Doğru yere geldiniz.

React, kullanıcı arayüzleri oluşturmayı kolaylaştıran açık kaynak bir kitaplıktır. Bu öğrenme yolu, ekosistemdeki farklı API'leri ve uygulamanızın performansını ve kullanılabilirliğini artırmak için kullanabileceğiniz araçları kapsar.

Bu kılavuzda, React uygulamasını nasıl oluşturacağınız ve kullanacağınız açıklanmaktadır. Bu bölümdeki diğer tüm kılavuzlarda, React uygulamasının hızını veya erişilebilirliğini optimize etmeyle ilgili konular ele alınır.

Hızlı ve güvenilir uygulamaların nasıl oluşturulacağını açıklayan çok sayıda içerik var ancak hızlı ve güvenilir React uygulamalarının nasıl oluşturulacağını gösteren çok fazla içerik yok. Bu kılavuzlarda, yalnızca React ekosistemine özgü kitaplıklar, API'ler ve özelliklerden bahsedilerek tüm bu konular React uygulaması açısından ele alınır.

Neler öğreneceksiniz?

Bu öğrenme yolundaki eğitimlerde aşağıdaki konulara odaklanılmaz:

  • React'i kullanma
  • React'in işleyiş şekli

Bu iki kavrama gerektiğinde değinilecek olsa da bu bölümdeki tüm kılavuzlarda ve kod laboratuvarlarında, hızlı ve erişilebilir React siteleri oluşturmaya odaklanılır. Bu nedenle, React hakkında temel düzeyde bilgi sahibi olmanız gerekir.

Create React App

Create React App (CRA), React uygulamaları oluşturmaya başlamanın en kolay yoludur. Modül paketleyici (webpack) ve derleyici (Babel) içeren bir derleme sistemi de dahil olmak üzere birçok temel özelliğin yerleşik olduğu varsayılan bir kurulum sağlar.

Komut satırı kabuğunda yeni bir uygulama oluşturmak için aşağıdakileri çalıştırmanız yeterlidir:

npx create-react-app app-name

Komut çalıştırıldıktan sonra aşağıdaki komutları kullanarak uygulamaya gidip uygulamayı çalıştırabilirsiniz:

cd new-app
npm start

Aşağıdaki yerleşik kodda, yeni başlatılmış bir CRA uygulamasının dizin yapısı ve gerçek web sayfası gösterilmektedir.

CRA'nın, test için temel bir Jest kurulumu içeren bir webpack ve Babel derleme işlemi oluşturmak için kullandığı birden fazla yapılandırma dosyası ve derleme komut dosyası vardır. Kullanıcının işini kolaylaştırmak için bu dosyalar gizlidir ve CRA'dan ayrılmadan erişilemez. Mümkün olduğunda çıkarma işlemini yapmaktan kaçının. Bu işlem, tüm yapılandırma dosyalarını kendi kaynak kodunuz olarak almanız anlamına gelir ve bu da yönetimi zorlaştırabilir.

Yeni bir CRA uygulamasının dizin yapısı yalnızca uygulamanızda çalışmak için gerçekten değiştirmeniz gereken dosyaları içerir. Bu konu CRA dokümanlarında ayrıntılı olarak açıklanmıştır.

Sırada ne var?

Create React App oluşturmaya nasıl başlayacağınızı öğrendiğinize göre, bu eğitim yolundaki tüm kılavuzlardan yararlanarak uygulamanızın performansını ve erişilebilirliğini nasıl iyileştireceğinizi öğrenin: