E Corp
Hectopat
- Katılım
- 12 Kasım 2020
- Mesajlar
- 325
- Çözümler
- 4
React Componentleri, web uygulamalarında tekrar kullanılabilir kod parçaları oluşturmak için kullanılan temel yapı taşlarıdır.
Diyelim ki bir web sayfasında birden cok kez liste göstermek istiyoruz ve bunu React ile yapmak istiyoruz. İşte bu noktada bir React Componenti devreye giriyor.
Öncelikle, birden çok kez kullanmak istedigimiz bir liste componenti oluşturuyoruz ve bunu "Liste. Jsx" dosyasına yazıyoruz:
Şimdi, bu liste bileşenini ana sayfamızın içinde kullanacağız:
Gördüğünüz gibi, artık tekrar tekrar liste yazmak zorunda kalmıyoruz. Sadece Liste componentini tek bir satırda çağırarak kullanabiliyoruz. Bu sayede, aynı liste componentini başka yerlerde de kolayca kullanabiliriz.
Diyelim ki bir web sayfasında birden cok kez liste göstermek istiyoruz ve bunu React ile yapmak istiyoruz. İşte bu noktada bir React Componenti devreye giriyor.
Öncelikle, birden çok kez kullanmak istedigimiz bir liste componenti oluşturuyoruz ve bunu "Liste. Jsx" dosyasına yazıyoruz:
JSX:
import React from 'react';
function Liste() {
return (
<ul>
<li>Öğe 1</li>
<li>Öğe 2</li>
<li>Öğe 3</li>
</ul>
);
}
export default Liste;Şimdi, bu liste bileşenini ana sayfamızın içinde kullanacağız:
JSX:
import React from 'react';
import Liste from './Liste'; // import ediyoruz.
function AnaSayfa() {
return (
<div>
<h2>Alışveriş Listesi</h2>
<Liste /> // tek satir ile listeyi ekliyoruz
</div>
);
}
export default AnaSayfa;Gördüğünüz gibi, artık tekrar tekrar liste yazmak zorunda kalmıyoruz. Sadece Liste componentini tek bir satırda çağırarak kullanabiliyoruz. Bu sayede, aynı liste componentini başka yerlerde de kolayca kullanabiliriz.
