React.js render() ve return Yöntemleri

React, bileşenlerin bir görsel temsilini oluşturmak için render() yöntemini kullanır. Bu yöntem, bileşenin durumuna (state) ve özelliklerine (props) erişebilir ve JSX sözdizimini kullanarak bir HTML yapısı döndürür.

React sınıf bileşenleri için render() yöntemi zorunludur. Fonksiyonel bileşenlerde ise, return ifadesi kullanılarak render işlemi gerçekleştirilir. Ancak, React 16.8 sürümünden itibaren, fonksiyonel bileşenlerde useState, useEffect gibi React Hooks kullanarak bileşen içinde durum yönetimi yapabilir ve JSX döndürebilirsiniz.

Örneğin, aşağıdaki gibi bir sınıf bileşeni tanımlaması yaparken render() yöntemini kullanmanız gerekmektedir:

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Merhaba, Dünya!</h1>
        <p>Bu bir örnek bileşendir.</p>
      </div>
    );
  }
}

export default MyComponent;

Ancak, aşağıdaki gibi bir fonksiyonel bileşeni tanımlarken return ifadesini kullanarak render işlemi yapabilirsiniz:

import React from 'react';

function MyFunctionalComponent() {
  return (
    <div>
      <h1>Merhaba, Dünya!</h1>
      <p>Bu bir örnek fonksiyonel bileşendir.</p>
    </div>
  );
}

export default MyFunctionalComponent;

React, bileşenlerin bu şekilde render() yöntemini kullanarak görsel temsillerini oluşturmasını sağlar ve bu, React uygulamalarının temel yapısını oluşturur.

Share on Facebook

Tweet