ReactJS Ders 7 | Pratik Yapalım

Bir örnek ile karmaşık bir bileşen ağacı oluşturup pratik yapalım:

import React from 'react';

// Ana bileşen
const App = () => {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
};

// Başlık bileşeni
const Header = () => {
  return (
    <header>
      <h1>React Uygulaması</h1>
    </header>
  );
};

// İçerik bileşeni
const Content = () => {
  return (
    <section>
      <h2>İçerik Bölümü</h2>
      <p>Bu bir içerik paragrafıdır.</p>
    </section>
  );
};

// Alt bilgi bileşeni
const Footer = () => {
  return (
    <footer>
      <p>Telif Hakkı © 2023 React Uygulaması</p>
    </footer>
  );
};

export default App;

App adında bir ana bileşen oluşturduk. App bileşeni, Header, Content ve Footer bileşenlerini içerir.

Her bir bileşen, ok işlevi (=>) kullanarak bir fonksiyonel bileşen olarak tanımlanır. Bileşenler, JSX sözdizimini kullanarak geri dönüş değeri olarak HTML benzeri elementleri döndürür.

Header bileşeni, bir başlık etiketi içeren bir header elementini döndürür. Content bileşeni, bir bölüm etiketi içeren başlık ve paragraf elementlerini döndürür. Footer bileşeni, bir alt bilgi etiketi içeren bir footer elementini döndürür.

Ana bileşen olan App bileşeni, Header, Content ve Footer bileşenlerini içererek bir bileşen ağacı oluşturur.

Bu örneği kullanarak, App bileşenini bir DOM öğesine ekleyerek React uygulamanızı başlatabilirsiniz. Örneğin, src/index.js dosyasında aşağıdaki gibi yapabilirsiniz:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Bu şekilde, App bileşenini root id’sine sahip bir DOM öğesine yerleştirerek uygulamanızı çalıştırabilirsiniz.