jQuery ve React, ön uç geliştirme için popüler JavaScript kitaplıklarıdır. jQuery bir DOM manipülasyon kitaplığı iken, React, kullanıcı arayüzleri oluşturmak için bir JavaScript kitaplığıdır.

Mevcut bir uygulamayı jQuery'den React'e nasıl taşıyacağınızı öğrenin.

jquery vs. Tepki?

jQuery ve React arasında seçim yapmak, ihtiyaçlarınıza ve tercihlerinize bağlıdır. Kullanımı kolay ve geniş bir topluluğa sahip bir kitaplık arıyorsanız jQuery iyi bir seçimdir. Ancak, büyük ölçekli geliştirme için daha uygun bir kitaplık arıyorsanız, React daha iyi bir seçenektir.

Neden jQuery'den React'e Geçiş Yapmalısınız?

Uygulamanızı jQuery'den React'e taşımak isteyebileceğiniz birkaç neden vardır.

  • React, jQuery'den daha hızlıdır: Ham performanstan bahsediyorsak, React jQuery'den daha hızlıdır. Bunun nedeni, React'in gerçek DOM'un JavaScript temsili olan sanal bir DOM kullanmasıdır. Bu, bir kullanıcı bir React uygulamasıyla etkileşime geçtiğinde, yalnızca değişen DOM bölümlerinin güncelleneceği anlamına gelir. Bu, jQuery'nin tam DOM manipülasyonundan daha etkilidir.
    • instagram viewer
  • Tepki daha sürdürülebilir: React'e geçiş yapmanın bir başka nedeni de jQuery'den daha sürdürülebilir olmasıdır. Bunun nedeni, React bileşenlerinin bağımsız olması ve böylece bunları kolayca yeniden kullanabilmenizdir. Bu, bir React bileşeninde değişiklik yapmanız gerekirse, bunu kod tabanının geri kalanını etkilemeden yapabileceğiniz anlamına gelir.
  • React daha ölçeklenebilir: Son olarak, React, jQuery'den daha ölçeklenebilirdir. JQuery'nin yekpare yaklaşımından daha ölçeklenebilir olan bileşen tabanlı bir mimari kullanır. Bu, bir React uygulamasını gerektiği gibi kolayca genişletebileceğiniz ve değiştirebileceğiniz anlamına gelir.
  • React, birim testi için daha iyi desteğe sahiptir: Birim testi söz konusu olduğunda, React, jQuery'den daha iyi desteğe sahiptir. React bileşenlerini kolayca izole edebileceğiniz için bunlar için birim testleri yazmak daha kolaydır.

Uygulamanızı jQuery'den React'e Nasıl Geçirirsiniz?

Uygulamanızı jQuery'den React'e taşımayı planlıyorsanız aklınızda bulundurmanız gereken birkaç şey var. Başlamak için neye ihtiyacınız olduğunu bilmek ve uygulamanızın ayrı bölümlerini nasıl taşıyabileceğiniz konusunda iyi bir fikir edinmek önemlidir.

Önkoşullar

Taşıma işlemine başlamadan önce, ayarları yapmak için yapmanız gereken birkaç şey vardır. Öncelikle yapmanız gerekenler bir React uygulaması oluştur create-react-app kullanarak.

Bu bağımlılıkları yükledikten sonra, adlı bir dosya oluşturmanız gerekir. index.js senin içinde kaynak dizin. Bu dosya, React uygulamanız için giriş noktası olacaktır.

Son olarak, kod tabanınızın ayrı bölümlerine geçebilir ve bunları uygun şekilde güncelleyebilirsiniz.

1. Olayları Yönetme

JQuery'de, öğelere olaylar ekleyebilirsiniz. Örneğin, bir düğmeniz varsa ona bir tıklama olayı ekleyebilirsiniz. Birisi düğmeye tıkladığında, olay işleyicisi çalışır.

$("düğme").tıkla(işlev() {
// bir şey yap
});

Tepki olayları farklı şekilde ele alır. Olayları öğelere eklemek yerine, bunları bileşenlerde tanımlarsınız. Örneğin, bir düğmeniz varsa, bileşende tıklama olayını tanımlarsınız:

sınıfDüğmeuzanırTepki.Bileşen{
 handleClick() {
// bir şey yap
 }
 render() {
geri dönmek (
<düğme onClick={this.handleClick}>
 Beni tıkla!
</button>
 );
 }
}

Burada Button bileşeni, handleClick() yönteminin tanımını içerir. Birisi düğmeye tıkladığında, bu yöntem çalışacaktır.

Her yöntemin artıları ve eksileri vardır. JQuery'de olayları eklemek ve kaldırmak kolaydır. Ancak, çok fazla etkinliğiniz varsa bunları takip etmek zor olabilir. React'te, olayları izlemeyi kolaylaştıracak şekilde bileşenlerde tanımlarsınız. Ancak takmak ve çıkarmak o kadar kolay değil.

