React Tutorial 2023 15 – App.js Dosyasını ve Component Oluşturma Mantığını Anlamak

Merhabalar.

React ile gelen klasörleri ve dosyaları neden var olduklarını anlamaya devam ediyoruz. Bu yazımızın konusu App.js dosyası.

src klasörünü açarsanız App.js dosyasını göreceksiniz.

React’te App.js dosyası genellikle uygulamanın ana bileşenini içerir. Bu dosya, genellikle uygulamanın diğer bileşenlerini içeren bir hiyerarşi oluşturur. Diğer componentleri ve Route yapısını bu dosya içinde kurgularız. Burada kurguladığımız logiclere göre sayfamızda değişikler gerçekleşir ekranda görünmesi gereken componentlerimiz görünür ya da kaldırılır.

Şimdi kısaca App.js dosyasındaki kodlara bir bakalım.

React ve Gerekli Modüllerin İçe Aktarılması:

import logo from './logo.svg';
import './App.css';

Uygulama Bileşeni(Fonksiyonu):

Yazacağımız Componentler genel kullanım olarak dosyamızla aynı isimde bir fonksiyon olmalıdır. App isminde bir Component yaratacaksam dosyamın ismi App.js ya da App.jsx olmalı. Dosya içinde oluşturacağım fonksiyon da aşağıdaki gibi olmalıdır. Eski sürüm React geliştirmelerinde Componentleri Class Base oluştururken görebilirsiniz, ancak şu anki sürümde React, Componentleri birer fonksiyon olarak oluşturmamızı istiyor.

function App() {
  return (
    Kodlar
  );
}

Bu oluşturulan function geriye mutlaka bir JSX elementi return etmelidir. O yüzden return ifadesi içinde her zaman tüm kodlamaları yaptığımız bir ana bileşen elementimiz olmak zorundadır.

Aşağıda kodların tamamına bir göz atalım.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

<header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
</header>

Yazılmış olan yukardaki kısım bir div bloğu ile sarmalanmış ve bu sarmalanmış div geriye döndürülmektedir.

Bu ana div elementinden bağımsız, yeni bir kök element yaratırsanız çalışmayacaktır. React’in doğru şekilde çalışabilmesi için yazdığımız componentlerde bir kök element ve diğer oluşturulacak tüm elementler bunun çocuk elementleri olmak zorundadır.

Şu anda direkt JSX kodlamayla içinde oluşturulmuş bir sayfa var. Buraya yazdığımız farklı componentleri ve Route yapılarını ekleyeceğiz.

Bileşen Hiyerarşisi: App bileşeni genellikle diğer bileşenleri içerir. Bu bileşenler, uygulamanın farklı parçalarını temsil eder.

Dışa Aktarma: Son olarak, App bileşeni, uygulamanın ana bileşeni olduğu için dışa aktarılmalıdır.

export default App;

Bu, genel bir yapıdır ve projenin karmaşıklığına ve ihtiyaçlarına bağlı olarak değişebilir. App.js, uygulamanın giriş noktası olarak kabul edilir ve genellikle index.js veya App.js gibi başka bir dosya tarafından çağrılır.

Burayı da anladığımıza göre artık bir sonraki yazımızda bir React projesi nasıl çalıştırılır buna bakacağız.

Görüşürüz.