React JS | React Komponentinin Yaradılması

React, kullanıcı arabirimi oluşturmak için kullanılan bir JavaScript kütüphanesidir. React, bileşen tabanlı bir yapıya sahiptir ve bu bileşenler, kullanıcı arayüzünü oluşturmak için kullanılır.

Bir React bileşeni oluşturmak için öncelikle bir class veya bir function olarak tanımlanır. Bu bileşen, props adı verilen özellikleri alabilir ve kullanıcı arayüzünde gösterilir.

Bir Fonksiyon Bileşeni Oluşturma

Öncelikle, bir React bileşeni oluşturmak için function anahtar kelimesi kullanılarak bir fonksiyon bileşeni tanımlanır. Bu fonksiyon, HTML benzeri JSX sözdizimi kullanılarak oluşturulur.

  
function Hello(props) {
  return <h1>Merhaba, {props.name}</h1>;
}
  

Bu örnekte, Hello adında bir fonksiyon bileşeni oluşturulmuştur. Bu bileşen, name adında bir özellik alarak kullanıcı arayüzünde bir başlık olarak gösterilmektedir.

Bir Sınıf Bileşeni Oluşturma

Bir diğer yöntem ise, bir sınıf olarak tanımlanmış bir bileşen oluşturmaktır. Bu şekilde bir bileşen, class anahtar kelimesi kullanılarak tanımlanır.

  
class Welcome extends React.Component {
  render() {
    return <h1>Hoş geldiniz, {this.props.name}</h1>;
  }
}
  

Bu örnekte, Welcome adında bir sınıf bileşeni oluşturulmuştur. Bu bileşen de name adında bir özellik alarak kullanıcı arayüzünde bir başlık olarak gösterilmektedir.

Sonuç olarak

React, bileşen tabanlı bir yapıya sahip olduğu için, kullanıcı arabiriminin her bir parçası bir bileşen olarak tanımlanabilir. Bu sayede, her bir bileşen ayrı ayrı geliştirilebilir ve yeniden kullanılabilir. Böylece, React bileşenlerinin yaratılması, kullanıcı arayüzü geliştirmenin temel adımlarından biridir.