React JS Functional Component Kullanımı

React functional components modern react uygulamalarında kullanılan en yaygın component oluşturma metodu olup; bu componentler özünde sadece javascript fonksiyonudur ve return değeri olarak class-based componentler gibi JSX ifadeler döndürür. Eğer state ile işlem yapılacaksa; functional component kullanmak yerine class-based component kullanmak daha kolay olacaktır. Bu durum ile ilgili olarak useState gibi metodlar mevcuttur ama bu yazıda önce functional component mantığını oturtalım.

Küçük bir örnekle başlayalım. Header.js içerisinde Header adlı ilk functional component’imizi oluşturalım.

import React from 'react';

function Header() {
  const titleText = `Lorem ipsum dolor sit amet`;
  return(
    <h1>{titleText}</h1>
  )
}

export default Header;

Gördüğünüz gibi sıradan bir fonksiyon tanımladık ve içerisinde HTML ile JavaScript ifadeler kullanarak yazılan JSX syntax’ını döndük ve ilk functional component’imizi oluşturmuş olduk. Unutmayın ki yine return içerisindeki JSX ifadenin container yapı ile çevrelenmiş olması gerekiyor.

Eğer class-based component oluşturmaya aşinaysanız; render() metodunun olmadığını fark etmiş olmalısınız. react’ta functional component oluştururken dikkat etmeniz gereken şeylerden birisi de budur. render metoduna gerek kalmaksızın sadece return işlemi ile JSX ifade döndürülür.

Gelin şimdi de birlikte class-based ve functional olan iki component’e bu oluşturduğumuz functional component’i import ederek ve de aynı dosya içerisinde kullanalım. Ve kullanım şekillerine göz atalım.

// Header.js
// class-based component
// import react dependencies
import React from 'react';
// import components
import Header from './../../components/header/header';

class App extends React.Component {
  // render function
  render() {
    return(
      <div className="app-container">
        <Header></Header>
      </div>
    )
  }
};

export default App;

// Header.js
// functional component
// import react dependencies
import React from 'react';
// import components
import Header from './../../components/header/header';

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

export default App;

// Header.js
// functional component in functional component at same file without import component
// import react dependencies
import React from 'react';

function Header() {
  const titleText= `Lorem ipsum dolor sit amet`;
  return(
    <h1>{titleText}</h1>
  )
}

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

export default App;

Burada 1. örnekte App adında class-based component oluşturduk ve de klasik bir şekilde az evvel oluşturduğumuz functional component olan Header’ı import ederek; render metodunun içerisindeki return ifadesinin içerisinde şeklinde functional component’imizi kullandık. 2. örnekte ise App component’ini functional şekilde oluşturduk ve içerisinde yine Header component’ini return ifadesinin içerisinde kullandık. 3. örnekte ise App component’ini functional ve yine aynı şekilde header component’ini functional şekilde aynı dosya içerisinde oluşturup ek import gerektirmeksizin App içerisinde Header’ı kullandık.

React Functional Components: Props kullanımı

React içerisinde functional component oluşturmanın ve kullanımının bir çok şekline göz attık. Şimdi de bu functional components’te react’ın props’ları nasıl kullanılır buna biraz göz atalım. Eğer ki props’lar konusunda bilgi sahibi değilseniz buradan detaylarına bakabilirsiniz.

React Functional Components’ler parametre olarak 2 değer alırlar. Bunların ilki; props değerlerinin key-value şeklinde tutulduğu bir object’tir. Biz bu parametre üzerinden işlem yapacağız.

// App.js
// import react dependencies
import React from 'react';
// import components
import Header from './../../components/header/header';

function App() {
  return (
    <Header titleText="Title Here" subtitleText="Subtitle here"></Header>
  )
}

export default App;

// Header.js
// import react dependencies
import React from 'react';

function Header(props) {
  // destructuring
  const { titleText, subtitleText } = props;

  return(
    <div>
      <h1>{titleText}</h1>
      <h3>{subtitleText}</h3>
    </div>
  )
}

export default Header;

Burada görüldüğü üzere props olarak iletilen veriyi destructuring yaparak kullandık. Gayet de güzel oldu.

Arrow Function ile Functional Components kullanımı

// App.js
// import react dependencies
import React from 'react';
// import components
import Header from './../../components/header/header';

const App = () => {
  return (
    <Header titleText="Title Here" subtitleText="Subtitle here"></Header>
  )
}

export default App;

// Header.js
// import react dependencies
import React from 'react';

const Header = (props) =>  {
  // destructuring
  const { titleText, subtitleText } = props;

  return(
    <div>
      <h1>{titleText}</h1>
      <h3>{subtitleText}</h3>
    </div>
  )
}

export default Header;

React içerisinde functional component oluştururken arrow function kullanmak props’ların kullanımı açısından herhangi bir değişikliğe sebep olmaz. Gönül rahatlığı ile kullanabilirsiniz. Eski sürümdeki klasik fonksiyon oluşturma yöntemi yerine ben şahsi olarak bu yöntemi kullanmanızı öneririm el alışkanlığınızın oturması açısından.

Şu ana kadar kullanmış olduğumuz function-based component’ler stateless data içermekteydi. Yani react’ın yapıtaşı olan state kavramını kullanmadan props drilling yöntemi ile veri ilettiğimiz functional components kullanımlarını gördük. Şimdi sırada ise işin içine state’yi katmak var! Onu da bir başka yazımda sizlere anlatmaya çalışacağım.