Bu yazımda sizlere React ile Counter Uygulaması’nın nasıl yapılacağını anlatacağım.
İlk olarak yeni bir React projesi oluşturalım. Bunun için ‘Create React App ile Hazır React Projesi Oluşturma yazımdan faydalanabilirsiniz.
Yeni bir React projesi oluşturduğunuzu varsayarak devam ediyorum.
Küçük bir uygulama olacağı için tüm kodlarımı App.js içerisine yazacağım.
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { useState } from 'react'; const App = () => { const [count, setCount] = useState(0); return ( <div> <p>Counter: {count}</p> <button onClick={() => setCount(count + 1)}>Increase</button> <button onClick={() => setCount(count - 1)}>Decrease</button> </div> ); }; export default App; |
Şimdi yazdığımız kodları inceleyelim:
⇒ useState React Hook’ını kullanarak count adında bir state (durum) oluşturduk. Bu state, sayaç değerimizi tutacak.
⇒ count state’inin başlangıç değeri 0.
⇒ setCount fonksiyonu, count state’ini güncellemek için kullanılıyor.
⇒ Her bir butona tıklandığında, onClick event handler’ı setCount fonksiyonunu çağırıyor ve count değerini artırıyor veya azaltıyor.
Evet, uygulamamız bu şekilde.
Artık terminalde aşağıdaki komutu yazarak uygulamamızı başlatabiliriz:
|
1 2 3 |
npm start |
Uygulama tarayıcıda açıldığında başarılı bir şekilde çalıştığını göreceksiniz.
Umarım ‘React ile Counter Uygulaması‘ başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir:
React Nedir? Neden React’i Tercih Etmeliyim?
Bir sonraki yazımda görüşmek üzere.
Happy Coding!
