React uygulamalarında daha düzenli, modüler ve performanslı bir yapı oluşturmak için ileri seviye component yapıları kullanılır Konteyner component'ler, render props yöntemi, HOC, React Context API ve React Hooks gibi yapılar, uygulama yapısını daha etkili bir şekilde oluşturmak için kullanılır Konteyner component'ler birden fazla alt component'i kapsayarak state yönetimini sağlar Render props yöntemi, component'ler arasında state geçişini sağlar HOC ise, farklı işlemler yaparak yeni component'ler oluşturur ve paylaşım yapmayı kolaylaştırır React Context API, global state yönetimi sağlar Hooks kullanarak, state ve lifecycle yönetimi daha kolay hale gelir Uygulamaların daha düzenli hale gelmesi için ileri seviye component yapıları kullanılması önerilir
React, günümüzün en popüler JavaScript kütüphanelerinden biridir. Component yapısı, React uygulamaları oluşturmak için büyük bir kolaylık sağlar. Ancak, belirli bir noktadan sonra, uygulamalar karmaşık hale gelmeye başlar ve component yapısı yönetilemez hale gelebilir.
Bu noktada, ileri seviye component yapıları devreye girer ve React uygulamalarını daha kolay, düzenli ve performanslı hale getirir. Bu yapılar, React uygulamalarının geliştirilmesinde büyük bir avantaj sağlar. Konteyner component'ler, render props yöntemi, HOC, React Context API ve React Hooks gibi ileri seviye component yapıları React uygulamasının daha etkili bir şekilde oluşturulmasına yardımcı olur.
Konteyner component'ler, birden fazla alt component'i kapsayan ve state yönetimini sağlayan component'lerdir. Bu sayede, uygulamanın daha düzenli hale gelmesi mümkün olur. Render props yöntemi, bir component'ten diğerine state geçişini sağlar. Böylece, component yapısı daha modüler bir hale gelir ve tekrar kullanılabilirliği artar.
HOC, bir component'i alıp üzerinde farklı işlemler yaparak yeni bir component oluşturmaya yarar. Bu sayede, component yapısı daha dinamik hale gelir ve component'ler arasında daha rahat bir şekilde paylaşım yapılabilir. React Context API ise bir component hiyerarşisinin birden fazla component'i için global state yönetimi sağlar. Bu sayede, uygulamadaki veriler daha kolay paylaşabilir.
React Hooks ise state ve lifecycle yönetimini daha kolay bir hale getirir. useState Hook, state yönetimini daha kolay bir hale getirirken, useEffect Hook, component'in lifecycle'ını yönetir ve state değişikliği gerçekleştirmemizi sağlar. useContext Hook ise, React Context API'yi kullanarak global state yönetimini daha kolay bir hale getirir. Bu sayede, verileri daha kolay bir şekilde paylaşabilir ve uygulamamızın performansını artırabiliriz.
Konteyner Component'ler Oluşturmak
Konteyner component'ler, bir veya daha fazla alt component'i kapsayan ve state yönetimini sağlayan component'lerdir. Bu yapı, uygulamanın daha düzenli ve modüler hale gelmesine yardımcı olur.
Bir örnek vermek gerekirse, bir blog uygulamasında ana sayfada son 5 makalenin listelenmesini istediğimizi düşünelim. Bu liste, makale başlığı ve kısa bir özet içerebilir. Bu durumda, bir Konteyner component oluşturarak son 5 makale component'ini, bir ana component içinde toplayabiliriz.
| Son 5 Makale Component'i | Ana Component |
|---|---|
| Makale Başlığı | Konteyner Component |
| Makale Özeti | Konteyner Component |
Bu şekilde, ana component'te sadece bir Konteyner component kullanarak son 5 makale listesi oluşturabiliriz. Bu sayede, kod yapılarımız daha temiz ve modüler hale gelir.
Render Props Yöntemi
Render props yöntemi, react uygulamalarında component'ler arasında state geçişini sağlamak için kullanılır. Bu yöntem sayesinde, bir component'in state'i başka bir component'e aktarılır ve böylece component yapısı daha modüler bir hale gelir.
Render props yöntemi, bir component'in içinde bir fonksiyon parametresi alarak çalışır. Bu fonksiyon, component'in state'ini bir obje olarak döndürür ve bu obje, başka bir component tarafından çağrılabilir. Böylece, bir component'ten diğerine state geçişi sağlanır.
Bu yöntem sayesinde, component yapımız daha düzenli hale gelir ve tekrar kullanılabilirliği artar. Özellikle, birden fazla component tarafından kullanılabilen state'leri yönetmek için render props yöntemi oldukça etkilidir. Bu sayede, state yönetimi daha kolay hale gelir ve component yapısı daha modüler bir hale gelir.
Bir örnek olarak, bir uygulamada bir dropdown component'i olsun ve bu dropdown'un seçilen elemanın değerini başka bir component'e aktarmamız gerekiyor olsun. Render props yöntemi kullanarak, dropdown component'inde seçilen elemanın değerini bir fonksiyon olarak döndürerek, başka bir component tarafından bu fonksiyon çağırılabilir ve seçilen elemanın değeri alınabilir.
HOC (Higher-Order Component)
HOC, Higher-Order Component anlamına gelir ve bir component üstünde farklı işlemler yaparak yeni bir component oluşturmamızı sağlar. Bu sayede component yapısı daha dinamik hale gelir ve component'ler arasında daha rahat bir şekilde paylaşım yapılabilir. HOC, kompozisyon yapısıyla çalışır ve başka component'leri içeren bir component yaratır. Örneğin, bir Authentication HOC uygulaması oluşturabiliriz. Bu uygulama ile uygulamamızda kullanıcı giriş işlemlerini gerçekleştirebiliriz. Bu sayede, component'lerimiz tekrar kullanılabilir hale gelir ve uygulama daha düzenli hale gelir. Ayrıca, Window Size HOC kullanarak, ekran boyutuna göre uygulamamızın boyutunu dinamik olarak değiştirebiliriz.
HOC Örneği: Authentication
Bir React uygulamasında authentication işlemleri gerektiğinde, her component'te ayrı ayrı kontrol yapmak yerine, tek bir HOC kullanarak tüm işlemleri gerçekleştirmek daha rahat ve etkili olacaktır.
HOC, kullanıcının giriş yaptığı zamanlarda gerekli kontrolleri yapar ve yetkisiz erişimler engellenir. HOC kullanarak, kullanıcının login işlemi tamamlandıktan sonra sadece yetkili alanlara erişmesi sağlanır.
Ayrıca, HOC'lar sayesinde uygulamamızdaki tüm component'ler arasında daha kolay bir şekilde paylaşım yapabiliriz. Bu şekilde, uygulama yapısını daha düzenli bir hale getirebiliriz. Özetle, HOC kullanarak uygulamamızda authentication işlemleri için daha modüler ve düzenli bir yapı oluşturabiliriz.
HOC Örneği: Window Size
Uygulamalarımızın kullanıcı dostu olması, kullanıcının ekran boyutlarına uygun olması kadar önemlidir. HOC kullanarak, kullanıcının ekran boyutu değiştikçe uygulamamızın da boyutunu dinamik bir şekilde değiştirebiliriz.
Bunun için öncelikle, kullanıcının ekran boyutunu ölçmek için bir window dimension hook'u oluşturmalıyız. Ardından, bu ölçümleri kullanarak yeni bir component oluşturabiliriz.
İşte örnek bir kod parçası:
| import | React | {useState, useEffect} |
|---|---|---|
| function | WindowResizeListener(props) {'{'} | |
| const [windowSize, setWindowSize] = useState({'{'}}); | ||
| function handleResize() {'{'} | ||
| setWindowSize({'{'} | ||
| width: window.innerWidth, | ||
| height: window.innerHeight, | ||
| {'}'}); | ||
| {'}'} | ||
| useEffect(() => {'{'} | ||
| window.addEventListener('resize', handleResize); | ||
| return () => window.removeEventListener('resize', handleResize); | ||
| {'}'}, []); | ||
| return props.children(windowSize); | ||
| {'}'} |
Bu kod parçasında, WindowResizeListener component'i uygulamanın window boyutunu dinamik bir şekilde değiştirmesini sağlar. Bu component'i başka component'ler içinde kullanarak, uygulamanın boyutunu dinamik bir şekilde değiştirebiliriz.
Kodun çalıştığına emin olduktan sonra, uygulamamızın boyutunu dinamik olarak değiştirebilir ve kullanıcı dostu bir uygulama geliştirebiliriz. HOC yöntemi, uygulamanın güçlü ve dinamik bir yapıya kavuşmasını sağlar.
React Context API
React Context API, React uygulamalarında component hiyerarşisindeki birden fazla component için global state yönetimini sağlar. Bu, verileri paylaşmanın ve state yönetimini daha iyi ve kontrol edilebilir hale getirmenin daha kolay bir yoludur.
Context API, bir provider ve bir veya birden fazla consumer'dan oluşur. Provider, hiyerarşinin üst seviyesinde yer alır ve tüm alt component'lere state sağlar. Consumer'lar, bu state'i kullanmak isteyen alt component'lerdir.
Context API, özellikle büyük uygulamalar için önemlidir. Çünkü, her component'in state'ini tek tek yönetmek yerine, global bir state oluşturarak component'ler arasında daha kolay paylaşım yapabiliriz. Bu da kod tekrarını önler ve uygulamanın performansını artırır.
Bir diğer avantajı da, state'leri props olarak taşımaktan daha kolay bir yöntem sunmasıdır. Context API sayesinde, component'ler arasında state transferi daha kolay hale gelir ve kod karmaşıklığı azalır.
Özetle, React Context API, büyük uygulamalarda state yönetimini daha iyi bir hale getirir ve component'ler arasında daha kolay bir paylaşım yapmamızı sağlar. Bu sayede, uygulamanın performansı artırılır ve kod tekrarının önüne geçilir.
React Hooks
React Hooks, state ve lifecycle yönetimini daha kolay hale getiren bir yapıdır. Bu sayede, uygulamalarımız hem daha performanslı hale gelir hem de kod karmaşıklığı azalır. Bu yapının kullanımı ile useState(), useEffect() ve useContext() hook'ları gibi fonksiyonlardan yararlanarak component'leri daha fonksiyonel hale getirebilir ve daha az tekrar eden kod yazabilirsiniz.
useState Hook, component içinde state kullanımını kolay hale getirir. Bu Hook, state'i bir değişken ve bir state güncelleştirme fonksiyonu oluşturarak yönetmenizi sağlar. Bu sayede, state'i daha temiz bir şekilde yönetebilirsiniz. useEffect Hook, component'in monte edilmesi, güncellenmesi ve demonte edilmesi sırasında çalışan fonksiyonları yönetir. Bu sayede, component içindeki işlem sırasını daha iyi bir şekilde yönetebilirsiniz. useContext Hook ise, global state yönetimi yapmak adına React Context API kullanımını kolaylaştırır.
React Hooks kullanımı, component'leri daha küçük parçalara ayırarak tüm component'lerin component ağacında daha belirgin olmasını sağlar. Böylece, component'ler arası iletişimi daha da artırır. Hooks yapısı ayrıca, class yapısı ile yapılan state yönetimine de bir alternatif sunar ve kod kalitesini arttırır.
- useState Hook: Component içinde state yönetimini kolaylaştıran bir hook'tur.
- useEffect Hook: Component'in monte edilmesi, güncellenmesi ve demonte edilmesi işlemlerini yöneten bir hook'tur.
- useContext Hook: React Context API kullanımını kolaylaştıran bir hook'tur.
React Hooks kullanımı sayesinde, uygulamalarda performans artışı sağlanır ve kod karmaşıklığı azaltılır. Bu nedenle, React uygulamalarında Hooks kullanımı oldukça yaygındır. Yeni başlayanlar için belirli bir öğrenme eğrisi olsa da, Hooks'un kullanımı kolaydır ve React yazılımınızı daha hızlı ve verimli hale getirebilir.
useState Hook
useState Hook, React'ta state yönetimini daha kolay bir hale getirir. Bu yöntem sayesinde, component yapımız daha modüler hale gelir ve react uygulamaları daha hızlı bir şekilde geliştirilebilir. useState Hook, bir component içindeki state'i tanımlamak ve güncellemek için kullanılır. Bu sayede, component'in durumunu yönetmek ve component'i daha dinamik hale getirmek daha kolay hale gelir.
useState Hook temel olarak iki parametre alır: state'in varsayılan değeri ve state'i güncellemek için kullanılacak fonksiyon. Aşağıdaki örnekte, "count" adında bir state tanımlanıyor ve her tıklamada arttırılacak.
| Kod | Açıklama |
|---|---|
import React, { useState } from 'react'; | React ve useState Hook'unun import edilmesi |
function Counter() { | Counter component'inin tanımlanması |
const [count, setCount] = useState(0); | "count" adında bir state tanımlanıyor ve varsayılan değeri 0 olarak ayarlanıyor. |
return ( | Component'in return edilmesi |
<div> | Div elementinin açılması |
<h1>{count}</h1> | count state'inin h1 elementinde kullanımı |
<button onClick={() => setCount(count + 1)}> | Button elementinin açılması ve onClick fonksiyonunun tanımlanması |
Click Me! | Button elementinin içeriği |
</button> | Button elementinin kapatılması |
</div> | Div elementinin kapatılması |
) | Component'in return edilmesinin kapatılması |
} | Component'in kapatılması |
Yukarıdaki örnek, useState Hook'unun kullanımını basitçe göstermektedir. Buna benzer şekilde, component'imizde farklı state'ler tanımlayabilir ve useState Hook'unu kullanarak bu state'leri güncelleyebiliriz. Bu yöntem, component yapımızı daha anlaşılır ve düzenli hale getirerek, daha hızlı bir şekilde react uygulamaları geliştirmemize olanak sağlar.
useEffect Hook
React uygulamalarında, component'lerin lifecycle'ı, yani component'in oluşumu, güncellenmesi ve sonlandırılması gibi işlemler önemlidir. useEffect Hook, bu işlemleri yönetir ve component'e bağlı olarak state değişikliğini gerçekleştirir.
useEffect Hook, component'in componentDidMount, componentDidUpdate ve componentWillUnmount yöntemlerinin yerine kullanılabilir. Component mount edildiğinde ya da state değiştiğinde, useEffect çalışır ve içinde bulunan işlemleri gerçekleştirir. Böylece, uygulamamızda state değişiklikleri daha kolay bir şekilde yönetilebilir.
useEffect Hook'un kullanımı oldukça basittir. İlk parametresi, yapılacak işlemi içeren bir fonksiyondur. İkinci parametresi ise, useEffect Hook'un çalışmasını tetikleyen değişkenlerin yer aldığı bir diziye sahiptir. Eğer bu dizi boş bırakılırsa, useEffect her zaman çalışır. Eğer içindeki değişkenler değişirse, useEffect yeniden çalışır ve işlemleri tekrar yapar.
Örneğin, aşağıdaki kodda, useEffect Hook'un içerisindeki fonksiyon, username state'inin değerinde bir değişiklik olduğunda çalışır ve kullanıcının ismini sayfaya yazdırır:
import React, { useState, useEffect } from 'react';function UserProfile() { const [username, setUsername] = useState(''); useEffect(() => { document.title = `Welcome, ${username}!`; }, [username]); return ( <div> <input value={username} onChange={(e) => setUsername(e.target.value)} /> <h1>Welcome, {username}!</h1> </div> );}export default UserProfile;Yukarıdaki örnekte, username state'inde değişiklik olduğunda useEffect Hook içindeki fonksiyon çalışır ve document.title'a kullanıcının ismini yazar. Bu sayede, kullanıcı ismi state'inde herhangi bir değişiklik olduğunda sayfanın başlığı da değişir.
useEffect Hook, component'in state değişikliklerini izleyerek işlem yapar ve uygulamamızın güncel kalmasını sağlar.
useContext Hook
useContext Hook, React Context API'nin kullanımını daha kolay hale getirir ve global state yönetimini sağlar. Bu sayede, verilerimizi daha kolay bir şekilde paylaşabiliriz ve uygulamamızın performansını artırabiliriz.
useContext Hook'u kullanarak, React Context API'nin sağladığı state'leri farklı component'lerde kullanabiliriz. Böylece, global state'lerimizden verilerimizi daha kolay bir şekilde paylaşabilir ve tekrar kullanılabilirliği artırabiliriz.
Ayrıca, useContext Hook kullanarak component'ler arasında data transferi daha performanslı bir şekilde gerçekleştirilebilir. Bu sayede, state yönetimi daha düzgün bir şekilde yapılabildiği için uygulamamızın performansı artar.
Örneğin, bir uygulamada kullanıcının giriş yaptığı bilgisini bir component'ten diğerine geçirmek istediğimizde useContext Hook kullanarak global bir state oluşturabilir ve tüm component'lerde bu state'ten kolaylıkla faydalanabiliriz.
useContext Hook kullanımı oldukça basit ve anlaşılırdır. createContext() fonksiyonu ile bir context oluşturulur ve context'in sağladığı state ile işlemler gerçekleştirilir. useContext Hook ise, oluşturulan context'i kullanarak state'e erişim sağlar.
Özetle, useContext Hook kullanarak React Context API'nin sağladığı global state yönetimini daha kolay bir şekilde gerçekleştirebiliriz. Bu sayede, verilerimizi daha kolay bir şekilde paylaşabilir ve uygulamamızın performansını artırabiliriz.