Selamlar!

React temelden öğrenim serimizin ikinci yazısı ile devam ediyoruz. Burada VS Code’da kullanacağımız bir eklentiyi yükleyerek başlayalım. VS Code’a girip eklentiler bölümüne tıklayarak “Live Server” eklentisini indirelim. Bu eklenti sayesinde projede yapılan değişiklikleri tarayıcıda direk görebileceğiz ve çıktıları daha hızlı alabileceğiz. Sizler için aşağıya bir görsel anlatım bırakıyorum.

VS Code Live Server Kurulumu
VS Code Live Server Kurulumu

React Component Nedir, Nasıl Çalışır?

Bu küçük ayrıntıda sonra asıl konumuza dönelim. Bu yazımızda componentler nedir ve nasıl çalışırlar bunları öğreneceğiz. Component mantığının kavranması açısından şuradaki React Component Nedir, Ne İşe Yarar adlı yazıma da bakabilirsiniz.

NOT: React öğrenmek için en az temel seviyede JS bilgimizin olması gerekiyor.

Component, JS’de kullandığımız functionların aynısıdır diyebiliriz. Bir defa yazıyoruz ve istediğimiz yerde/miktarda çağırıp kullanabiliyoruz. Örnek header, content, sidebar, footer, navbar gibi kısımları React’ta component olarak yazacağız ve istediğimiz kadar, istediğimiz yerde çağıracağız.

Component yapısını avantajı composable(birleştirilebilir) imkanı sağlamasıdır. Böl, parçala, yönet sözünün vücut bulmuş hali diyebiliriz bu kısma çünkü parça parça oluşturuyoruz ve puzzle gibi birleştiriyoruz ve ana yapımız oluşmuş oluyor.

NOT: ReactDOM.render() react 18 öncesinde kullanılıyordu ve 18 ve sonrası bunu artık desteklemiyor.

//index.js

function Navbar() {
   return (
      <div>
       <a href="#">LOGO</a>
       <ul className="menu">
         <li>Home</li>
         <li>Contact</li>
       </ul>
      </div>
   )
}

ReactDOM.render(
    <div>
        <Navbar />
    </div>,
    document.getElementById("root")
)

Yukarıdaki örnek kodda Navbar() fonksiyonunu (componentini) render içinde <Navbar /> şeklinde çağırarak kullanıyoruz ve ilk componentimizi yazarak kullanmış oluyoruz. Buradaki yapı modülerlik kazanıyor ve başka bir component eklemek istediğimizde aynı şekide ekleyip, istediğimiz yerden çağırıyoruz. Aşağıdaki örnekte MainContent() isimli bir component projeye dahil edilmiştir.

//index.js

function Navbar() {
   return (
      <div>
       <a href="#">LOGO</a>
       <ul className="menu">
         <li>Home</li>
         <li>Contact</li>
       </ul>
      </div>
   )
}

function MainContent() {
   return (
      <h1>I'm learning React!</h1>
   )
}

ReactDOM.render(
    <div>
        <Navbar />
        <MainContent />
    </div>,
    document.getElementById("root")
)

Component yapısı kısaca JS’de kullanılan function yapılarıdır diyebiliriz. Burada neden React kullanmalıyız sorusuna bir cevap olarak bir örnek vermek istiyorum. React, JavaScript kütüphanesidir, yani yazılan React kodları günün sonunda JS koduna çevriliyor. Bunu aşağıdaki bir örnekle anlamaya çalışalım.

Yapılacak işlem

  1. Bir h1 elementi oluştur.
  2. İçerisine bir metin gir.
  3. Class ismine “header” ver.
  4. Son olara bu h1 elementini #root id’li div içine yerleştir.

Bu işlemi JavaScript’te ve React’ta nasıl yapabiliri bakalım.

//Vanilla JavaScript

const h1 = document.createElement("h1")
h1.textContent = "This is an imperative way to program"
h1.className = "header"
document.getElementById("root").append(h1)
//React

ReactDOM.render(<h1 className="header">Hello, React!</h1>, document.getElementById("root"))

Yukarıdaki küçük örnekte de görüldüğü gibi React’ta bu işlem hem daha kolay, hem daha az zaman alıyor. İşte React kullanmamızın sebeplerinden birisi budur.

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.