React 4 – Nereye Ne Yazacacağız?

React geliştirmeye başlarken, eğer daha önce gerçekten React ile hiç uğraşmadıysanız bu soruyu sormanız muhtemel.

Önceki yazımızda ilk fitili “index.html” den ateşliyoruz demiştik. “index.html” bir adet div içeriyordu ve id’si de “root” idi.

“index.js” içinde ise bu elementi “App” componenti ile dolduruyorduk. Yani aslında bütün olayımız App içinde dönecek.

App içinde şu anda sadece bir div var ve bu div içinde de sadece “Hello World” yazıyor. “Hello World” yerine olmasını gerektiğimiz sayfayı buraya ekleyeceğiz.

Örneğin bir üstte header, ortada main component ve altta da footer olan bir tasarımımız olsa, bunu nasıl yazarız? Öncelikle HeaderComponent, MainComponent ve FooterComponent i yazarız. Bunların içerikleri ve tasarımları size ait. Sonrasında ise sadece oluşturduğunuz componentleri App.js içinde çağıracaksınız.

App.js:

import './App.css';
import FooterComponent from './FooterComponent';
import MainComponent from './MainComponent';
import HeaderComponent from './HeaderComponent';

function App() {
  return (
    <div className="App">
        <HeaderComponent/>
        <MainComponent/>
        <FooterComponent/>
    </div>
  );
}

export default App;

Peki bu componentleri nasıl yapacağız? Bunu şimdilik hiç düşünmeyin ve sadece “App” componentini kopyalayın. Div içinde ilkinde “Header”, ikincisinde “Body”, üçüncüsünde ise “Footer” yazsın. Gereksiz importları da kaldırabilirsiniz.

HeaderComponent.js

import React from 'react';
import './index.css';

function HeaderComponent() {
  return (
    <div className="HeaderComponent">
        Header
    </div>
  );
}

export default HeaderComponent;

MainComponent.js

import React from 'react';
import './index.css';

function MainComponent() {
  return (
    <div className="MainComponent">
        Body
    </div>
  );
}

export default MainComponent;

FooterComponent.js

import React from 'react';
import './index.css';

function FooterComponent() {
  return (
    <div className="FooterComponent">
        Footer
    </div>
  );
}

export default FooterComponent;

Ve kodumuzun çıktısı aşağıdaki gibi olacak.

Bunu neden gösterdim? Bazen insanlar bir şeye ilk girdiklerinde neyi nasıl yapacaklarını, nereye ne yazacaklarını karıştırabiliyor. App içerisinde güzel bir header, güzel bir body ve güzel bir footer koyduktan sonra, güzel de bir sayfamız olacak.

Burada yapacağımız şeyler ise aslında belirlediğimiz bir mantık içerisinde, componentleri doğru yerlere koyarak sayfa bütünlüğünü korumak. Bunu da ilerleyen derslerde yavaş yavaş yapacağız.

 

Sadık Bahadır Memiş

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir