(1) Components - ReactJs

 

 

Üst component alt componente veri taşıyabiliyor fakat alt component üste veri aktaramıyor .

 

 

Bu resimde component mimarisini anlattı sağ taraftaki diagramı sol taraftaki de verilerin nerelerde bulunduğunu gösteriyor.

 

Buradaki component mimarisinde İlk baştaki v den sona direkt veri aktarımı yok.

Bunun için adım adım giderek sondaki kısıma veri aktarımı yapabiliyoruz. Böylece sadece değişiklik yapılan componentdeki kısımlar render edilip gösteriliyor böylece performans artışı sağlanıyor.

 

 

İlk componentimizi Oluşturalım

 

Fonksiyon , Class , React Hooks componentler (16.8 version'da yayınlandı). Temeller ;

 

buradaki kod parçacığında return içi html kodu gibi gözüküyor fakat html kodu sadece render ediliyor. İncelediğinizde <h3> kodunda hata verdiğini görüyoruz sebebi ise iki aynı hierarchy'de ana 2 tane yapı oluşturdun ben buna izin vermiyorum.

Bu işlemi yapabilmek için senin ana bir yapın olması gerekiyor like <div>

 

Yeni Component oluşturma

 

src içerisine new file ile yeni dosya oluşturuyoruz. Amacımız üstte Navbar, solda menu, sağda ürünler olacak şekilde bir tasarım yapıcaz.

 

Navi.js dosyasını oluşturuyoruz(src içerisine) sonra eklediğimiz Snipped eklentisi ile rcc yazarak kısayol koduna ulaşıyoruz. Böylece class component oluşturuyoruz.

Nedir class component ?

export ⇒ public karşılığıdır her yerden erişilebilir.

render ⇒ fonksiyon render() karşılık geliyor aslında.

extends ⇒ component'dan miras almış.

Peki bu Navi.js yi nasıl kullanırım ?

 

Öncelikle <Navi> componentini kullanmak için gidip import ediyoruz o da resimde görüldüğü gibi import Navi from "./⇒ kök dizin Navi ⇒ componentin dosyadaki adı"

Böylece biz gidip navide bir değişiklik yaptığımızda tüm program değilde sadece navi kısmı render edilecek.

 

CategoryList.js

 

rcc dedik enterladık ve componentimiz hazır.

ProductList.js

 

aynı şekilde productlist.js oluşturuyoruz.

Son olarak importlar

 

App içerisinde hepsini importlayıp return içinde de kullandığımızda görüntümüz bu şekilde olacak.

 

Soonuç;