5 min read

React ile function component tanımlama

Bu yazıdaki React ile function component'leri tanımlama ve kullanmanın inceliklerini inceliyoruz.

En basit function component

Function componentler en basit haliyle bir string döndürebilir. Bu değeri html içerisinde metin olarak gösterebilirsiniz.

//1. A function component can return a simple string
function Hello(){
	return "Hello";
}
const App = () => { 
   return (<div>
    <Hello /><br/>   
    </div>);  
}
ReactDOM.render(
  <App />,
  document.getElementById('container')
);
<div>Hello<br /></div>

Parametre verilmesi (props)

Function componente parametre verebilirsiniz. Props adlı nesne üzerinden bu parametreleri fonksiyon içerisinde kullanabilirsiniz.

//2. You can pass an object called props as parameter to a function component 
function HelloWithProps(props){
	return "Hello " + JSON.stringify(props);
}
const App = () => { 
   return (<div>     
    <HelloWithProps name="Jack" surname="Sparrow" /><br/>
    </div>);  
}
<div>Hello {"name":"Jack","surname":"Sparrow"}<br /></div>

Props'un kullanımı

Function componentin props'larına isimleri ile erişip component içerisinde kullanabilirsiniz.

//3. function component can access various parameters in props object
//by referring to their names 
function HelloWithNameSurname(props){
	return "Hello " + props.name + " " + props.surname;
}
const App = () => { 
   return (<div>   
    <HelloWithNameSurname name="Jack" surname="Sparrow" /><br/>
    </div>);  
}
<div>Hello Jack Sparrow<br /></div>

Syntax kolaylığı (alternatif)

Props kelimesini devamlı tekrar etmek zorunda kalmamak için props'ları isimleri ile belirtip o şekilde de erişebilirsiniz. Üstteki örnekle bir farkı yok.

//4. it can be an easier syntax to specify parameter names where they are passed
//So as not to repeat "props" again and again
function ShorterHello({name,surname}){
	return "Hello " + name + " " + surname;
}
const App = () => { 
   return (<div>     
    <ShorterHello name="Jack" surname="Sparrow" /><br/>
    </div>);  
}
<div>Hello Jack Sparrow<br /></div>

Props ile array verilmesi

Function componentlere parametre olarak array da verebilirsiniz.

//5. Parameters can be arrays too
function HelloPeople(props){ 
	return "Hello to " + props.people;
}
const App = () => { 
   const names = ["Alice","Bob","Claire"];
   return (<div>     
    <HelloPeople people={names} /><br/>
    </div>);  
}
<div>Hello to Alice,Bob,Claire<br /></div>

Syntax kolaylığı (alternatif)

Yine props kelimesi yerine ismi ile parametre tanımlayarak daha kolay yazılabilir. Üstteki örnekle tamamen aynı.

//6. Simpler syntax to pass parameters so you dont have to repeat "props"
function ShorterHelloPeople({people}){ 
	return "Hello to " + people;
}
const App = () => { 
   return (<div>   
    <ShorterHelloPeople people={names} />
    </div>);  
}
<div>Hello to Alice,Bob,Claire<br /></div>

Bir jsx elementi döndürülmesi

Bir function component ile bir jsx elementi döndürdüğünüzde içeriği ve stili dilediğiniz gibi ayarlayabileceğiniz ve props'ları her değiştiğinde yeniden oluşturulan bir yapı taşı, bir nevi blok elde etmiş olursunuz. Bu bloklar da birleşerek bir component tree oluşturur.

//7. Function comp can return a jsx element too
function HelloWithStyle({people}){
	return (<p> Hello to <span>{people.length}</span> people</p>);
}

const App = () => { 
   const names = ["Alice","Bob","Claire"];
   return (<div>   
          <HelloWithStyle people={names} />
    </div>);  
}
<p>Hello to <span>3</span> people</p>

Bir jsx elementinin tekrarlanması

map() fonksiyonunu kullanarak bir function component'in bir array'deki her eleman için aynı component'in yeniden oluşturulmasını sağlayabiliriz.

Örneğin bir kişi listesindeki her isim için ayrı bir <span> elementi oluşturulabilir. Bunların herhangi birinin props'u değiştiği taktirde yeniden render edilir. Bunların aralarında bir ayrım yapılabilmesi için key parametresi ile unique bir değer vermemiz gerekir.

//8. Function comp can repeat jsx elements by using map()
//dont forget to specify a unique key!
//map() throws an error if used on null. 
//So use && to avoid rendering on a null object
function HelloWithRepeat({people}){
	return <p>Hello to {people && people.map(p=><span key={p}>{p} </span>)}</p>;
}

const App = () => { 
   const names = ["Alice","Bob","Claire"];
   return (<div>   
         <HelloWithRepeat people={names} />
    </div>);  
}
<p>Hello to 
    <span>Alice </span>
    <span>Bob </span>
    <span>Claire </span>
</p>

Diğer componentlerin yinelenmesi

Bir componenti tekrar tekrar farklı props'lar vererek yazdırabiliriz.

Örneğin her bir kişi nesnesi için özel olarak hazırladığımız Person componentini yazdırabiliriz.

//9. Function comp can repeat other jsx elements returned from other function comps.
function HelloWithRepeatedFunctions({people}){
	return(
  <div>
    <p>Hello to the following people: </p>
    <ol>
      {people && people.map(p=><PersonName key={p} name={p}/>)}
    </ol>    
  </div>);
}
function PersonName({name}){
	return(<li>{name} </li>);
}

const App = () => { 
   const names = ["Alice","Bob","Claire"];
   return (<div>   
        <HelloWithRepeatedFunctions people={names} />
    </div>);  
}
<div>
    <p>Hello to the following people: </p>
    <ol>
        <li>Alice </li>
        <li>Bob </li>
        <li>Claire </li>
    </ol>
</div>

Props ile array verilmesi

Bir componente props ile verilen array'in içeriğini tablo formatında satırlar halinde yazdırabiliriz.

//10.You can pass object arrays too
function HelloToComplexArray({people}){
return<div><p>Hello to all: </p>
<table>
<thead style={{backgroundColor:"lime"}}>
  <tr><td>Name</td><td>Surname</td></tr>
</thead>
<tbody>
  {people && people.map(p=><PersonRow key={p.id} person={p} />)}
</tbody>  
</table>
</div>
}

function PersonRow({person}){
	return(<tr><td>{person.name}</td><td>{person.surname}</td></tr>);
}

const App = () => { 
    const pirates = [
  {id:0,name:"Jack",surname:"Sparrow"},
  {id:1,name:"Davy",surname:"Jones"},
  {id:2,name:"Captain",surname:"Barbossa"}
  ];
   return (<div>   
      <HelloToComplexArray people={pirates} />
    </div>);  
}
<div>
    <p>Hello to all: </p>
    <table>
        <thead style="background-color: lime;">
            <tr><td>Name</td><td>Surname</td></tr>
        </thead>
        <tbody>
            <tr><td>Jack</td><td>Sparrow</td></tr>
            <tr><td>Davy</td><td>Jones</td></tr>
            <tr><td>Captain</td><td>Barbossa</td></tr>
        </tbody>
    </table>
</div>

Tablonun görünümü şu şekilde olacaktır:

NameSurname
JackSparrow
DavyJones
CaptainBarbossa

Lambda/arrow function tanımı

Function componentler lambda/arrow function  syntax ile de tanımlanabilir. Aşağıdaki componentler arasında bir fark yoktur. Sadece lambda syntax ile daha kısa şekillerde yazılabilmiştir.

//11. You can define function comps as lambda(arrow) functions as well.
//all three comps below are the same except syntax.
function NameComp({person}){ 
  return (<p> Hello {person.name} :)</p>); 
}
const NameComp1 = ({person}) =>{ 
  return (<p> Hello {person.name} :)</p>); 
}
const NameComp2 = ({person}) => <p> Hello {person.name} :)</p>;
const App = () => { 
   return (<div>   
     <NameComp person={ {id:0,name:"Jack",surname:"Sparrow"}} />
     <NameComp1 person={ {id:0,name:"Jack",surname:"Sparrow"}} />
     <NameComp2 person={ {id:0,name:"Jack",surname:"Sparrow"}} />
    </div>);  
}
<div>
    <p> Hello Jack :)</p>
    <p> Hello Jack :)</p>
    <p> Hello Jack :)</p>
</div>