Derinlemesine React UI

By Onder Teker

Bu kitapta React ile görsel arayüz işlemleri gösterilmektedir. Router ile geziyolu ve gezinme işlemleri anlatılmaktadır. Stiller üzerinde işlem yapması gösterilmektedir. React Bootstrap ile Responsive Design yapmanın yolu & hazır bileşenler kullanarak geliştirme yapılması gesterilmektedir. Yalnızca bileşenler anlatılmamakta, state, properties, event gibi React özellikleriyle birlikte kullanımı gösterilmektedir. Aynı biçimde, React MUI ile de Material Design, React özellikleriyle birlikte kullanımı anlatılarak açıklanmaktadır. Hazır bileşenlerin dışınde uyarlanmış bileşenler geliştirilmesi de gösterilmektedir. Son bölümde React Chart 2 ile çizenek işlemleri anlatılmaktadır.

 

Kitabın yazarı bilgisayar mühendisi Önder Teker, yazılım geliştirme alanında 1990'lı yılların sonlarından beri projeler geliştirmekte, 2000'li yılların başından beri eğitimler vermekte, 2010'lu yılların başından beri de kitap ve eğitim setleri üretmektedir.

• Language: Türkçe
• Publisher: Godoro
• Release date: Jul 8, 2022
• ISBN: 9786057476470

Book preview

Rota / Geziyolu (Route)

Bir uygulamada belli öğeler aracılığıyla bileşenden ötekine gidilmesi işlemine gezinme (navigation) denir. Gezinme aşamasında geçilen duraklara da geziyolu (route) adı verilir. Bir uygulamada hangi öğeden hangi öğeye nasıl gezinileceğini bildirmeye rotalama / geziyollatma (routing)  denir. Buna göre bir yolak (path) değeri için bir bileşen (component) belirlenir ve kullanıcı adres çubuğunda o yolağı girerse ya da o yolak için belirlenmiş bir öğeye tıklarsa geziyolunda bildirilen bileşene geçilir.

Kurulum (Installation)

React çatımlamasının kendisinde geziyolu (route) özelliği bulunmamaktadır. Bunun için bir bohça (package) kurulumu gereklidir. Bunlardan en yaygını React Router (React Geziyollatıcı) adını taşımaktadır.

Bohça (Package)

React Router betikliğinin bohça adı react-router-dom adını taşımaktadır. Bir uygulamada rota / geziyolu (route) kullanılması için aşağıdaki gibi kurulum yapılabilir:

npm install react-router-dom

Söz konusu bohçadaki bileşenleri kullanmak için aşağıdaki gibi bir içealım (import) yapılı:

import { BrowserRouter, Routes, Route }

   from 'react-router-dom';

Geziyolu Tanımlama

Bir uygulamada gezinme işlemleri yapılabilmesi için öncelikle geziyolu (route) yapısının kurulması gerekir. Başka bir deyişle, hangi yolak (path) için hangi bileşen (component) geleceği tanımlanır. Sonrasında gezinme işlemleri bu tanımlamaları kullanır.

Gözatıcı Geziyollatıcı (Browser Router)

Bir uygulamada geziyolu oluşturma, geliştirme aşamasında yapılsa da çalışma zamanında işlemleri, uygulamanın çalıştığı gözatıcı (browser) gerçekleştirir. Başka bir deyişle, geziyolu oluşturma, içinde çalışılan gözatıcıya bir takım bilgilendirmeler yapılmasıyla sağlanır. Çünkü bir bağ (link) tıklandığında ya da gözatıcının adres çubuğunda bir yolak (path) girildiğinde ilk olarak gözatıcı devreye girer. Sonrasında yapılana takılımlara göre gözatıcı uygulamadaki bir bileşeni çağırır.

Bir gözatıcıya geziyolu takılımı yapmak için BrowserRouter (Gözatıcı Geziyollatıcı) adlı bir bileşen kullanılır. Bunun içinde Routes (Geziyolları) adlı bir öğe ile tanımlamalar bildirilir. Örnek:

<BrowserRouter>

 <Routes>

   ...       

 

Tanımlamalar Bileşeni (Definitions Component)

Bir uygulamada BrowserRouter (Gözatıcı Geziyollatıcı) adlı bileşen başka bir bileşenin içinde bulunmalıdır. Örneğin RouteDefinitions (Geziyolu Tanımlamaları) adlı bir öğe aşağıdaki gibi bildirilebilir:

export default function RouteDefinitions() {

 return (

   <BrowserRouter>

     <Routes>

       ...

     

   

 );

}

Uygulama (Application)

Uygulamada çıkışyolu (outlet) tanımlamalarını içeren bileşen, ana bileşen olan App içinde kök bileşen olarak, başka bütün bileşenleri içinde kapsayacak bir biçimde bildirilir. Örneğin BrowserRouter öğesini bildiren bileşenin adı RouteDefinitions ise App içinde aşağıdaki gibi düzgüleme yapılır:

function App() {

 return (

   

App>

       

Godoro Rota

   

 );

}

export default App;

