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 iyileştirmek için kullanmayı düşünmeniz gereken, ekosistemdeki farklı API'ler ve araçlar ele alınacaktır.

Bu kılavuzda, bir React uygulamasını nasıl çalıştıracağınız anlatılmaktadır. Bu bölümdeki diğer tüm kılavuzlarda, bir React uygulamasının hızını veya erişilebilirliğini optimize etmeye yönelik konular ele alınmaktadır.

Neden faydalı oldu?

Hızlı ve güvenilir uygulamaların nasıl oluşturulacağını açıklayan çok sayıda içerik vardır, ancak hızlı ve güvenilir React uygulamalarının nasıl oluşturulacağını gösteren çok fazla içerik yoktur. Bu rehberler tüm bunları yalnızca kitaplıklardan, API'lerden ve React ekosistemine özgü özelliklerden bahsedilen bir React uygulaması açısından ele alır.

Neler öğreneceksiniz?

Bu öğrenme yolundaki eğiticilerde şunlara odaklanmaz:

  • React'ı kullanma
  • Tepki'nin arka planda işleyiş şekli

Gerektiğinde bu kavramların her ikisine de değinilecek olsa da bu bölümdeki tüm kılavuzlar ve codelab'ler bunun yerine hızlı ve erişilebilir React sitelerinin nasıl oluşturulacağına odaklanacaktır. Bu nedenle temel React bilgisi gereklidir.

React Uygulaması oluşturun

Create React App (CRA), React uygulamaları oluşturmaya başlamanın en kolay yoludur. Bir modül paketleyici (web paketi) ve bir aktarıcı (Babel) içeren bir derleme sistemi gibi çeşitli temel özelliklere sahip varsayılan bir kurulum sağlar.

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

npx create-react-app app-name

Komutun yürütülmesi tamamlandıktan sonra, uygulamaya gidip aşağıdaki komutları kullanarak uygulamayı çalıştırabilirsiniz:

cd new-app
npm start

Aşağıdaki yerleştirme işlemi, dizin yapısını ve yeni başlatılan bir CRA uygulamasının gerçek web sayfasını gösterir.

CRA'nın bir web paketi ve test için temel bir Jest kurulumu içeren Babel derleme işlemi oluşturmak için kullandığı birden fazla yapılandırma dosyası ve derleme komut dosyaları vardır. Kullanıcının işini kolaylaştırmak için bu dosyalar gizlidir ve CRA'dan çıkarılıncaya kadar dosyalara erişilemez. Mümkün olduğunda çıkarma işleminden kaçınmak en iyisidir, çünkü bu durumda tüm yapılandırma dosyalarını kendi kaynak kodunuz olarak alıp yönetmek zorlaşabilir.

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 belgelerinde ayrıntılı olarak 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 yolundaki tüm rehberleri kullanarak uygulamanızın performansını ve erişilebilirliğini nasıl iyileştireceğinizi öğrenebilirsiniz: