Photo by David Clode on Unsplash

React UI Mechanics

Basit Bir Hesap Makinası Nasıl Geliştirilir ?

Basit bir hesap makinesi nasıl yapabilirim diye düşündüğümde React Hooks ve JS kullanarak bunu basitçe yapabileceğimi düşündüm.

Hesap Makine

Amacım yukarıdaki gibi basit bir Hesap makinesi geliştirebilmek. Bu konuyu basitçe anlatabilmek için görsellikten ve fonksiyonlarından feragat ederek olabildiğince basit bir Hesap Makinesi geliştireceğim.

İlk önce bir altyapı oluşturmalıydım. Bunun için React sunduğu Create React App kullanarak altyapımızı oluşturalım.

npx create-react-app simple-calculator
cd simple-calculator
npm start

Daha sonrasında geliştireceğimiz SimpleCalculator bu App rendering içerisine ekleyelim.

App JSX içerisinde kendi SimpleCalculator Comp

Şu anda SimpleCalculator içerisinde sadece basit bir metin olarak “Basit Hesap Makinesi“ yazsa yeter. Bunu zaman içerisinde geliştireceğiz.

Geliştireceğimiz kodu 2 kısımdan düşünebiliriz.

  • Hesap Makinesi Mekaniği ve Modelini tutan kısmı
  • Bunu Ekrandan Gösteren ve Kullanıcı Komutlarını dinleyen React kod kısmı.

Aşağıdaki ekran görüntüsünden de görüleceği gibi Math Part Hesap Makine Mekaniğini ve modelini tutuyor. UI & Interaction Part hesap makinesinin görüntüsünü oluşturan kısmında Fonksiyon, Rakam, Komut düğmeleri ve Ekrandan oluşur.

Math / UI and Interaction Part

1. Hesap Makinesi Mekaniği ve Modelini Tutan Kısmı

En basit haliyle bizim hesap makinemiz 4 işlemi yapıyor olması lazım. Toplama, Çıkarma, Bölme ve Çarpma işlemlerini modellememiz gerekiyor. Kendisine arr argüman verdiğimizde bunun üzerinde reducer ile ilgili işlemi gerçekleştirir.

1.1 Hesap Mekanizması

Matematiksel Fonksiyonlar

1.2 Kullanıcı Girdi Yöneticisi

Kullanıcı girdilerini işleten modelimizde reset, calc, push result üzerinde etkisi var.

User Interaction Handlers on Calculator

Reset: Result değerini boş string atayacak yani bunun karşılığı Screen bunu ekrana basarken 0 olarak basacak

const val = props.value === '' ? 0 : props.value;

Calculate: Kullanıcı ekrana bazı işlemler girdiğini varsayalım 3+5 bunun sonrasında = düğmesine bastığında doCalculation işletilir. Burda tüm durumları(case) düşünmemiz lazım. Kullanıcı aşağıdaki sıralarda düğmelere bassın.

  • Durum1:[3,+,5,=], Durum2:[=], Durum3: [3=]

Eşittir düğmesi basılınca calc kendisinden önce basılan değerlere bakacak bu değerin içerisinde önceden yazılmış toplama, çıkarma ve diğer 4 işlemden birisi varsa işlemi yapacak yoksa aynı değerini döner.

//When User Clicks =
const calc = () => {
const op = isOpExist();
result = doCalculation(op);
return result;
}

Push: İse bizim bastığımız Rakam ve 4 işlem fonksiyonlarını ele alır. Basılan değerleri result ekler. Örneğin 34+332 şeklinde..

//When User Clicks Numbers/Functions
const push = (val) => {
const op = isOpExist();
if (op && opsMeta.includes(val)) {
result = doCalculation(op);
}
result += val;
return result;
}

Burda eğer kullanıcı bu işlemlerden sonra 34+332 sonra 4 işlem fonksiyonundan birisine basarsa sanki öncesinde = basmış gibi algılayıp önce bu işlemi yapıp sonrasında 366 + result değerine yazar.

