Derinlemesine React Data

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: English
• Publisher: Godoro
• Release date: Jul 8, 2022
• ISBN: 9786057476494

Book preview

Yapılandırma (Configuration)

Bir uygulama geliştirildikten sonra çalışmadan önce yapılabilecek bir takım değişikliklere yapılandırma (configuration) adı verilir.

Temel Bilgiler

Evre (Phase)

Uygulamanın yazıldığı makineye geliştirme (development) adı verilir. Sonrasında geliştirilen uygulama bir takım kişilerce denensin diye sınama (test) adı verilen bir makineye yüklenir. Sonrasında kullanıcıların işgörmesi için üretim (production) adı verilen makinelere yükleme yapılır. Burada sayılan aşamaları yazılım geliştirmede bir evre (phase) olarak adlandırılır.

Çevre (Environment)

Bir uygulamanın çalıştığı makineye çevre (environment) adı verilir. Yukarıda anılan evrelerin her biri ayrı bir çevrede çalıştırılabilir. Bunlardan bir kaçı aynı çevrede de gerçekleştirilebilir. Genelde bilgilendirmeler evreye göre değil çevreye göre değişir. Çünkü her makinede ayrı kurulumlar yapılır ve ona göre bilgiler değişir.

Çevre Değişkenleri (Environment Variables)

Her çevre için kullanıcı (user), parola (password), web servisleri / örün işgörüleri (web services) gibi bilgisayarlar ya da uygulamalar için ayrı bir takım bilgilendirmeler gerekir. Buna göre geliştiricinin bilgisayarındaki önuç (frontend) uygulaması geliştiricinin bilgisayarındaki bir arkauç (backend) uygulamasına bağlanır. Adres şöyle olabilir:

http://localhost:8081/api/products

Ama önuç uygulaması üretim çevresine alınınca artık böyle davranamaz. Onun bağlanacağı başka bir arkauç uygulamasının adresi verilmelidir. Örneğin artık adres aşağıdaki gibi olmalıdır:

https://rest.godoro.com/api/products

Özetle her uygulama, çalıştığı çevreye göre bir takım değişiklilkler yapmalıdır. Söz konusu değerlerin JavaScript düzgüsü içinde yazılması durumunda uygulamanın her üretime gönderilmesinde bu değerlerin değiştirilmesi, sonra yeniden geri döndürülüp geliştirmenin sürdürülmesi gerekir.

Takılımlar (Settings)

Her çevre kendine özgü bir takım ayarlar / takılımlar (settings) gerektirebilir. Ancak bunlar evre (phase) ya da çevre (environment) için değişmeyebilir. Söz konusu değerlere ayarlar / takılımlar (settings) adı verilir. Örneğin bir kullanıcını bir alışveriş sepetine koyabileceği ürün sayısı sınırlanabilir. Söz konusu değerin çalışılan bilgisayarla ilgisi yoktur. Ancak sonradan, uygulamanın düzgülemesini değiştirmeden çalışmasının değiştirilmesi sağlanabilir.

Burada anlatılan takılımlar (settings) adı verilen değerler de yapılandırma (configuration) dosyalarında saklanabilir. Bunların çevre değişkenlerinden bir ayrımı da, çevre değişkenlerinin uygulamanın çalışması için baştan yapılmasının gerekliliğidir. Ancak takılımlar, çalışma zamanında değiştirilebilir.

Dosya (File)

Bir uygulamanın yapılandırma (configuration) bilgileri genellikle bir dosya / sırtlık (file) içerisine koyulur. Bunlar, ötekilerden ayırmak için env (environment - çevre) uzantılı dosyalarda bulundurulur. Bunların içeriğinde her bilgilendirme, ad (name) ve değer (value) arasında eşitlik (equals) imi = ile bildirilir. Örnek:

OUR_NAME = adimiz

YOUR_NAME = adiniz

Uçbirim (Terminal)

Kimi çevre (environment) değerleri dosyalardan değil, doğrudan işletim düzeni (operating system) üzerinde tanımlanır. Her biri uygulamanın çalıştırıldığı uçbirim (terminal) için değişebilir. Genellikle işletim düzeninin genel çevre değişkenleri vardır ve açılan her uçbirimin için ayrıca bir takım değişkenler eklenebilir ya da var olanlar ezilebilir. Bunlar da uygulamalarda yapılandırma (configuration) olarak kullanılabilir.

