React’e mi geçiyorsunuz? jQuery’den geçiş sürecini nasıl kolaylaştıracağınızı keşfedin.

jQuery ve React, ön uç geliştirme için popüler JavaScript kitaplıklarıdır. jQuery bir DOM işleme 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 ve 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çmelisiniz?

Uygulamanızı jQuery’den React’e geçirmek 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’nin JavaScript temsili olan sanal bir DOM kullanmasıdır. Bu, bir kullanıcı bir React uygulamasıyla etkileşim kurduğunda, yalnızca DOM’nin 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, 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ç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şletip 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 edebildiğiniz için, onlar için birim testleri yazmak daha kolaydır.

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

Uygulamanızı jQuery’den React’e geçirmeyi planlıyorsanız, aklınızda bulundurmanız gereken birkaç şey var. Neye başlamanız gerektiğini bilmek ve uygulamanızın tek tek bölümlerini nasıl taşıyabileceğiniz konusunda iyi bir fikir edinmek önemlidir.

Önkoşullar

Taşıma işlemine başlamadan önce, bazı şeyleri ayarlamak için yapmanız gereken birkaç şey var. İ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 adında bir dosya oluşturmanız gerekir . 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ı İşleme

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.

$(“button”).click(function() {

  // do something

});

React, 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 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üğ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 sayıda etkinliğiniz varsa bunları takip etmek zor olabilir. React’te, olayları takip etmeyi kolaylaştırabilecek bileşenlerde tanımlarsınız. Ama takmak ve çıkarmak o kadar kolay değil.

React kullanıyorsanız, yeni olay işleme yöntemini kullanmak için kodunuzu güncellemeniz gerekir. Ele almak 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. Etkiler

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

$(“#element”).show();

React’te durumu yönetmek için useState() kancasını kullanabilirsiniz. Örneğin, bir öğeyi göstermek veya gizlemek istiyorsanız, bileşendeki durumu 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ı türde kancalara sahiptir ve bunlardan biri useState’tir. Bir 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ğunuz varsa bunları yönetmek zor olabilir. React’te efektler bileşenlerin içinde yaşar ve bu da kullanımı kolay olmasa da yönetimini kolaylaştırabilir.

3. Veri Alma

jQuery’de veri 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”,

  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 alabilirsiniz:

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ın üstesinden gelmek 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üğmelerin stilini belirlemek istiyorsanız, düğme öğesini hedefleyerek bunu yapabilirsiniz:

button {

  background-color: red;

  color: white;

}

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

<button style={{backgroundColor: ‘red’, color: ‘white’}}>

  Click me!

</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, stil bileşenleri gibi bir JS içinde CSS 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. Gerçekten gereksinimlerinize bağlıdır. Genel olarak, küçük projeler için satır içi stillerin 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. Webpack gibi bir araç kullanarak kodunuzu derlemeniz ve ardından ortaya çıkan bundle.js dosyasını web sunucunuza koymanız yeterlidir.