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

React sitenizi mümkün olduğunca hızlı ve erişilebilir hale getirmek ister misiniz? Doğru yere geldiniz.

Houssein Djirdeh

React, kullanıcı arayüzü oluşturmayı kolaylaştıran açık kaynaklı bir kitaplıktır. Bu öğrenme rotasında, uygulamanızın performansını ve kullanılabilirliğini artırmak için kullanmanız gereken ekosistemdeki farklı API'ler ve araçlar ele alınmaktadır.

Bu kılavuzda, React uygulamasını kullanmaya nasıl başlayacağınız anlatılmaktadır. Bu bölümdeki diğer tüm rehberler, bir React uygulamasının hızını veya erişilebilirliğini optimize etmeyle ilgili konuları ele alır.

Neden yararlı?

Hızlı ve güvenilir uygulamaların nasıl oluşturulacağını açıklayan pek çok içerik olsa da hızlı ve güvenilir React uygulamalarının nasıl oluşturulacağını gösteren pek fazla içerik yoktur. 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 rotasındaki eğiticilerde şunlara odaklanmamaktadır:

  • React nasıl kullanılır?
  • React'in arka planda çalışma şekli

Gerektiğinde bu iki kavrama da değinilecek olsa da bu bölümdeki kılavuzlar ve codelab'ler, hızlı ve erişilebilir React sitelerinin nasıl oluşturulacağına odaklanacak. Bu nedenle, react hakkında temel düzeyde bilgi sahibi olmanız gerekir.

React uygulaması oluşturun

Create React App (CRA), React uygulamaları oluşturmaya başlamanın en kolay yoludur. Aralarında modül paketleyici (webpack) ve aktarıcı (Babel) içeren bir derleme sistemi de dahil olmak üzere çeşitli temel özelliklerle varsayılan bir kurulum sağlar.

Komut satırı kabuğunda, yeni bir uygulama oluşturmak için yalnızca aşağıdaki komutu çalıştırmanız gerekir:

npx create-react-app app-name

Komutun yürütülmesi tamamlandıktan sonra, aşağıdaki komutları kullanarak uygulamaya gidip ç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. İşleri kolaylaştırmak amacıyla, bu dosyalar gizlidir ve siz CRA'dan çıkarmadığınız sürece erişilemez. Mümkün olduğunda çıkarma yapmaktan kaçınmak her zaman en iyisidir. Çünkü bu, tüm bu yapılandırma dosyalarını kendi kaynak kodunuz olarak almak anlamına gelir ve bu da yönetmesi zor olabilir.

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.

Sonraki adım

Artık Create React uygulaması oluşturmaya nasıl başlayacağınızı bildiğinize göre, bu öğrenme rotasındaki tüm rehberlerden yararlanarak uygulamanızın performansını ve erişilebilirliğini nasıl iyileştireceğinizi öğrenebilirsiniz.