Not: Burda Result içerisinde hangi 4 işlem Op olduğunu bulmaya çalışıyoruz eğer yoksa false değeri döner.

const isOpExist = () => {
let flag = false;
opsMeta.forEach(el => {
if (result.includes(el)) flag = el;
});
return flag;
}

1.3 Hesap Mekanizması Yöneticisi

Result içerisinde bulduğumuz op göre Result split edip oluşan arr ilgili 4 işlem fonksiyonuna 1.1 Hesap Mekanizmasının işlemesini sağlatırız.

const doCalculation = (op) => {
if (op) {
const arr = result.split(op);
const arrInt = arr.map(el => parseInt(el));
switch (op) {
case '+':
return sum(arrInt) + '';
case '-':
return sub(arrInt) + '';
case '*':
return mul(arrInt) + '';
case '/':
return div(arrInt) + '';
default:
return '';
}
}
}

2. Hesap Makinesi Ekran ve Kullanıcı Etkileşimi

Hesap Makinesi temelde 4 parçadan oluşuyor

  • Ekran
  • Fonksiyon Düğmeleri
  • Rakam Düğmeleri
  • Komut Düğmeleri

Şimdi bunu React içerisinde olabilmesi için Düğme ve Ekran bileşenlerine ihtiyacımız var.

const Button = (props) => {
return (<button onClick={props.onClickHandler}>{props.title}</button>)
}
const Screen = (props) => {
const val = props.value === '' ? 0 : props.value;
return (<div>{val}</div>)
}

2.1 Düğmeleri Oluşturma

Ben düğmeleri oluşturmadan önce onların data modellerini oluşturmayı daha doğru olduğunu düşünüyorum.

Operation Düğme Modeli

const opButtonsData = [
{title: '+', val: '+'},
{title: '-', val: '-'},
{title: '*', val: '*'},
{title: '/', val: '/'},
]

1'den 10'a Kadar Rakam Modeli

const numButtonsDataGen = (limit) => {
const numArr = [];
for (let i = 0; i < limit; i++)
numArr.push({title: `${i}`, val: i});
return numArr;
}
const numButtonsData10 = numButtonsDataGen(10);

Yukarıdaki kısım Düğme Modellerini oluşturdu. Reset ve Calc tek tek oluşturacağız Şimdi bu düğmeleri kodda nasıl oluşturduğumuza bakalım. map ile düğme model array dönerek bunları Düğme JSX array dönüştürüyoruz. Bu konu Functor konusunda anlatmıştım

Fonskiyon ve Rakam Düğmelerini Oluşturuyoruz.

Not: Bu kısımda önemli olan düğmelere basılınca hangi fonksiyonları çağıracağımızı onClickHandler bağlamamız calc = yani hesap makinemize işlemi yap bize dön diyoruz. Dönen sonucuda setResult içerisinde geçiyoruz.

Ekrandaki result değeri Hook ile state olarak tanımlıyoruz. Bunu kullanmamız önemli çünkü React bileşenleri State,Props değişikliklerinde bileşen rendering tekrardan çağıracaktır. Ekranın yenilenmesi için bu state değişikliğinin olmasını sağlamalısınız .

const [result, setResult] = useState('');

2.2 Rendering

Hesap Makinesinin hepsini ekrana renderlemek için return içerisinde tüm düğmeler ile ekran bileşenini render etmeniz yeterli.

SimpleCalculator

Basit ama UI Mekaniğini anlatması açısından güzel bir örnek olduğunu düşünüyorum. İleride aklıma böyle örnekler geldikçe bu seriye devam etmeyi düşünüyorum. 😃 . İçeriği beğendiyseniz lütfen paylaşmayı ve 👏 alkışlamayı unutmayın. İyi çalışmalar.

3. Kod

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara (React Hooks) erişmek için bu linke tıklayabilirsiniz.

Bu yazının devamı veya yazı grubundaki diğer yazılara (React Arayüz Mekanikleri) erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store