React Bileşenlerine Giriş

Herhangi bir web sitesine bir göz atalım. Bir dizi bağımsız bloktan oluşur: header, sidebar'lar, footer, içerik. Bu blokların, React'ta kastedilen anlamda bileşenler olduğunu söyleyebiliriz.

Aynı header'a baktığımızda, onun içinde logolu blok, iletişim bloğu, menülü blok vb. ayrılabilir. Yani bileşenler diğer alt bileşenlerden oluşabilir.

React'ta da işler benzer şekildedir - site, kendi içinde diğer bileşenleri içerebilen bileşenler kümesinden oluşturulur.

React'ta her bileşen ayrı bir modülü temsil eder. Genellikle geliştirme, içinde diğerlerini barındıran ana bileşen App ile başlar.

Hadi yeni bileşenler oluşturma alıştırması yapalım.

Örnek olarak, bir ürünün verilerini gösteren bir bileşene ihtiyacımız olsun. Bunun için çalışma klasöründe Product.js dosyasını oluşturup içine aşağıdaki kodu eklememiz gerekiyor:

import React from 'react';

function Product() {
	return <p>
		ürün
	</p>;
}

export default Product;

Gördüğünüz gibi, şu anda bileşenimiz bir metinle birlikte bir paragraf döndürüyor. Sonraki derslerde bu kodu, ürün verilerinin döndürüleceği şekilde geliştireceğiz. Ama şimdilik başlangıç olarak sadece bir miktar başlangıç metni içeren bir paragraf bırakalım.

Şimdi oluşturduğumuz bileşeni App bileşeninde gösterelim. Şu anda App bileşenimizin aşağıdaki koda sahip olduğunu varsayalım:

import React from 'react';

function App() {
	return <div>
		metin
	</div>;
}

export default App;

Öncelikle oluşturduğumuz ürün bileşenini içe aktarmamız gerekiyor:

import React from 'react';
import Product from './Product'; // ürünü içe aktarıyoruz

function App() {
	return <div>
		metin
	</div>;
}

export default App;

Böyle bir içe aktarımdan sonra, App bileşeninin içinde Product bileşenini kullanabiliriz.