Merhaba arkadaşlar, React yazı dizimizin üçüncüsü olan React Component Nedir? React Component Kullanımı konusuna geldik. Bugünkü yazımda sizlere component konusunu anlatmaya çalışacağım. React’te yazarken component mantığını öğrenmek ve bu yapıyı efektif kullanmak oldukça önemlidir.
İlk iki yazıyı okumayanlar için linkleri veriyorum. Componentlere geçmeden önce bu yazılara bakmanızı öneririm.
React nedir? Neden React’i tercih etmeliyim
React JSX nedir? React JSX kullanımı
Hadi başlayalım!
React Component Nedir?
React, modern web uygulamaları geliştirmek için kullanılan popüler bir JavaScript kütüphanesidir. Componentler, React uygulamalarının temel yapı taşlarıdır. Bir component, kendi içinde bağımsız olarak çalışabilen ve yeniden kullanılabilir olan bir parçadır. Türkçe karşılığı “bileşen” olarak verilen componentler bir bütünü meydana getiren parçalardır diyebiliriz. Bir yapboz örneğinde yapbozun her bir parçasına bir component demek mümkündür.
Peki, nasıl çalışır? Hadi birlikte keşfedelim!
React componentler, kullanıcı ara yüzünün yapı taşlarıdır. Her bir component, aynı alanda bulunurken, birbirinden bağımsız olarak çalışır. Kendi yapısı, methodları ve API’leri olan React componentleri, yeniden kullanılabilir ve ihtiyaçlara göre ara yüzlere yerleştirilebilir.
Kullanıcı ara yüzünü bir ağaç gibi düşündüğümüzde, başlangıç componenti kök olarak hizmet ederken, bağımsız parçalar da dallara ve daha sonra alt dallara ayrılır. Tüm componentler bir araya gelerek kullanıcı ara yüzünü oluşturur. Bununla birlikte hepsi kendi içinde bağımsız olarak hareket eder.
Aşağıdaki resmi inceleyelim.
Component mimarisi, kullanıcı ara yüzünü düzenli tutar. Veri ve durum değişikliklerinin kökten dallara ve ardından alt dallara mantıksal olarak akmasına izin verir. Componentler, sunucuya doğrudan istemci tarafından çağrılar yaparak, DOM’un sayfayı yenilemeden dinamik olarak güncellenmesini sağlar. Bunun nedeni, React componentlerinin AJAX istekleri kavramı üzerine inşa edilmiş olmasıdır.
Her componentin, sunucuya çağrı yapabilen ve bunları güncelleyebilen kendi arabirimi vardır. Bu componentler birbirinden bağımsız olduğundan, her biri diğerlerini veya kullanıcı arabirimini bir bütün olarak etkilemeden yenilenebilir. Aşağıdaki resmi incelediğimizde bunu daha net görebiliriz.
Oluşturduğunuz React componentlerini sitenizde farklı alanlarda birden fazla kez kullanabilirsiniz.
Component mimarisinin en büyük avantajlarından biri şudur:
Yukarıdaki resim üzerinden devam edecek olursak, diyelim ki 2 numaralı componentinizi 10 sayfalık sitenizin her sayfasında 4 defa kullandınız. Bu durumda sitenizde 40 tane 2 numaralı component olur. Sayfanız geliştikçe bu componentte bazı yenilikler yapmak isteyebilirsiniz.
Eğer React ile çalıştıysanız, yapmanız gereken tek şey componente gitmek ve değişikliği component üzerinde yapmaktır. React hızlı şekilde sitenizde sadece bu componentte değişiklik olduğunu algılayacak ve 40 yerde anında yenileme yapacaktır.
Siz hem aynı kod bloğunu 40 defa yazmaktan kurtulmuş olursunuz, hem de yenilik gerektiğinde 40 yerde değiştirmekle uğraşmamış olursunuz. Ayrıca 40 alan ile uğraşmak gerçekten riskli de olabilir. Bazı alanlar gözden kaçabilir ve sitenizde tutarsızlık oluşabilir.
Ayrıca bunu yaparken bu 40 alan dışında kalan componentlerin değişmediğini de bilecek ve o alanları yenilemeyecektir. Bu da performans açısından oldukça önemlidir.
React’te Component Türleri
React’te 2 tür component vardır:
⇒ Class component
⇒ Function component
React artık kendi sitesinde de class component kullanımını önermemekte ve bunun yerine function componenti tavsiye etmektedir. Bunun nedeni React’in ilk yıllarında function componentler daha kısıtlı işlem yapma becerilerine sahipken, class componentler asıl React mantığını yürütüyordu.
Fakat bugün function componentler class componentin yaptığı tüm işlevleri daha sade ve daha anlaşılır şekilde yaptığından class componentlere ihtiyaç kalmamıştır.
Bu nedenle bu yazımızda class componentlere değinmeden function componentleri anlatacağım. Class componentleri merak edenler buradan inceleyebilir.
REACT FUNCTION COMPONENT
React uygulamalarında kullanılan ve işlevsel bir component oluşturmayı sağlayan fonksiyonlardır. React’ta function componentler, class componentlere göre daha basit ve okunması kolay bir yaklaşımdır.
REACT FUNCTION COMPONENT KULLANIMI
React Hook ların tanıtılmasından sonra, function componentler yazmak, modern uygulamalarda React componentleri yazmanın standart yolu haline geldi.
React function componentleri, bir JavaScript fonksiyonu olarak tanımlanır ve bir JSX (JavaScript Extension) yapı döndürür. Bu yapı, HTML benzeri bir sözdizimi kullanarak UI componentlerini oluşturmak için kullanılır.
Fonksiyonun adı, componentin adı olarak kullanılır.
İşte basit bir örnek:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from 'react'; function App() { return ( <div> <h1>Hello, World!</h1> <p>Bu benim ilk React function componentim.</p> </div> ); } |
Yukarıdaki örnekte, App adında bir fonksiyon tanımladık ve JSX yapılarını içeren bir yapı döndürdük. Bu yapı, bir <div> elementi içinde bir başlık (<h1>) ve bir paragraf (<p>) içeriyor.
Çıktı:
Yukarda normal function kullanılarak yazdığımız componenti, ES6 ile gelen arrow function şeklinde aşağıda yeniden yazalım ve her zaman güncel yapıları kullanmaya çalışalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from 'react'; const App = () => { return ( <div> <h1>Hello, World!</h1> <p>Bu benim ilk React function componentim.</p> </div> ); } |
Not: “React Component Arrow Function Unexpected Token” hatasıyla karşılaşırsanız, React uygulamanız için JavaScript ES6’nın mevcut olduğundan emin olun. Normalde create-react-app kullanılırken bunun verilmesi gerekir, aksi takdirde projeyi kendiniz kurarsanız Babel, React uygulamanız için ES6 ve ötesi özellikleri etkinleştirir .
Çıktı:
Her iki syntaxta da aynı sonucu aldığımızı görebiliriz.
Nested Components (Bir Componenti Başka Bir Component Içerisinde Kullanmak)
Bir React Function Componentini başka bir Component içinde render etmek istiyorsanız, yeni bir component tanımlarsınız ve onu render etmek istediğiniz component’in içerisinde HTML elementi olarak yazabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from "react"; const FirstComponent = () => { return ( <div> <h2>Ben FirstComponentten gelen yazıyım</h2> <p>Bu yazıyı FirstComponentte yazdım ve App componenti içine yerleştirerek render ettim.</p> </div> ); }; export default FirstComponent; |
Yukarıda FirsComponent adında yeni bir component oluşturduk. Şimdi bu componenti App componenti içinde HTML elementi şeklinde ekleyelim.
Dikkat!
⇒ Bu eklemenin sistem tarafından okunabilmesi için, öncelikle FirstComponent’in export edilmesi gerekiyor. Aşağıdaki resimde 13. satırda export işlemini görebilirsiniz.
⇒ Sonra da App componentinde aşağıdaki resimde 2. satırda gördüğünüz import işleminin yapılmış olması gerektiğini unutmayalım.
Aşağıda FirstComponentinin, App componenti içine eklenmesini görüyorsunuz.
Bu durumda sonuç şu şekilde olacaktır.
Çıktı:
Bu şekilde siteniz için tasarladığınız componentleri oluşturabilir ve bunları iç içe kullanabilirsiniz. Oluşturduğunuz bütün componentleri istediğiniz herhangi bir component de kullanabileceğinizi unutmayın.
Ayrıca aynı componenti birden fazla kez, farklı veya aynı component içinde kullanabilirisiniz.
Aşağıda FirstComponenti ni App içinde 3 kere kullanalım ve çıktımızın son durumuna bakalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React from "react"; import FirstComponent from "./componets/FirstComponent"; const App = () => { return ( <div> <FirstComponent /> <h1>Hello, World!</h1> <p>Bu benim ilk React function componentim.</p> <br /> <FirstComponent /> <FirstComponent /> </div> ); }; export default App; |
Çıktı:
Umarım “React Component Nedir? React Component Kullanımı” başlıklı yazım sizin için faydalı olmuştur. Componentler ile ilgili sorunuz olursa yorum kısmından sormayı unutmayın.
Şu yazılar da ilginizi çekebilir.
JavaScript Nedir? JavaScript Ne İşe Yarar?
