React'ın temel kavramları (JSX, componentler, state ve props)

React, kullanıcı arayüzü oluşturmak için kullanabileceğiniz çok güçlü bir araçtır. Bu makalede, React'ın temel kavramlarından bahsedeceğiz: JSX, componentler, state ve props.

JSX, JavaScript ve HTML arasındaki bir karışımdır. JSX ile, componentleri tanımlarken HTML benzeri sözdizimi kullanabilirsiniz. Örneğin, aşağıdaki JSX kodu bir "Merhaba Dünya" başlıklı bir h1 etiketini oluşturur:

const element = <h1>Merhaba Dünya</h1>;

React componentleri, uygulamanızdaki bir parçayı temsil eder. Componentler, state ve props gibi verileri alır ve bunları kullanarak HTML döndürür. Örneğin, aşağıdaki kod bir "Merhaba Dünya" başlıklı bir component tanımlar:

class HelloWorld extends React.Component {
  render() {
    return <h1>Merhaba Dünya</h1>;
  }
}

State, bir component içindeki verileri tanımlar. State, component içinde tanımlanır ve sadece o component tarafından değiştirilebilir. Örneğin, aşağıdaki kod bir "ad" state'i içeren bir component tanımlar:

class HelloUser extends React.Component {
  state = {
    ad: "Kullanıcı"
  };

  render() {
    return <h1>Merhaba {this.state.ad}</h1>;
  }
}

Props, bir component'e dışarıdan veri geçirmek için kullanılır. Props, component içinde tanımlanmaz ve dışarıdan geçirilir. Örneğin, aşağıdaki kod bir "ad" prop'u içeren bir component tanımlar:

const MyComponent = (props) => {
return <h1>Merhaba, {props.name}</h1>;
}

ReactDOM.render(<MyComponent name="John Doe" />, document.getElementById('root'));

Bu örnekte, "MyComponent" component'ine "name" prop'u olarak "John Doe" değeri geçirilmiştir. Component içinde, props.name ile bu değer kullanılabilir.

Event Handling, React uygulamalarında DOM elementlerine olay dinleyicileri eklemek için kullanılır. Örneğin, bir butona tıklama olayını dinlemek için bir tıklama olay dinleyicisi ekleyebilirsiniz. React, JavaScript'te DOM olaylarını işlemek için synthetic events kullanır, bu sayede cross-browser uyumluluğu sağlar. Örneğin, aşağıdaki kod bir buton elementine tıklama olayı dinleyicisi ekler:

Event Handling, React uygulamalarında DOM elementlerine olay dinleyicileri eklemek için kullanılır. Örneğin, bir butona tıklama olayını dinlemek için bir tıklama olay dinleyicisi ekleyebilirsiniz. React, JavaScript'te DOM olaylarını işlemek için synthetic events kullanır, bu sayede cross-browser uyumluluğu sağlar. Örneğin, aşağıdaki kod bir buton elementine tıklama olayı dinleyicisi ekler:

const MyComponent = () => {
  const handleClick = () => {
    console.log("Button clicked!");
  };

  return <button onClick={handleClick}>Click me</button>;
};

Burada, handleClick fonksiyonu butona tıklama olayı gerçekleştiğinde çalıştırılır ve "Button clicked!" mesajını consol'a yazdırır.

Bu konuların iyi anlaşılması ve kullanımı, React uygulamalarınızın daha yüksek performanslı ve kullanıcı dostu olmasını sağlar.