Componentler(Bileşenler), kullanıcı arayüzünde parçadan bütüne mantığı ile parça parça alanlar oluşturup, ana component içinde çağrılarak hepsi birden Render edilir. Bu sayede birbirinden bağımsız ve tekrar kullanılabilen bölümler oluşturmanızı sağlar ve bu bölümler yada alanlar birbirleri içerisinde render edilerekte çağrılabilirler bu sayede kod tekkrarından ve karmaşasından da kurtulmuş olunur ve her bir bölümde bir birinden bağımsız geliştirmeler yapılabilir.
Bu componentler Functional Components(Fonksiyon Tabanlı Bileşenler) ve Class Components(Sınıf Tabanlı Bileşenler) olarak 2 ye ayrılır. Bunlara bakalım.
Functional Components : Function component’ler temelde bir JavaScript fonksiyondur. İcerisinde bulunan return ifadesi ile geriye React elementi(JSX) döndürürler. Sayfadaki sadece state leri yani durumları, olayları tutar. Mesela Buton üzerine tıklanıldığında işin yapıldı, yapılmadı durumu (State) değiştirir.
Yapısı aşağıdaki gibidir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React from “react”; function Navbar(){ return( <div> <h3> User Navbar Func Component</h3> </div> ) } export default Navbar; //—-Yada bu şekilde de tanımlanabilir————————- const Navbar = () =>{ return( <div> <h3>User Navbar Func Component</h3> </div> ) } export default Navbar; |
Sonrada App.js içine tanımlanarak çalıştırılır.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function App() { return ( <div className=“container”> <Navbar/> </div> ); } export default App; |
Not: Bu fonksiyonları rfc (react Fonksiyon Component) tab. kısa yoluylada oluşturulabilir.
Class Components : Bu componentler sayfadaki prop(özellik) ve state(durum) ti tutar. Props(özellik), oluşturduğumuz component’lerin özelliklerini tutarken, State(durum) ise sayfanın ya da bir componentin durumunu tutar. React ın component class ından türetilir ve ve bu class içinde render fonksiyonu bulunur ve bu fonksiyon arayüzde jsx öğerlerini döndürür. Class componentler daha karmaşık ve daha fazla işlevsellik gerektiren daha compleks durumlarda kullanılır.
Yapısı aşağıdaki gibidir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class User extends Component { render() { return ( <div> <form> <input type=“text”></input> <br/> <button>Gönder</button> </form> </div> ) } } export default User; |
Sonrada App.js içine tanımlanarak çalıştırılır.
|
1 2 3 4 5 6 7 8 9 10 11 |
function App() { return ( <div className=“container”> <User/> </div> ); } export default App; |
Not: Bunu da rcc (react Class Component) tab. kısa yoluylada oluşturulabilir.
sağlıcakla kalın…
Bir yanıt yazın