Çevre (Environment)

Bu bölümde çevre (environment) ile ilgili konular işlenmektedir.

Dosya (File)

Bir uygulamada yapılandırma (configuration) veya çevre değişkenleri (environment variables) değerleri .env adlı dosyada tutulabilir. Örneğin aşağıdaki gibi dosya içeriği yazılabilir:

.env

 REACT_APP_USERNAME = kullanicim

 REACT_APP_PASSWORD = parolam

Bir çok durumda  değerleri; geliştirme (development), sınama (test), üretim (production) gibi seçeneklerden oluşan her çevre (environment) veya evre (phase) için değişir. Bu durumda yalnıza yerel (local), başka bir deyişle yürürlükteki çevre için geçerli olanlar .env.local adlı dosyaya yazılabilir. Bu durumda .env dosyasındakiler ezilmiş olur. Örnek:

REACT_APP_PASSWORD = yerel_parolam

Öncelik (Priority)

Çevre değişkenlerin edinilme sırası aşağıdaki gibidir:

uçbirim(terminal) / kabuk(shell)

.env.local dosyası

.env dosyası

Bir uygulama Windows işletim düzeninde aşağıdaki gibi başlatılabilir:

($env:MY_VARIABLE=myvalue) -and  (npm start)

Linux için çalıştırma aşağıdaki gibi yapılabilir:

MY_VARIABLE=myvalue npm start

Kullanım

Bir çevre değişkeni (envronment variable) uygulamadaki JavaScript düzgüsünde  process.env (süreç çevre) bir toparlak değişken (global variable) olarak bildirilmiş bir nesnenin bir tarla (field) olarak kullanılabilir. Örnek:

{process.env.REACT_APP_USERNAME}

Söz konusu kullanım biraz uzun olduğu için bir değişken (variable) değerine atanıp oradan kullanılabilir. Örneğin aşağıdaki gibi bir değişken const (constant - direşimli) açarsözü ile bildirilmiş olsun:

const username = process.env.REACT_APP_USERNAME;

bu durumda HTML düzgüsünde kullanım aşağıdaki gibi yapılabilir:

{username}

Örnek

Aşağıdaki .env adlı dosya çevre değişkenleri (environment variables) içermektedir:

REACT_APP_USERNAME = kullanicim

REACT_APP_PASSWORD = parolam

Yukarıdaki değişkenleri ezen, .env.local adı bir dosyanın içeriği de aşağıdaki gibi olsun:

REACT_APP_PASSWORD = yerel_parolam

Aşağıdaki bileşen çevre değişkenlerini kullanmaktadır:

export const EnvironmentConfiguration = () => {

  const username = process.env.REACT_APP_USERNAME;

 const password = process.env.REACT_APP_PASSWORD;

  return (

 

 

Çevreden

  Doğrudan

 kullanıcı:     

 {process.env.REACT_APP_USERNAME}/>

  parola:

   {process.env.REACT_APP_PASSWORD}

  Değişkenden

 kullanıcı : {username}/>

 parola: {password}/>

); }

grafikler90

Uygulama çalıştığında aşağıdaki gibi bir pencere görünür:

Çevre değişkenlerini uçbirim (terminal) ya da kabuk (shell) çevresinden girerek uygulama Windows işletim düzeninde aşağıdaki gibi başlatılabilir:

($env:REACT_APP_USERNAME=gecici) -and  (npm start)

Linux için çalıştırma aşağıdaki gibi yapılabilir:

REACT_APP_USERNAME=gecici npm start

Bu durumda uygulamanın ekran çıktısı aşağıdaki gibi olur:

grafikler91

Evre (Phase)

Bu bölümde geliştirme (development), sınama (test), üretim (production)  gibi çevreler için ayrı yapılandırma (configuration) değerlerinin kullanılması gösterilmektedir.

Kurulum

Bir uygulamada her evre (phase) ya da çevre (environment) için ayrı çevre değişkenleri kullanılabilmesi için env-cmd (envrionment-command / çevre buyruğu) adlı bohça yüklenebilir:

 npm install env-cmd

Bundan sonra bir Node.js buyruğunu belli bir çevre için çalıştırma amacıyla aşağıdaki gibi bir betim yazılır:

env-cmd -f .env.myenvironment react-scripts myscript

Uygulamada package.json dosyasında scripts (betimler) bölümünde aşağıdaki gibi eklemeler yapılmalıdır:

...

"scripts": {

 start: react-scripts start,

"start:development":

 "env-cmd -f .env.development react-scripts start",

"start:production":

 "env-cmd -f .env.production react-scripts start",

 build: react-scripts build,

"build:development":

 "env-cmd -f .env.development react-scripts build",

"build:production":

 "env-cmd -f .env.production react-scripts build",

 test: react-scripts test,

eject: react-scripts eject

},

...

Koşturma (Run)

Çalıştırma çevreleri geliştirme (development) ve üretim (production) gibi adlar alırlar. Ancak aşamalama (staging) ya da nitelik güvencesi (quality assurance  - qa) gibi adlar da alabilirler.

Betimler yapılandırıldıktan sonra start (başlat) ve build (yapıla) buyrukları aşağıdaki gibi belli çevreler için çalıştırılabilir:

npm run start:development

npm run start:production

Önce yapılamayı sonra çalıştırmak için öncelikle her çevre için yapılama buyrukları çağrılır:

npm run build:development

npm run build:production

Sonrasında yapılanmış uygulamadan çalıştırma serve (işgör) buyduğu çalıştırılır:

serve -s build

Örnek

Bir uygulamada geliştirme (development) için .env.development dosyası aşağıdaki gibi oluşturulabilir:

REACT_APP_API_ROOT = http://localhost:8081

Aynı dosyanın üretim (production) için çalışacak sürümü .env.production aşağıdaki gibi yazılabilir:

REACT_APP_API_ROOT = http:///www.godoro.com:8080

Söz konusu çevre değişkenlerini kullanan bir bileşen aşağıdaki yapılabilir:

export const PhaseConfiguration = () => {

  return (

 

  

API Kökü :

   {process.env.REACT_APP_API_ROOT}

 

 ); }

Uygulama aşağıdaki gibi

npm run start:development

grafikler92

geliştirme için başlatılırsa ekran görüntüsü aşağıdaki gibi oluşur:

Başlatma işlemi üretim için yapılacaksa uçbirimde aşağıdaki gibi bir buyruk girilir:

npm run start:production

grafikler93

Bu durumda ekran görünümü aşağıdaki gibi oluşur:

JSON Yapılandırma (Configuration)

Bir uygulamanın belli bir evre (phase) ya da çevre (environment) için ayrı olan değerleri dışında, bir takım değerlerin dosyalardan yüklenmesi gerekebilir. Bunlara yapılandırma (configuration) ya da takılımlar (settings) olarak adlandırılır. Söz konusu değerler daha çok geliştirilen belli bir modülün kullandığı, daha sonra değiştirilme olasılığı olan değerlerdir. Başka bir değişle, uygulamada kullanılan ancak daha sonra çalıştırma sırasında değişebilecek değerler yapılandırma olarak adlandırılan bir takım dosyalara saklanabilir.

Yapılandırma için bir çok biçimletim (format) bulunmaktadır. Bunlardan en çok kullanılanın JSON olduğu söylenebilir. Ancak YAML gibi seçenekler de bulunmaktadır. JSON biçimletmesinin önuç (frontend) uygulamalarda kullanılmasının nedeni JavaScript dili için doğal bir biçimletme olması ve geliştiricilerin REST gibi işlemlerde çoktan bu gösterimle çalışmayı öğrenmiş olmalarıdır.

JSON

Yapılandırma için JSON biçimletimi kullanıldığunda json uzantlı bir dosya içine takılımlar koyulabilir. Örneğin my_settings.json adlı bir dosyanın içeriğinde aşağıdaki gibi değer olabilir:

{ name : Godoro, departement : Yayıncılık }

Her JSON belgesinde olabileceği gibi içerikte nesneler iç içe olabilir. Örnek:

{ name : Godoro,

departement : Yayıncılık

address : {

country : Türkiye,

province : İstanbul } }

Kullanım

Bir JSON dosyasının içeriği herhangi bir dosya işlemi yapmadan, yalnızca import (içeal) buyruğuyla yapılabilir. Örneğin

import settings from '../my_settings.json';

Bundan sonra verilen ad bir önek (prefix) olarak kullanılarak belgedeki değerlere erişilebilir:

