React’e Giriş: İlk Bileşen

React’e Giriş: İlk Bileşen

React kullanıcı arayüzleri oluşturmak için kullanılan ve Facebook tarafından geliştirilmiş popüler bir JavaScript kütüphanesidir. React’ ın en büyük avantajı component tabanlı yapısı sayesinde arayüzleri çok iyi yönetilebilir ve tekrar kullanılabilir parçalara ayırabilmesidir. Bu sayede büyük projelerde bile kod daha kolay okunabilir hale gelir. Web geliştirmede özellikle tek sayfa uygulamalarında yani SPA’ da React sıklıkla tercih edilir. Bu yazıda React’ ın temel yapısı olan bileşen (component) kavramına giriş yapacağız, ilk React bileşenimizi nasıl yazabileceğimizi adım adım öğrenip bileşenlerin nasıl çalıştığını gözlemleyeceğiz.

Component Nedir?

Component React’ da kullanıcı arayüzünü parçalar halinde oluşturmamıza yarayan bir yapıdır. Componentler yani bileşenler sayesinde uygulamanızı parçalara ayırabilir ve her bir parçayı bağımsız olarak geliştirebilirsiniz. Örneğin bir buton, kart, başlık ya da liste birer component olarak kodlanabilir. Bu sayede bu parçalar başka bileşenler içinde kullanılabilir ve uygulama boyunca tekrar tekrar çağrılabilir.

Birlikte İlk Fonksiyonel Bileşenimizi Yazalım

Şimdi basit bir component yazarak başlayalım. Aşağıdaki kod bloğunda “Merhaba Dünya!” mesajını ekrana yazdıran bir bileşen görebilirsiniz:

  import React from “react”;
    
  function Merhaba() { 
    return <h1>Merhaba React!</h1>; 
  } 
  
  export default Merhaba;
  

Kodun Detaylı Açıklaması

• import React from “react”; satırı React kütüphanesini projemize dahil eder. Bu satır kodu çalıştırmak için gereklidir.
• function Merhaba() { } kısmı ‘Merhaba’ adında bir bileşen tanımlar. Fonksiyon ismi mutlaka büyük harfle başlamalıdır bu sayede componentimizi istediğimiz her sayfadan çağırıp kullanabiliriz ayrıca küçük harfle başlarsa html elementi olarak algılanır.
• return <h1>Merhaba React!</h1>; ifadesi jsx kullanarak ekrana yazdırılacak html benzeri döner. JSX, JavaScript içinde HTML benzeri sözdizim kullanmamızı sağlar.
• export default Merhaba; satırı Merhaba bileşenini dışa aktarır. Böylece bu bileşen başka dosyalarda import edilerek kullanılabilir.

Bileşeni Uygulamada Kullanmak

Oluşturduğumuz bileşeni uygulamanın ana bileşeni olan App.js içinde kullanabiliriz. App.js dosyası genelde projenin giriş noktasıdır. App.js’de Merhaba bileşenini nasıl kullanabileceğinizi gösteren örnek:

  import React from “react”;
  import Merhaba from “./Merhaba”;
  
  function App() { 
    return ( <div> <Merhaba /> </div> ); 
  } 
  export default App;
  

Yukarıdaki kodda ilk olarak Merhaba bileşenini import ediyoruz. Ardından App bileşeninin içinde <Merhaba /> etiketi kullanılarak Merhaba bileşenini çağırıyoruz. Bu sayede Merhaba bileşeninin döndürdüğü h1 etiketi App bileşeninin içinde ekrana gelir. React’ da bir bileşeni başka bir bileşenin içinde kullanmak oldukça kolaydır. Ayrıca App bileşeni dışa aktarılır ve projenin index.js dosyasında render edilir. Bu da React uygulamanızın kök dosyasıdır.

JSX ve React

JSX React ile birlikte gelen ve html benzeri bir yapı sunan JavaScript uzantısıdır. Bu sayede html yazarmış gibi kod yazabiliriz ama aslında JavaScript’in gücünü kullanırsınız. Mesela JSX içinde JavaScript değişkenlerini süslü parantezler kullanarak doğrudan ekleyebiliriz. Ayrıca koşullu ifadeler, map gibi fonksiyonlar da JSX ile rahatlıkla kullanılabilir. Bu özellikler sayesinde kullanıcı arayüzünüzü dinamik bir hale getirebiliriz.

Neden Component Kullanmalıyız?

Component yapısı sadece kod tekrarını önlemek için değil aynı zamanda uygulamanızı daha kolay okunabilir hale getirmek için önemlidir. Örneğin bir projede yüzlerce buton kullanıyorsanız ve bu butonun tasarımında bir değişiklik yapmak istiyorsanız, component tabanlı yapıda sadece tek bir dosyada değişiklik yaparak tüm butonları güncelleyebilirsiniz. Bu sayede çok daha temiz bir kod yazmış oluruz. Ayrıca bileşenlerde props kullanarak dinamik içerikler yaratabilir, state yönetimi ile kullanıcı etkileşimlerine göre bileşen davranışlarını değiştirebiliriz.

Bu yazıda React’ da ilk bileşeninizi nasıl yazabileceğinizi öğrendiniz. Bileşenler React’ ın temelini oluşturur.

Kaynakça

React Dokümantasyon