Photo by Jack Hamilton on Unsplash

React

Vite + React + TypeScript ile Counter Uygulaması

Vite son zamanlarda adını sıkça duyduğumuz bir Frontend Tooling aracı. Amacı Webpack’e göre daha hızlı çıktılar ve Hot Module Reloading yaparak kompleks projelerin hızlı geliştirilmesini sağlamak

Vite ile uygulama geliştirmek istediğimizde yapmamız gereken oldukça basit bir işlem var.

• Vite ortamınıza kurun.

• .code ile VSCode içerisinde projenizi açın ve aşağıdaki komutları terminalde çalıştırarak projeyi tarayıcıda deneyin.

cd counter
npm install
npm run dev

• Bu kısma kadar terminalden komut satırı çalıştırarak işlerimizi yaptık. 2 tane Counter oluşturalım. Bir tanesi functional component, diğeri ise class component oluşturalım.

Bu uygulamadaki Counter 2 default değerlerini dışarıdan tanımlayacağız.

Interface’ler üzerinden CounterProps ve CounterState tanımlayıp bunları oluşturduğumuz Function ve Class Component’larda kullanıyoruz.

Function Component

Class Component

Okumaya Devam Et 😃

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

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