Uygulamanızı jQuery'den React'e Geçirme

[Replicant]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

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

Mevcut bir uygulamayı jQuery'den React'e nasıl geçireceğinizi öğrenin.

jQuery mi React?​

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

Neden jQuery'den React'e Geçmelisiniz?​

Uygulamanızı jQuery'den React'e taşımak istemenizin birkaç nedeni olabilir.

• 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 girdiğinde, yalnızca DOM'un değişen bölümlerinin güncelleneceği anlamına gelir. Bu, jQuery'nin tam DOM manipülasyonundan daha verimlidir.
• React daha sürdürülebilirdir: React'e geçmenin bir başka nedeni de jQuery'den daha sürdürülebilir olmasıdır. Bunun nedeni, React bileşenlerinin bağımsız olmasıdır, böylece bunları kolayca yeniden kullanabilirsiniz. Bu, bir React bileşeninde değişiklik yapmanız gerekirse, kod tabanının geri kalanını etkilemeden bunu yapabileceğiniz anlamına gelir.
• React daha ölçeklenebilir: Son olarak, React jQuery'den daha ölçeklenebilir. jQuery'nin monolitik 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 bir desteğe sahiptir: Birim testi söz konusu olduğunda, React jQuery'den daha iyi bir desteğe sahiptir. React bileşenlerini kolayca izole edebildiğiniz için, onlar için birim testleri yazmak daha kolaydır.

Uygulamanızı jQuery'den React'e Geçirme​

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

Önkoşullar​

Geçiş işlemine başlamadan önce, işleri ayarlamak için yapmanız gereken birkaç şey vardır. İlk olarak, create-react-app kullanarak bir React uygulaması oluşturmanız gerekir.

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

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

1. Olayları İşleme​

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

$("button").click(function() {
  // do something
});

React, olayları farklı şekilde işler. Öğelere olay eklemek yerine, bunları bileşenlerde tanımlarsınız. Örneğin, bir düğmeniz varsa, bileşende click olayını tanımlarsınız:

class Button extends React.Component {
  handleClick() {
    // do something
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me!
      </button>
    );
  }
}

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

Her yöntemin artıları ve eksileri vardır. jQuery'de olayların eklenmesi ve kaldırılması kolaydır. Ancak, çok fazla etkinliğiniz varsa bunları takip etmek zor olabilir. React'te, olayları bileşenlerde tanımlarsınız, bu da onları takip etmeyi kolaylaştırabilir. Ancak takılmaları ve çıkarılmaları o kadar kolay değildir.

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

2. Efektler​

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

$("#element").show();

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:

import { useState } from "react";
function Component() {
  const [isShown, setIsShown] = useState(false);
  return (
    <div>
      {isShown && <div>Hello!</div>}
      <button onClick={() => setIsShown(!isShown)}>
        Toggle
      </button>
    </div>
  );
}

Bu kod, isShown durum değişkenini ve setIsShown() işlevini tanımlar. React, uygulamanızda kullanabileceğiniz farklı kanca türlerine sahiptir ve bunlardan biri useState'tir. Kullanıcı düğmeyi tıklattığı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, birçoğuna sahipseniz yönetilmesi zor olabilir. React'te efektler, bileşenlerin içinde yaşar ve bu da kullanımı kolay olmasa da yönetilmesini kolaylaştırabilir.

3. Veri Getirme​

jQuery'de, verileri getirmek 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",
  dataType: "json",
  success: function(data) {
    // do something with the data
  }
});

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

fetch("https://example.com/data.json")
  .then(response => response.json())
  .then(data => {
    // do something with the data
  });

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 belirtebilirsiniz. Örneğin, bir sayfadaki tüm düğmelere stil uygulamak istiyorsanız, düğme öğesini hedefleyerek bunu yapabilirsiniz:

button {
  background-color: red;
  color: white;
}

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

<button style={{backgroundColor: 'red', color: 'white'}}>
  Click me!
</button>

React bileşenlerine stil katmanın bir başka yolu da global stiller kullanmaktır. Genel 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, stillendirilmiş bileşenler gibi bir CSS-in-JS kitaplığı kullanabilirsiniz:

import styled from 'styled-components';
const Button = styled.button`
  background-color: red;
  color: white;
`;

Satır içi stiller ve global stiller arasında doğru veya yanlış bir seçim yoktur. Bu gerçekten gereksinimlerinize bağlıdır. Genel olarak, satır içi stillerin küçük projeler için kullanımı 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 sunucusuna dağıtabilirsiniz. Kodunuzu Webpack gibi bir araç kullanarak derlemeniz ve ardından elde edilen paket .js dosyasını web sunucunuza koymanız yeterlidir.

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

 

[ByMoDuS]

Paylaşım için teşekkürler.

 

[NaimSazak]

Eline Sağlık cano