React kullanıyorsanız, yeni olay işleme yöntemini kullanmak için kodunuzu güncellemeniz gerekecektir. İşlemek istediğiniz her olay için bileşende bir yöntem tanımlamanız gerekecektir. Bu yöntem, olay tetiklendiğinde çalışacaktır.

2. Etkileri

jQuery'de, bir öğeyi göstermek veya gizlemek için .show() veya .hide() yöntemlerini kullanabilirsiniz. Örneğin:

$("#element").göstermek();

React'te durumu yönetmek için useState() kancasını kullanabilirsiniz. Örneğin, bir öğeyi göstermek veya gizlemek istiyorsanız, durumu bileşende tanımlarsınız:

içe aktarmak { kullanımDevlet } itibaren "tepki";
işlevBileşen() {
sabit [isShown, setIsShown] = useState(YANLIŞ);
geri dönmek (
<div>
 {gösterilir &&<div>Merhaba!</div>}
<düğme onClick={() => setIsShown(!isShown)}>
 Değiştir
</button>
</div>
 );
}

Bu kod, isShown durum değişkenini ve setIsShown() işlevini tanımlar. Tepki var farklı kanca türleri uygulamanızda kullanabileceğiniz, useState bunlardan biridir. Bir kullanıcı düğmeyi tıkladığında, isShown durum değişkeni güncellenir ve öğe yalnızca uygun olduğunda görüntülenir.

jQuery'de efektlerin kullanımı kolaydır ve iyi çalışırlar. Ancak, çok sayıda varsa bunları yönetmek zor olabilir. React'te efektler, kullanımı o kadar kolay olmasa da yönetilmelerini kolaylaştırabilen bileşenlerin içinde yaşar.

3. Veri Alma

jQuery'de, verileri almak için $.ajax() yöntemini kullanabilirsiniz. Örneğin, bazı JSON verilerini almak istiyorsanız, bunu şu şekilde yapabilirsiniz:

$.ajax({
 url: "https://example.com/data.json",
 veri tipi: "json",
 başarı: işlev(veri) {
 // Yapmak bir şey ile the veri
 }
});

React'te, verileri getirmek için fetch() yöntemini kullanabilirsiniz. Bu yöntemi kullanarak JSON verilerini şu şekilde alabilirsiniz:

gidip getirmek("https://example.com/data.json")
 .sonra (yanıt => yanıt.json())
 .sonra (veri => {
 // Yapmak bir şey ile the veri
 });

jQuery'de $.ajax() yönteminin kullanımı kolaydır. Ancak, hataları işlemek zor olabilir. React'te fetch() yöntemi daha ayrıntılıdır, ancak hataları işlemek daha kolaydır.

4. CSS

JQuery'de, CSS'yi sayfaya göre belirleyebilirsiniz. Örneğin, bir sayfadaki tüm düğmelerin stilini belirlemek istiyorsanız, bunu düğme öğesini hedefleyerek yapabilirsiniz:

düğme {
 arka plan rengi: kırmızı;
 Beyaz renk;
}

React'te CSS'yi farklı şekillerde kullanabilirsiniz. Bunun bir yolu, satır içi stilleri kullanmaktır. Örneğin, bir düğmeyi stillendirmek istiyorsanız, bunu öğeye style niteliğini ekleyerek yapabilirsiniz:

<düğme stili={{backgroundColor: 'kırmızı', renk: 'beyaz'}}>
 Beni tıkla!
</button>

React bileşenlerine stil vermenin başka bir yolu da global stiller kullanmaktır. Global stiller, bir bileşenin dışında tanımladığınız ve uygulamadaki tüm bileşenlere uyguladığınız CSS kurallarıdır. Bunu yapmak için, stilli bileşenler gibi bir CSS-in-JS kitaplığı kullanabilirsiniz:

içe aktarmak tarz itibaren 'stil bileşenleri';
sabit Düğme = stil düğmesi`
 arka plan rengi: kırmızı;
 Beyaz renk;
`;

Satır içi stiller ile genel stiller arasında doğru veya yanlış seçim yoktur. Gerçekten gereksinimlerinize bağlıdır. Genel olarak, satır içi stillerin kullanımı küçük projeler için daha kolaydır. Daha büyük projeler için global stiller daha iyi bir seçenektir.

React Uygulamanızı Kolayca Dağıtın

React'in en önemli avantajlarından biri, React Uygulamanızı dağıtmanın çok kolay olmasıdır. React'i herhangi bir statik web sunucusunda dağıtabilirsiniz. Webpack gibi bir araç kullanarak kodunuzu derlemeniz ve ardından ortaya çıkan paket.js dosyasını web sunucunuza koymanız yeterlidir.

Ayrıca React uygulamanızı GitHub sayfalarında ücretsiz olarak barındırabilirsiniz.