React UI Mechanics
Basit Bir Hesap Makinası Nasıl Geliştirilir ?
Tarayıcı üzerinde çalışan basit bir hesap makinesi nasıl geliştirebilirsiniz ? Amacım bu tip yazılarda görsel güzellik veya tasarım değil UI Mekaniklerinin nasıl çalıştığı üzerine olacak.
Basit bir hesap makinesi nasıl yapabilirim diye düşündüğümde React Hooks ve JS kullanarak bunu basitçe yapabileceğimi düşündüm.
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 startDaha sonrasında geliştireceğimiz SimpleCalculator bu App rendering içerisine ekleyelim.
Ş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.
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ı
1.2 Kullanıcı Girdi Yöneticisi
Kullanıcı girdilerini işleten modelimizde reset, calc, push result üzerinde etkisi var.
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
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.
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.
