React Component

REACT Component oluştur 

React Component nedir?

React i componentlardan oluşan bir bütün olarak düşünebiliriz. DOM a göndermek istediğimiz yani kullanıcın taracısında görmek istediği öğeleri componentlar oluşturarak gösteririz.Küçük componentlar oluşturarak ve bunları birleştirerek daha büyük bir component oluşturabiliriz. 

Componentlar sayesinde oluşturmak istediğimiz bir parçayı mesela bir toolbar ı düşünelim farklı farklı yerlerde tekrardan yazmak yerine bir kez yazarak bir çok yerde kullanabiliriz. 

Componentlar oluştururken state ve props lar kullanılır. 

Stateler componentın içerisinden değiştirilir özel(private) yapıdadır. Kullanım alanına örnek olarak isAuthenticated şeklinde bir state propertisi düşünebiliriz. Kullanıcının giriş yapıp yapmadığını kontrol edip girip girmeme durumuna göre farklı methodları çağıracağımız yada componentı değiştireceğimiz durumlarda kullanırız. 

Propslar yani properties ise componentın dışında gönderilen ve değiştirilen yapılardır.Bunları attribute olarak düşünebiliriz. HTML de kullandığımız atrributelar gibi. Mesela ekrana bir mesaj göndermek istiyoruz. Bu mesajıda bir <h1> tagleri içerisinde göndereceğiz ama farklı durumlarda gönderilen mesajın değişmesini istiyoruz. Bu componentı birden fazla yerde kullanacağımızı düşünelim. İşte bu gibi durumlarda propsları kullanırız. 

JSX ile Basit bir component oluşturarak tarayıcıya mesaj gönderelim. Bu mesajı da propsları kullanarak yapalım. 

Propslar için ne demiştik dışarıdan müdahele edilerek değiştirilebilen özelliklerdir. 

props.children <> tagler içerisinde yazılan elementin arasında gönderilen değerlerdir. Burada ki örnekte <Message></Message> arasına yazılan değerleri tarayıcıda gösterecek demektir. 

İstersek bunu bir message prop olarak ta gönderebiliriz. İsimlendirmeyi istediğimiz şekilde yapabiliriz. Componenet ın içinde tanımladığımız yerde props.istediğinpropadı şeklinde yazarak çağırdığımız yerdede istediğimizpropadı = şeklinde göndererek tanımlarız. 

Şimdide props.message ve props.children ikisini birden gönderelim. 

Function ve Class Component

Component ı oluşturmak için kullanılabilecek en basit yollardan biri JavaScript fonksiyonu yazmaktır. 

Aynı zamanda ES6 class tanımlaması ile de component oluşturabiliriz. Burada dikkat etmemiz gereken noktalardan biri classın içerisinde propsları çağırırken this.props.propsname şeklinde kullanmamız gerektiğidir. 

Function Component Class Component Dönüştürmesi

• ES6 classı tanımla React.Component tan uzanan
• render() methodunu ekle
• fonksiyonun body sini render() methodunun içerisine yaz.
• propsları this.props olarak değiştir.

Component içerisinde Component 

Öncelikle 2 component oluşturalım biri başlık bilgilerini tutsun, diğeri ise içerik bilgilerini. 3. bir component ile de bu 2 componentı çağıralım.

Component Props Kullanımı

Peki ContentComponent'ı birden fazla kez farklı içeriklerle kullanmak istediğimizi düşünelim. Ne yapmalıyız? Tabiki props oluşturmalıyız. Şimdide props tanımlayarak ContentComponent'ı değiştirelim ve birden fazla kez farklı içeriklerle kullanabilelim. 

Component State kullanımı

Şimdide HeaderComponent içerisine state ekleyelim. Bilgileri bu state ile gönderelim.

State tanımlamasını constructor() içerisinde yaparız. Class içerisinde state tanımlanırken propslarda olduğu gibi this.state kullanılır. 

State ve Props 

Şimdi ki örneğimizde state ve propsları gene bir arada kullanacağımız bir örnek yapalım ama bu sefer MainConstructorda tanımladığımız state değerini HeaderComponentına props değeri olarak gönderelim.