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, bina arayüzleri oluşturan açık kaynak bir kitaplıktır daha kolay olur. Bu öğrenme rotasında, performansı artırmak ve performansı artırmak için kullanmayı düşünmeniz gereken bir ekosistem en iyi uygulamaları paylaşacağız.

Bu kılavuzda, React uygulamasını kullanmaya nasıl başlayacağınız anlatılmaktadır. Bu bölümdeki diğer tüm kılavuzlarda, hızı optimize etme veya erişilebilirlik özellikleri bulunuyor.

Neden yararlı?

İnternet'te hızlı ve güvenilir bir web sitesi oluşturmak için ancak hızlı ve güvenilir şekilde nasıl uygulama geliştirileceğini gösteren pek fazla örnek bulunmuyor React izin verir. Bu kılavuzlar tüm bunları React açısından ele alır. yalnızca belli başlı kitaplıklar, API'ler ve React ekosisteminden bahsediliyor.

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, kılavuzların bu bölümdeki codelab'ler bunun yerine hızlı ve kolay bir şekilde React sitelerinde kullanılabilir. Bu nedenle, react konusunda temel düzeyde bilgi sahibi olmak, gerekir.

React uygulaması oluşturun

Create React App (CRA), kullanıcıların React uygulamaları oluşturmaya başlamanın en kolay yolu. Varsayılan olarak kullanılır yerleşik olarak bulunan bir dizi temel özellikle birlikte kurulduğunda, bir modül paketleyici (webpack) ve bir aktarıcı (Babel) içerir.

Komut satırı kabuğunda, yeni bir komut satırı oluşturmak için yalnızca aşağıdaki komutu uygulama:

npx create-react-app app-name

Komutun yürütülmesi tamamlandıktan sonra uygulamaya gidip çalıştırabilirsiniz aşağıdaki komutlarla değiştirin:

cd new-app
npm start

Aşağıdaki yerleştirme kodu, yeni bir istemcinin dizin yapısını ve gerçek web sayfasını bir CRA uygulamasıdır.

CRA'nın kurulum için kullandığı birden fazla yapılandırma dosyası ve derleme komut dosyası vardır bir temel içeren webpack ve Babel derleme işlemi Test için Jest kurulumu. İşleri basitleştirmek için kullanıcınız varsa bu dosyalar gizlidir ve siz CRA'dan çıkarmadığınız sürece söz konusu dosyalara erişilemez. Google mümkün olan her durumda bir iletiyi çıkarmaktan kaçınmak en iyisidir çünkü bu, tüm içe aktarmanızı zorlaştırabilir. Bu da sizin işleyeceğiz.

Yeni bir CRA uygulamasının dizin yapısı, yalnızca uygulamanız üzerinde çalışmak için değişiklik yapmanız lazım. İlgili içeriği oluşturmak için kullanılan CRA belgeleri ayrıntılı bir şekilde açıklıyor.

Sırada ne var?

Artık Create React uygulaması oluşturmaya nasıl başlayacağınızı bildiğinize göre kullanarak uygulamanızın performansını ve erişilebilirliğini artırın. Bunun için ele alalım: