React Widget Render 1
Merhabalar bu benim ilk medium yazım. Şirkette karşılaştığımız bir probleme olan çözüm yaklaşımlarım dan birini sizler ile paylaşmak istiyorum.
Öncelikle şirkette neler yapıyorum ve bu problem neydi ? Ondan bahsedelim. Bursa’da bir yazılım şirketinde interaktif video player yapıyorum. Kendimde Bilgisayar Mühendisiyim. Bu video playeri Video Js tabanlı React ile yapıyorum. Yaptığımız video player aynı zamanda bir sosyal medya uygulaması aynı zamanda bir eticaret aynı zamanda bitmek tükenmek bitmeyecek özellikler ve istekler var :) Her neyse gelelim son isteğe. Son istek bu video playerin bu video playeri kullananlar tarafından özelleştirebilmesi. Yanlız bu özelleştirme yanlızca CSS ile olmayacak. Kodlama bilmeyen birisi bile yapabilecek. Biraz göze korkutucu gelse bile çok güzel çözüm yollarımız zaman ile oluştu ve size bunlardan birini paylaşmak istiyorum.
Olayı ve kodu daha iyi anlayabilmek için istek yalnızca şu olsun. Bir menümüz var ve kullanıcı ve bu menüde render edilebilecek componentleri seçebilsin.
Yazıya başlamadan kodu görmek isteyenler için : https://codesandbox.io/s/blissful-saha-ncv07
Kullanıcını bu tab komponentini Json olarak yollamasını ve benimde Bu Json na göre componentleri render etmek istiyorum.
Json file şu şekilde:
const jsonTemplate = {
tabs: [
{
title: “Login”,
key: “login”
},
{
title: “Wishlist”,
key: “wishlist”
},
{
title: “Products”,
key: “product”
}
]
};
Komponentlerimin için key ve title alıyor. Title kısmı menüde görünecek olan kısım. Key ise componentlerimin ismi ve Component servise methodu tarafından kimin render edileceği belirleniyor.
Bir tane buildMenu fonksiyonum var.
function buildMenu(tabs, callback) {
return tabs.map(item => (
<button key={item.title} onClick={() => callback(item.key)}>
{item.title}
</button>
));
}
Methodum render edilecek Json objesini ve callback methodunu alıyor. Burada callback methodu aslında componentimin setState methodunu alacak ve hangi componentin render edildiğini bilecek ki burada render edilen menuye active class gibi nitelikler ekleyebileyim.
import WishList from “./WhishList”;
import Login from “./login”;
import Products from “./Products”;
import “./styles.css”;
const MyComponentService = {
login: <Login />,
product: <Products />,
wishlist: <WishList />
};
Daha önce hazırlayıp import ettiğim componentlerimi MyComponentService Methodum ile keylerine göre eşliyorum. Sırada main componentim kaldı.
function App() {
const [tab, setTab] = useState(jsonTemplate.tabs[0].key);
return (
<>
{buildMenu(jsonTemplate.tabs, setTab)}
<hr />
<div className=”App”>{MyComponentService[tab]}</div>
</>
);
}
Şimdi burada tab state mi Json dosyamdaki ilk eleman ile eşliyorum. Yani tab state tim login keyini tutuyor.
BuildMenu methodum görevini yapıp Json dosyamdaki bütün objelerin title larını butonlara basıyor.
{MyComponentService[tab]} da login keyi Login componentimi gösterdiği için onu render ediyor.
Her bir onClick methodunda state tim değiştiği için her değişimde componentim tekrar render ediliyor. Gayet basit ve eğlenceli değil mi ?
Ama durun aslında bu tam olarak bir React Componenti render etmiyor. Ya da şöyle demek daha uygun Bu adam nasıl props alacak ?
Devamı ikinci bölümde olsun biz bunu çözdük, İkinci bölümde componentim props alacak , aynı zamanda run time da Css nasıl import edilir ve bu Json u başka bir servisden çeker gibi async olarak yapalım.
Yazımı okuduğunuz için teşekkürler.
