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.

Houssein Djirdeh

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.

Bu neden yararlı?

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 rehberlerde tüm bunlar, yalnızca React ekosistemine özgü kitaplıklar, API'ler ve özelliklerden bahsedildiği bir React uygulaması açısından ele alınmıştır.

Neler öğreneceksiniz?

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

  • React'i kullanma
  • React'in arka planda çalışma ş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ştirme işlemi, yeni başlatılan bir CRA uygulamasının dizin yapısını ve gerçek web sayfasını gösterir.

CRA'nın, test için temel bir Jest kurulumu içeren bir web paketi ve Babel derleme işlemi oluşturmak üzere 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 durum CRA dokümanlarında ayrıntılı bir şekilde açıklanmaktadı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: