React component'leri, state adı verilen özellikleri içerebilir State, bir component'in React tarafından yönetilen iç durumunu ifade eder İç durum, component'in render edildiği içeriğin ve davranışın nasıl olacağını belirler

React, modern web uygulamaları için çok popüler bir JavaScript kütüphanesidir. Component'ler, React'ta en önemli yapı taşlarından biridir. Bu makalede size, React uygulamalarında component'leri nasıl oluşturabileceğinizi adım adım göstereceğiz.

Bu makale, component'lerin ne olduğunu, ne işe yaradığını ve nasıl çalıştığını açıklayarak başlıyor. Component oluşturma adımları ayrıntılı olarak anlatılıyor. Ayrıca, functional ve class component'lerin oluşturulması ve kullanılması hakkında bilgiler veriliyor. Component lifecycle adımları, component'in oluşturulduğu, güncellendiği ve yok edildiği adımlar açıklanıyor.

React uygulamaları yazarken, component'ler oluşturmak çok önemlidir. Bu makale, React component'lerinin oluşturulması hakkında bilgi edinmek isteyen herkese yardımcı olacaktır.

Component Nedir?

React uygulamalarında kullanılan component'ler, web uygulamalarında kullanılan yapı taşlarıdır. Bu yapı taşları, kodların yeniden kullanılabilir ve daha modüler hale getirilmesini sağlar. Component'ler, kendi içinde birbirine bağlı olan HTML, CSS ve JavaScript kodlarından oluşan bir yapıdır.

React component'leri, özellikle büyük ölçekli uygulamalarda kodların daha kolay yönetilmesini sağlar. Ayrıca, component'ler arasında veri paylaşımı (props) ve component durumu (state) gibi konular kolaylıkla çözülebilir. Bu sayede, web uygulamasının performansı ve yönetilebilirliği artar.

Component Oluşturma

React uygulamaları, her biri kendi işlevini yerine getiren birçok component'ten oluşur. Bu nedenle, React uygulamalarında component'lere ihtiyaç duyulur. Aşağıda, React component'lerinin oluşturulması hakkında temel adımlar ayrıntılı olarak açıklanmaktadır.

1. Bir Component Oluşturun

React'ta bir component oluşturmak için, öncelikle bir JavaScript dosyası oluşturun. Bu dosyanın adı, oluşturduğunuz component'in adıyla aynı olmalıdır. Ardından, aşağıdaki kodu dosyanın içine yazın:

import React from 'react';
function MyComponent() {  return (    
          
  );}
export default MyComponent;

Yukarıdaki kod parçasında, "MyComponent" adında bir component oluşturulmuştur. Bu component, bir fonksiyon olarak tanımlanmış ve "return" ifadesi ile bir JSX (JavaScript XML) döndürmüştür. JSX, HTML gibi görünen bir syntax'tır ve React'in component'lerini oluşturmada kullanılır.

2. Component'i Kullanın

Bir component'i kullanmak için, öncelikle nerede kullanacağınızı belirlemelisiniz. Daha sonra, aşağıdaki kodu kullanarak component'i çağırın:

import React from 'react';import MyComponent from './MyComponent';
function App() {  return (    
                
  );}
export default App;

Yukarıdaki kod parçasında, "MyComponent" adındaki component, "App" component'inin içinde kullanılmıştır. Component'i kullanmak için, JSX syntax'ında "" kodunu kullanarak çağırmak yeterlidir.

Bu şekilde, basit bir React component'i oluşturabilir ve kullanabilirsiniz. Tabii ki, component'lerin daha karmaşık yapıları da vardır, ancak bu basit örnek, nasıl bir component oluşturulduğunu açıklamak için yeterlidir.

Functional Component

Functional component'ler, React uygulamalarında en sık kullanılan component türlerinden biridir. Functional component'lerin en büyük avantajı, state kullanmak yerine props verilerini kullanarak render fonksiyonunu döndürmesidir. Bu, daha basit bir kod yazmanızı ve component'leri daha hızlı ve verimli bir şekilde oluşturmanızı sağlar.

Bir functional component oluşturmak için, bir fonksiyon tanımlamanız yeterlidir. Bu fonksiyon, props objesiyle birlikte çağrılacak ve component'in HTML içeriğini döndürecektir.

function FunctionalComponent(props) {  return <div>Merhaba, {props.name}!</div>;}

Bu örnekte, props parametresi ile fonksiyona veriler aktarılabilir. Fonksiyon, div etiketi içinde bir metin döndürmektedir. Bu örnekte, {props.name} ifadesi, props içinde name adlı bir özelliği olan component'in çağrıldığı yerdeki değeri yansıtmaktadır.

Ayrıca, fonksiyonun adının büyük harfle başlaması gelenekseldir. Bu, component'in diğer HTML etiketlerinden farkını vurgular.

Props Nedir?

Props, React component'lerine dışarıdan veri aktarmak için kullanılan bir mekanizmadır. Bu sayede, bir component'in farklı verilerle kullanılabilmesi mümkün olmaktadır. Props, component'e veri olarak gönderilebilen her türlü JavaScript nesnesi olabilir.

Bir component'e props vermek için props isimli bir parametrenin tanımlanması yeterlidir. Bu parametre, component fonksiyonunun ilk parametresi olarak belirtilir. Props'lar, component içinde değiştirilemez ve salt okunur özelliklere sahiptir.

Props örneği:

Yukarıdaki örneklerde Kullanıcı ve Ürün component'leri için props verileri gösterilmektedir. Bu props verileri, component içinde görüntülenen bilgileri belirlemekte ve dışarıdan gelen verilerle component'in özelleştirilebilmesini sağlamaktadır.

State Nedir?

State, bir component'in içinde bulunduğu durumu saklamak için kullanılan bir mekanizmadır. Bir component'in gösterdiği verilerin veya kullanıcının yaptığı eylemlerin durumunu tutmak için kullanılır. State, component'in içinde tutulduğu için component'in yeniden render edilmesine neden olacak herhangi bir değişiklik, state'in güncellenmesiyle gerçekleştirilir.