Çıkışyolu (Outlet)

Bir yolak (path) seçildiğinde geziyolu (route) tanımlamasında bildirilen bileşenin görüneceği bir konum bulunmalıdır. Bunun için Outlet (Çıkışyolu) bileşeni kullanılır. Herhangi bir bileşende aşağıdaki gibi

/>

biçiminde bir öğe kullanımı yapılırsa bir adres seçildiğinde bileşen burada, yani Outlet bileşenin bulunduğu yerde görünür.

İçinde çıkışyolu (outlet) bulunan bileşen geziyolu tanımlamalarının yapıldığı yerde kök (root) olarak bildirilmelidir. Örneğin çıkışyolu içeren bileşenin adı  RouteOutlet (Geziyolu Çıkışyolu) ise, yolak (path) olarak bölü (slash) imi / ile aşağıdaki gibi bir bildirim yapılır:

  

     

       <Route path=/ element={<RouteOutlet />}>

     

   

Alt Yolak (Subpath)

Bir bir yolak (path) verildiğinde belli bir bileşenin görünmesini sağlamak için Route (Geziyolu) bileşeni kullanılır. Bir yolak verildiğinde gidilecek bileşen ise element (öğe) özniteliğiyle bildirilir. Örnek olarak aşağıdaki gibi bir bilşen olsun:

export default function ComponentTwo() {

 return (

   

     

Bileşen

iki.</h3>

   

 );

}

Bir alt yolak (subpath) verilerek erişilecek, bir bileşen geziyolu aşağıdaki gibi bildirilebilir:

 / element={<RouteOutlet />}>

   <Route path=two element={<ComponentTwo />} />

 

Yukarıdaki tanımlamanın anlamı, herhangi bir konumda

/two

biçiminde bir yolak istenirse ekrana ComponentTwo adlı bileşenin gelmesidir.

Dizin (Index)

Herhangi bir alt yolak (subpath) verilmediğinde görünecek dizin (index) bileşen aşağıdaki gibi yazılabilir:

export default function ComponentIndex() {

 return (

   

     

Bileşen

dizin.</h3>

   

 );

}

Söz konusu bileşenin bir yolağın altında herhangi bir alt bir yolak yazmadan gelmesini sağlamak için path (yolak) özniteliği kullanılmaz, onun yerine index (dizin) kullanılır. Örnek:

={<ComponentIndex />} />

Bu bildirim, tanımlama neyin içindeyse onun yoksama (default) bileşeni olduğu anlamı taşır. Örneğin aşağıdaki gibi

 path=/ element={<RouteOutlet />}>

  index element={<ComponentIndex />} />

biçiminde bir tanımlama varsa bileşen / (bölü / slash) biçimindeki bir yolakta görünür.

İçinde bulunduğu geziyolunun yolak değeri aşağıdak gibi

 path=/mymodule element={<RouteOutlet />}>

  index element={<ComponentIndex />} />

/mymodule biçiminde olsaydı bu yolakta görünür.

Değiştirgen (Parameter)

Bir uygulamada geziyolu (route) işlemleri bir bileşenden ötekine geçilmesini sağlar. Kimi durumlarda kaynak (source) durumundaki bileşenden erek (target) durumundaki bileşene, değiştirgen (parameter) adı verilen bir takım değerler aktarılması gerekir.

Uygulamadan geziyolu tanımlamasını yaparken değiştirgen (parameter) değerleri yolak (path) içeriğinde, iki nokta üstüste (colon) imi : önekiyle yer alırlar. Örnek:

mypath/:id element={<MyComponent/>}/>

Birden çok değiştirgen de yolak içinde bildirilebilir:

/mypath/:id/:value

Eğer seçenekli değiştirgen (optional parameter) kullanılacaksa, başka bir deyişle, değiştirgen kullanımı seçenekli ise iki kez geziyolu tanımı yapılır:

mypath/:id element={<MyComponent/>}/>

mypath element={<MyComponent />}/>

Bir yolağın erek (target) bileşeninde aktarılan değiştirgenin değerini almak için useParams() (değiştirgenleri kullan) adlı çengel kullanılır. Örnek:

const { id } = useParams();

Söz konusu işlev, içinde aktarılan tüm değiştirgenleri tutan bir nesne (object) döndürür. O yüzden değerler kıvırcık ayraçlar (curly bracketers) imleri {} ile yayma (spread) yoluyla edinilebilirler.

Eğer değiştirgen seçimli ise önce değeri tanımlanmamış (undefined) olmadığı denetlenmelidir:

if( id !== undefined ){

}

Bağ (Link)

Bir geziyolu (route) bildirimi yapldığında, başka bir deyişle yolak (path), belli bir bileşen gidecek biçimde takılım yapıldığında gözatıcının adres çubuğunda bir adres girilebilir. Örneğin

/two

girilirse bu yolağa atanmış olan bileşen görünür.

