React TemelleriAna Sayfaya Dön

Uygulama Yapısı

React ile bir uygulama oluştururken, uygulamanız büyük ya da küçük olsun fark etmez, genellikle belli bir yapı izlenir. İşte bu yapıya bir örnek. Kod parçalarını inceleyelim ve nasıl çalıştığını adım adım açıklayalım:

1. index.js Dosyası

Bu dosya, uygulamanın başlangıç noktasıdır. React bileşenlerini tarayıcıdaki bir HTML elementine yerleştirmek için kullanılır.

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './components/App'; // Ana uygulama bileşenini içe aktarıyoruz

const root = createRoot(
  document.querySelector('#root') // HTML dosyasındaki #root elementini bul
);

root.render(<App />); // App bileşenini #root içine render ediyoruz

2. App.js Dosyası

Bu dosya, uygulamanızın ana bileşeni olarak çalışır. Diğer bileşenleri bir araya getirir.

import Header from './Header'; // Header bileşenini içe aktarıyoruz

function App() {
  return (
    <>
      <Header /> {/* Uygulamanın üst kısmı */}
      <main>
        <p>Tipik bir uygulama yapısı</p> {/* Ana içerik */}
      </main>
    </>
  );
}

export default App;

3. Header.js Dosyası

Bu dosya, uygulamanın üst kısmını (header) oluşturur.

function Header() {
  return (
    <header>
      <h1>Example App</h1> {/* Başlık */}
    </header>
  );
}

export default Header;
Example App

Index.js Dosyasının Görevi

React projelerinde index.js dosyası, kodunuzun çalıştırılan ilk kısmıdır. Bu dosya, uygulamanızı tarayıcıya yerleştirmekten (render etmekten) sorumludur. Yazdığınız React elementlerini, canlı bir şekilde DOM’a dönüştürür.

Temel Görevi

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.querySelector('#root'));
root.render(<App />);

Tek Kök Nokta

Kurulum Dosyası Gibi Çalışır

index.js yalnızca uygulamanızı başlatmak için gerekli kurulum görevlerini yerine getirir. Örneğin:

import './styles/global.css';

import * as Sentry from '@sentry/react';
Sentry.init({ dsn: 'your-dsn' });

Bu dosya, uygulamanın aktif bir parçası değildir. Burada başlık (header), düğme (button) veya diğer bileşenleri doğrudan render etmek alışılmadık bir durumdur. Çünkü bunlar uygulamanın içeriğinde yer alır, kurulum dosyasında değil.

Tek Bir Bileşen Render Edilir

import { ThemeProvider } from './context/ThemeContext';

root.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>
);

App Bileşeni: Ana Merkez

React projelerinde sıklıkla App adında bir bileşen bulunur. Bu isim, “Application”ın (Uygulama) kısaltmasıdır ve genellikle proje içerisinde ana merkez görevi görür.

Nedir Bu App Bileşeni?

Ne İşe Yarar?

Router Kullanımı

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

Sıkı Kurallar Yok

Modüller: Uygulamanızı Parçalara Bölün

React projelerinde genellikle ES modül sistemi kullanılır. Bu sistem sayesinde, uygulamanızı birden fazla dosyaya bölerek daha düzenli ve yönetilebilir hale getirebilirsiniz.

Modüller Nedir ve Neden Kullanılır?

import/export Yapısı

React projelerinde bileşenler genellikle import ve export anahtar kelimeleri ile kullanılır. Bu, bir dosyadaki kodu başka bir dosyaya aktarmak ve yeniden kullanmak için harika bir yoldur. İşte bir örnek:

Bir Bileşeni Dışa Aktarma

// Header.js
function Header() {
  return <h1>Merhaba, React!</h1>;
}

export default Header; // Header bileşeni dışa aktarılıyor

Bir Bileşeni İçe Aktarma

// App.js
import Header from './Header'; // Header bileşeni içe aktarılıyor

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

export default App;

Modüller Hakkında Daha Fazla Bilgi

Eğer bu import/export sözdizimine aşina değilseniz, JavaScript’in “Modüller” konusunu öğrenebilirsiniz. Bu, JavaScript’in temel yapı taşlarından biridir ve React projelerinde çok sık kullanılır.

İleriye Dönük: Uygulama Yapısını Kullanmak

Bir Örnek: FancyButton

Örneğin, aşağıdaki gibi bir uygulama yapısı görebilirsiniz:

App.js Dosyası

import FancyButton from './FancyButton';

function App() {
  return (
    <FancyButton>
      Tıkla!
    </FancyButton>
  );
}

export default App;

FancyButton.js Dosyası

function FancyButton({ children }) {
  return (
    <button
      style={{
        padding: '16px 32px',
        border: '2px solid hsl(340deg 100% 50%)',
        borderRadius: '4px',
        background: 'hsl(340deg 100% 50% / 0.1)',
        fontSize: '1rem'
      }}
    >
      {children}
    </button>
  );
}

export default FancyButton;
Fancy Button

Bu yapı sayesinde, bileşenlerimiz hem modüler hem de yeniden kullanılabilir hale gelir.

index.js Nerede?

Yukarıdaki örneklerde index.js dosyasını görmüyor olabilirsiniz. Ama merak etmeyin! Burada genelde:

Eğer bu dosya gösterilmemişse, App bileşeninin otomatik olarak render edildiğini varsayabilirsiniz.