Bir component'in state'ine, constructor içinde this.state = { //state objesi} şeklinde başlatılabilen bir obje tarafından erişilir. State'in güncellenmesi, this.setState() metodu kullanılarak gerçekleştirilir ve state'in güncel hali this.state ile alınabilir.

• Kullanıcı etkileşimlerinin takibi
• Gösterilen verilerin yönetimi
• Form verilerinin yönetimi

Örneğin, bir sayfa içinde listelenen öğelere "Beğen" butonu eklemek istediğimizi varsayalım. Bu beğeni butonuna tıklanıldığında, öğenin sayılarla ifade edilen beğeni sayısı artacak. Bu durumda, beğeni sayısını tutan değer state olarak tanımlanabilir. Beğeni butonuna tıklandığında, beğeni sayısı güncellenir ve state'in değeri değiştiği için component yeniden render edilir.

Class Component

React uygulamalarında Class component'ler, functional component'lerin yanı sıra kullanılan bir başka component türüdür. Class component'leri, birden fazla method ve state kullanarak daha karmaşık yapılar için kullanmak daha uygun olabilir.

Bir class component oluşturmak için, React.Component sınıfından extends edilir ve render methodu içerisinde component'in görüntüsü tanımlanır. Bu şekilde, bir component'in bir state'ine veya veriye ihtiyaç duyduğunda, Class component'leri kullanarak doğrudan state'e erişebilirsiniz. Ayrıca, Class component'lerinde daha fazla yaşam döngüsü methodu mevcuttur.

Bir Class component'in bir functional component'den farkı, daha fazla özellik ve fonksiyonel özellik sağlamasıdır. Class component'ler, daha geniş uygulamalarda ve daha karmaşık durumlarda kullanılmalıdır. Ayrıca Class component'lerde state, lifecycle methodları gibi özellikleri kullanarak daha kontrol edilebilir ve düzenlenebilir component'ler oluşturabilirsiniz.

Component Lifecycle

React component'lerin yaşam döngüsü, component'in oluşumundan yok oluşuna kadar geçen süreçtir. Bu süreçte component'e ait bazı fonksiyonlar çağrılır ve belirli adımlar gerçekleştirilir. Bu fonksiyonlar component'in oluşturulması, güncellenmesi ve yok edilmesi sırasında çağrılır.

Component yaşam döngüsü adımları 3 aşamada toplanabilir:

1. Mounting: Component'in oluşturulduğu aşama.
2. Updating: Component'in güncellendiği aşama.
3. Unmounting: Component'in yok edildiği aşama.

Component yaşam döngüsü adımlarını ve bu adımların kullanımını ayrı ayrı ele alalım.

Mounting

Component oluşturulması süreci, mounting (yükleme) adımları ile başlar. Yani, bir component'in oluşturulması, mounting adımları ile gerçekleştirilir. Mounting adımları şu şekilde gerçekleştirilir:

• constructor(): Class component'ler için en öncelikli mounting adımı constructor fonksiyonunun çağrılmasıdır. Bu adımda, component'in ilk state ve props değerleri atanır.
• getDerivedStateFromProps(): Bu adımda, state değerleri props değerlerine göre güncellenir.
• render(): Component'in HTML yapısı, bu adımda oluşturulur ve ekranda gösterilir.
• componentDidMount(): Component oluşturulması tamamlandıktan sonra, bu adım çağrılır. Bu adımda, component'in birinci dereceden çocuk component'leri de dahil olmak üzere, tüm component ağacı oluşturulur.

Mounting adımları sırasında component'in oluşturulması ve ayrıca ilk render işlemi gerçekleştirilir. Bu adımların tamamlanmasıyla birlikte, component artık ekranda görüntülenir ve kullanıcı etkileşime hazırdır. Mounting adımları, bir component'in ömrü boyunca sadece bir kez gerçekleştirilir ve component'in güncellenmesi sırasında da kullanılmaz.

Constructor

Constructor, React'ta bir class component'in ilk oluşturulduğu aşamada çağrılan bir fonksiyondur. Bu fonksiyon, component'in state'ini ve props'larını başlatmak için kullanılır. Constructor, her class component'inde bir kere çağrılır ve component'in oluşturulması sırasında otomatik olarak çağrılır.

Constructor içerisinde, super() fonksiyonu çağrılır. Bu, class component'in parent class'ının constructor'ını çağırır ve component'e özellikler eklememize izin verir. Ardından, this.state ve this.props objeleri oluşturulur. State, component'in durumunu saklamak için kullanılır ve props, component'e dışarıdan veri aktarmak için kullanılır.

class MyComponent extends React.Component {  constructor(props) {    super(props);    this.state = { count: 0 };  }  render() {    return (      <div>        <h1>Count: {this.state.count}</h1>      </div>    );  }}      

Yukarıdaki örnekte, MyComponent adında bir class component oluşturuldu. Constructor içerisinde, super(props) fonksiyonu çağrıldı ve this.state objesi tanımlandı. State objesi içerisinde, count adında bir özellik tanımlandı ve başlangıç değeri olarak 0 verildi. Render metodunda, state objesindeki count özelliği ekrana yazdırıldı.

Constructor kullanımı, class component'ler arasında farklılık yaratır ve component'in oluşturulması sırasında bazı özelliklerin atandığından emin olur. Bu nedenle, constructor kullanımı React uygulamalarında oldukça önemlidir.

Updating

Updating, component'in güncellendiği aşamadır. Bu aşamada, component'in state'i veya props'ları değiştirilir ve yeniden render edilmesi gerekir. Component'in güncellenmesi sırasında, öncelikle render() fonksiyonu çağrılır ve component'in yeni hali oluşturulur. Bu aşamada, component'in state ve props'ları değiştirilebilir.

Bir component'in güncellenmesi, shouldComponentUpdate() fonksiyonu tarafından kontrol edilir. Varsayılan olarak, bu fonksiyon her zaman true değeri döndürür, yani component her zaman güncellenir. Ancak, bu fonksiyonu override ederek, component'in yeniden render edilip edilmeyeceğine kendiniz karar verebilirsiniz. Örneğin, bir component'in props'ları değiştiğinde, ancak state'i değişmediğinde komponentin yeniden render edilmesini engellemek isteyebilirsiniz. Bu durumda, shouldComponentUpdate fonksiyonunu şu şekilde kullanabilirsiniz:

shouldComponentUpdate(nextProps, nextState) {  if (this.props.something === nextProps.something && this.state.somethingElse === nextState.somethingElse) {    return false;  }  return true;}

Component'in güncellenmesi tamamlandığında, componentDidUpdate() fonksiyonu çağırılır. Bu fonksiyon, render işleminden sonra component'in güncellenmiş haline erişmenizi sağlar. Bu aşamada, component'in state'i veya props'ları değiştirilmiş haliyle kullanılabilir. Genellikle, bu aşamada, sayfaya etki eden animasyon, yüklenme çubuğu gibi gereksinimler için kullanılır.

Updating aşamasında kullanılan fonksiyonların genel yapısı şu şekildedir:

• shouldComponentUpdate(): Component'in yeniden render edilip edilmeyeceği kararını verir.
• render(): Component'in yeni hali oluşturulur.
• componentDidUpdate(): Component'in güncellenmiş haline erişim sağlar.

Updating aşaması, React component'lerin yaşam döngüsünde önemli bir yere sahiptir ve component'in dinamik olarak güncellenmesini sağlar. Bu nedenle, component'in davranışını ve görüntüsünü değiştirmek istediğinizde, updating aşamasını kullanabilirsiniz.

ShouldComponentUpdate

ShouldComponentUpdate, React component'lerinde İstemci tarafından gönderilen verilerin dinamik olarak değiştiği durumlarda kullanılır. Bu fonksiyon, bir component'in yeniden render edilip edilmeyeceğine karar veren bir mekanizmadır. React DOM, component'in mevcut state ve props'ını mevcut state ve props'ıyla karşılaştırarak, eğer değişiklik yapılması gerekiyorsa component'i yeniden render eder. Ancak bu fonksiyon ile bu işlemi daha efektif hale getirebilirsiniz.

ShouldComponentUpdate, bir boolean değeri olan true veya false döndürür. true döndürürse component yeniden render edilir, false döndürürse render edilmez. Bu yöntemin amacı, bir component'in yeniden render edilmesini önleyerek uygulamanın performansını artırmaktır.

Bu fonksiyonu kullanırken dikkat etmeniz gereken noktalar bulunmaktadır; eğer uygulamanızdaki component'in props'ları değişmemişse ve state'i değiştiyse, ShouldComponentUpdate fonksiyonu false değer döndürmelidir. Bu durumda component'in yeniden render edilmesine gerek yoktur, sadece state güncellenecektir. Ancak props değiştiyse ve state değişmediyse, ShouldComponentUpdate fonksiyonu true değer döndürerek component'in yeniden render edilmesini sağlamalıdır.

Unmounting

Unmounting, bir component'in silindiği yani uygulamadan kaldırıldığı aşamadır. Component'in silinmesi, genellikle kullanıcının uygulamadan çıkması veya bir sayfadan diğerine geçmesi gibi durumlarda gerçekleşir. Bu aşamada, component'in önceden kullanılmış kaynakları serbest bırakılır ve hafıza kullanımı azaltılır.

Component'in silinme aşamasında, componentWillUnmount() fonksiyonu çağrılır. Bu fonksiyon, component'in silinmeden önce son verilerinin temizlenmesi, kaynakların serbest bırakılması, aboneliklerin iptali gibi işlemlerin yapılmasını sağlar. Bu sayede, uygulama daha stabil ve hızlı hale getirilir.

Component'in silinme aşaması, React uygulamalarında önemli bir adımdır. Bu adımın doğru bir şekilde yönetilmesi, uygulamanın güvenli ve stabil bir şekilde çalışmasını sağlar. Component'in silinmesi ile ilgili işlemleri doğru bir şekilde gerçekleştirmek için componentWillUnmount() fonksiyonunun kullanımı önemlidir.