Ancak çoğu durumda, kullanıcı bu yolağı adres çubuğuna elle girmez. Başka bir bileşende bir çapa (anchor) ya da düğme (button) gibi bir öğeyi tıklar. Tıklandığında bir yolağın çalışmasını sağlamak için Link (Bağ) adlı bir bileşen kullanılır. Kullanılacak yolak ise to (şuna) özniteliğiyle bildiirilir. Örneğin

 <Link to=/two> İki

Kullanıcı bu bağa tıklarsa, o yolak için tanımlanmış bileşen, çıkışyolu (outlet) öğesinin bulunduğu yerde görünür.

Gezinme (Navigation)

Bir geziyollatıcı (router) kullanıldığında her tıklamayla değişecek bir kesim çıkışyolu (outlet) ile bildirilir. Ancak değişmeyen kesimler de çıkışyolu öğesini barındıran bileşende verilir. Bu bileşende bir takım bağ (link) öğeleri bulunabilir. Örneğin,

export default function RouteOutlet() {

 return (

   

     

Bileşen

çıkış yolu.

     <Link to=/> Dizin

     <Link to=/two> İki

     <Outlet />

   

 );

}

biçimindeki bir bileşende Link (Bağ) öğesine tıklanınca Outlet (Çıkışyolu) konumunda başvurulan bileşen gösterilir.

İçerisinde çıkışyolu öğesi bulunan bileşen çoğu yerde serim (layout) diye adlandırılır. Çünkü görsel bileşenlerin ana yapısını bu bileşen belirler. Başka bir deyişle tüm uygulama bu bileşenin içinde bulunur. Kullanıcının bir bağa tıklamasıyla değişen bölüm çıkışyolunda, değişmeyen, hep aynı kalan kesim de çıkışyolunun dışında, öncesinde ya da sonrasında yer alır.

Örnek Uygulama

Aşağıdaki bileşenler geziyolu / rota (route) işlemlerinin ereği durumunda kullanılmaktadır.

Dizin (Index)

Herhangi bir alt yolak (subpath) verilmediğinde görünecek dizin (index) bileşen aşağıdaki gibi yazılabilir:

export default function ComponentIndex() {

 return (

   

     

Bileşen

dizin.</h3>

   

 );

}

Alt Yolak (Sub Path)

Bir alt yolak (subpath) verilerek erişelecek, ikinci bir bileşen aşağıdaki gibi yapılabilir:

export default function ComponentTwo() {

 return (

   

     

Bileşen

iki.</h3>

   

 );

}

Bağ (Link)

İçinde bağ (link) olan üçüncü bir bileşen de aşağıdaki gibi olsun:

export default function ComponentThree() {

 return (

   

     

Bileşen

üç.</h3>

     <Link to=/two> İkiye </Link> 

   

 );

}

Değiştirgen (Parameter)

Aşağıdaki bileşen bir değiştirgen (parameter) almaktadır:

export default function ComponentParameteric() {

 const { id } = useParams();

  return (

   

     

Bileşen

değiştirgenli

       öz: {id}.</h3>

   

 );

}

Rota (Route)

Aşağıdaki örnekte rota (route) tanımlamaları yer almaktadır:

export default function RouteDefinitions() {

 return (

  <BrowserRouter>

  <Routes>

  <Route path=/ element={<RouteOutlet/>}>

    <Route index

element={<ComponentIndex/>}/>

    <Route path=two

element={<ComponentTwo/> />

    <Route path=three   

element={<ComponentThree/>}/>

    <Route path=four/:id

element={<ComponentParameteric />} />

    <Route path=*

element={<ComponentNone />} />

 

 

 

 );

}

Çıkış Yolu (Outlet)

Aşağıdaki örnekte rota / geziyolu (route) tanımlarında çıkış yolu (outlet) kullanımı ve bir takım bağ (link) öğeleri yer almaktadır:

export default function RouteOutlet() {

 return (

 

   

Bileşen

çıkış yolu.

    <Link to=/> Dizin  

   <Link to=/two> İki  

   <Link to=/three> Üç  

   <Link to=/four/444> Değiştirgen  

   <Link to=/none> Yok  

    <Outlet />

 

 );

}

Çalıştırma

grafikler57

Bu bölümde örneğin çalışması anlatılmaktadır. Uygulama ilk açıldığında aşağıdaki gibi bir görünüm ekrana gelir:

Burada İki adlı bağa tıklanırsa belli bir alt yolak (subpath) kullanılarak ikinci bileşen görünür:

grafikler58grafikler59

Burada Üç adlı bağa tıklanırsa içerisinde bir bağ (link) olan bileşen açılır:

Burada İkiye adlı bağa tıklanırsa üst bölümde İki adlı bağla gösterilen bileşene gidilir.

Ekranda Değiştirgen adlı bağın üzerinde durulursa tıklanırsa nereye gidileceği sol alt kesimde görülebilir:

grafikler60grafikler61

Açılan bileşen içinde bağdan gelen değiştirgen (parameter) değeri 444 ekranda görünür:

Ekrandaki Yok düğmesinin üzerinde durulursa bağın yolağının  none olarak verildiği görülür:

grafikler62grafikler63

Buradaki Yok bağı tıklanırsa