Satır Satır React JS Açıklamaları

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Artır</button>
    </div>
  );
}

Her satırı tek tek inceleyelim;

import: Bu kelime, bir JavaScript modülünde başka bir modülü içe aktarmak için kullanılır. React ve useState gibi bileşenlerin ve özelliklerin bu bileşende kullanılabilmesi için bu modülleri içe aktarıyoruz.

React, { useState } from 'react';: Bu satırda, React kütüphanesini içe aktarıyoruz.
{ useState }, React’ta bulunan useState adlı Hook’u da içe aktarıyor. useState, bileşen içinde durum (state) yönetimini sağlar.

function: Bu kelime, bir JavaScript fonksiyonu tanımladığımızı belirtir. “Counter” adlı bir fonksiyonel bileşen tanımlamak için kullanılır.

Counter(): Bu, “Counter” adlı fonksiyonel bileşenin tanımının başladığı yerdir. Fonksiyon ismi ve parantezler, bileşenin tanımlandığını gösterir.

const: Bu kelime, bir değişken tanımlamak için kullanılır. “count” ve “setCount” adlı değişkenleri tanımlıyoruz.

[count, setCount]: Bu, bir değişkenin içeriğini ve içeriğini güncellemek için kullanılan bir özel dizi (array) yapısıdır. “count”, değişkenin mevcut değerini, “setCount”, değişkenin değerini güncellemek için kullanılacak işlevi temsil eder.

useState(0): Bu, “useState” Hook’unu kullanarak “count” adlı bir state değişkeni oluşturuyoruz ve başlangıç değeri olarak 0 atıyoruz.

incrementCount: Bu, “incrementCount” adlı bir fonksiyon tanımlar. Bu fonksiyon, “count” değişkeninin değerini artırmak için kullanılacak.

setCount(count + 1);: Bu, “count” değişkeninin değerini bir artırarak günceller. “setCount”, state’i güncellemek için kullanılan özel bir işlevdir.

<div>: Bu, bir HTML div öğesini temsil eder. React bileşenlerinin dönüştürdüğü JSX (JavaScript XML) sözdizisinde(syntax) HTML öğeleri gibi görünürler.

<p>Count: {count}</p>: Bu, bir paragraf (p) öğesini temsil eder ve bu öğenin içeriği JSX içinde bir değişken olan “count” ile doldurulur. Böylece, sayacın mevcut değeri ekranda görüntülenir.

<button onClick={incrementCount}>Artır</button>: Bir düğme (button) öğesini temsil eder ve “incrementCount” fonksiyonunu çağırmak için tıklanabilirlik (onClick) durumunu kullanır. Yani, bu düğmeye tıkladığınızda sayacın değeri artar.