ReactJs Component Yapısı ve Kullanımı

React, kullanıcı arayüzü oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. React bileşen tabanlı bir yaklaşım sunar, bu nedenle uygulamalarınızı farklı bileşenlerin bir araya gelmesiyle oluşturabilirsiniz. İşte React bileşenlerinin yapısı ve kullanımı hakkında temel bilgiler:

1. Bileşen Yapısı: React bileşenleri genellikle iki türde oluşturulur: fonksiyon bileşenleri (function components) ve sınıf bileşenleri (class components).

a) Fonksiyon Bileşenleri: Fonksiyon bileşenleri, bir JavaScript işlevi olarak tanımlanır. Genellikle state (durum) yönetimi veya yaşam döngüsü metotları gibi özelliklere ihtiyaç duymayan basit bileşenler için kullanılırlar. İşte bir fonksiyon bileşeni örneği:

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Merhaba, Dünya!</h1>
    </div>
  );
}

export default MyComponent;

b) Sınıf Bileşenleri: Sınıf bileşenleri, React.Component sınıfını miras alarak tanımlanır. Bu tür bileşenler, durum yönetimi, yaşam döngüsü metotları ve daha karmaşık işlevler gerektiren bileşenler için kullanılır. İşte bir sınıf bileşeni örneği:

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h1>Merhaba, Dünya!</h1>
      </div>
    );
  }
}

export default MyComponent;

2. Bileşen Kullanımı: Bir bileşeni kullanmak için, bileşeni içeren bir üst bileşen veya uygulama oluşturmanız gerekir. Örneğin, bir App bileşeni içerisinde MyComponent’i kullanabilirsiniz:

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h2>React Uygulaması</h2>
      <MyComponent />
    </div>
  );
}

export default App;

Yukarıdaki örnekte, App bileşeni, MyComponent’i JSX içinde çağırarak kullanır. Bileşenler, JSX içinde HTML benzeri bir sözdizimi kullanılarak çağrılır. Bileşen çağrıldığında, bileşenin render() metodu çalıştırılır ve JSX içeriği ekranda görüntülenir.

Bu temel bilgiler, React bileşenlerinin yapısını ve kullanımını açıklamaktadır. React’ta daha gelişmiş bileşenler, durum yönetimi, yaşam döngüsü metotları, prop’lar ve olaylar gibi daha fazla özellik içerebilir. Ancak, başlangıç seviyesinde bu temel yapının anlaşılması önemlidir.