{settings.name}

Eğer belge derinse olağan bir nesnedeki gibi kullanılır:

{settings.address.province}

Örnek

Uygulamada kullanılacak yapılandırma (configuration) ile ilgili değerleri içeren bir JSON belgesi aşağıdaki gibi yazılabilir:

{ COMPANY_NAME : Godoro,

PRINTHOUSE_ADDRESS : {

LINE_1 : İşlek Caddesi Çıkmaz Sokak No:99 D:9,

LINE_2 : Atikali Fatih İstanbul } }

Söz konusu belgeyi kullanan bir bileşen aşağıdaki gibi yazılabilir:

import settings from '../app_settings.json';

export const JsonConfiguration = () => {

 return (

 

 

  Kurum Adı :{settings.COMPANY_NAME}/>

  Basımcılık Bulunağı:
 

 {settings.PRINTHOUSE_ADDRESS.LINE_1}/>

 {settings.PRINTHOUSE_ADDRESS.LINE_2}/>

 

 ); }

Uygulama çalıştığında aşağıdaki gibi görünür:

grafikler94

Getiriverme (Fetch)

Bu bölümde JavaScript dilindeki fetch() (getiriver) işlevinin kullanımı anlatılmaktadır. Bu işle uzak (remote) ya da yakın (local) konumdaki dosyaların yüklenmesi için kullanılmaktadır. Özellikle AJAX ve REST gibi tekniklerde JSON biçimletiminde içerikler söz konusu işlevle indirilip kullanılabilir.

Temel Bilgiler

Bu bölümde bir çok durumda kullanılan özelliklerle ilgili bilinmesi gerekenler açıkanmaktadır.

JSON Sırtlığı (JSON File)

Aşağıdaki örneklerde içeriğin bir JSON dosyasında olduğu durum için anlatılsa da REST tekniğiyle devingen bir kaynaktan verinin gelmesi durumunda da anlatılanlar çalışmaktadır. Örnek bir JSON içeriği tek bir nesne içeriyorsa {} (kıvırcık ayraç  - curly brackets) içine alınır:

{ myAttribute: Öznitelik Değer }

Bir dizi varsa [] (dördül ayraçlar - square brackets) içerisinde gösterilir:

[ Değer 1, Değer 2 ]

Bir dizi nesne de içerebilir:

[ {myAttribute: Öznitelik Değer},

 {myAttribute: "Öznitelik Değer:} ]

Konum (Location)

İçerisinde JSON içeriği bulunan bir dosya, public (kamu) dizininin altına koyulabilir. Kök dizin yerine alt klasörlere de yerleştirilebilir. Örneğin json diye bir alt klasörün altında producs.json diye bir dosya aşağıdaki gibi bir konumda olur:

/public/json/MyFile.json

Ancak React içerisinde ya da uzaktan bir gözatıcı uygulamasından erişmek için  public katlığı kök olarak alınır ve yolak (path) bilgisi aşağıdaki gibi verilir:

/json/MyFile.json

React projesi içinde olmasına karşın, konuşlandırma (deployment) yapıldığında JavaScript uygulaları istemci (client) yakasında çalışırken; imge (image) gibi özkaynakları işgörücü (server) yakasında kalır. Bu nedenler JavaScript dilindeki dosya yükleme işlevleriyle değil HTTP üzerinden veri indirmeye yarayan işlevler kullanılabilir.

Gidip Getirme (Fetch)

JavaScript ile HTTP iletişim kuralı üzerinden uzaktaki bir içeriği indirmek için fetch() (git-getir) işlevi kullanılır. Bu yönteminden Promise (Söz Verme) adlı nesne döner. Bunun then() (ondan sonra) yöntemiyle indirilen içerik üzerinde işlem  yapılabilir. Gidip getirme işlevinden dönen söz verme nesnesi, veri (data) içeriğinin çiğ (raw) olarak barındırır. Bunun json() işleviyle JSON biçimletmesine döndürülmesi gerekir. Bu nedenle iki kez then() kullanılır. İlki edinilen içeriği JSON biçimletimine döndürmek, ikicisi de bu JSON içeriğin nesne olarak kullanmak için.

Örnek olarak aşağıdaki gibi bir işlem yapılabilir:

fetch(url)

 .then((data) =>