Modern web geli\u015ftirme d\u00fcnyas\u0131nda h\u0131z, verimlilik ve kullan\u0131c\u0131 deneyimi her zamankinden daha kritik bir \u00f6neme sahiptir. \u00d6zellikle React gibi bile\u015fen tabanl\u0131 k\u00fct\u00fcphanelerle b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar geli\u015ftirirken, geli\u015ftirme s\u00fcre\u00e7lerinin olabildi\u011fince ak\u0131c\u0131 ve h\u0131zl\u0131 olmas\u0131 beklenir. Bu noktada, geleneksel derleme ara\u00e7lar\u0131n\u0131n (bundlers) kar\u015f\u0131la\u015ft\u0131\u011f\u0131 performans sorunlar\u0131, yeni nesil ara\u00e7lara olan ihtiyac\u0131 do\u011furmu\u015ftur. \u0130\u015fte tam da bu ihtiyaca cevap veren ara\u00e7lardan biri de Vite’t\u0131r. Bu makalede, React projelerinizi Vite ile nas\u0131l kuraca\u011f\u0131n\u0131z\u0131, yap\u0131land\u0131raca\u011f\u0131n\u0131z\u0131 ve geli\u015ftirme s\u00fcre\u00e7lerinizi nas\u0131l h\u0131zland\u0131raca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
React, Facebook taraf\u0131ndan geli\u015ftirilen ve kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 yap\u0131s\u0131 sayesinde karma\u015f\u0131k UI’lar\u0131 y\u00f6netilebilir par\u00e7alara ay\u0131rma ve yeniden kullan\u0131labilirlik sa\u011flama konusunda b\u00fcy\u00fck avantajlar sunar. Ancak React uygulamalar\u0131 genellikle JSX (JavaScript XML), TypeScript, CSS \u00f6n i\u015flemcileri gibi modern \u00f6zellikler kullan\u0131r. Taray\u0131c\u0131lar bu dilleri do\u011frudan anlayamad\u0131\u011f\u0131 i\u00e7in, yazd\u0131\u011f\u0131m\u0131z kodu taray\u0131c\u0131n\u0131n anlayabilece\u011fi standart JavaScript, HTML ve CSS’e d\u00f6n\u00fc\u015ft\u00fcren ara\u00e7lara ihtiya\u00e7 duyar\u0131z. Bu ara\u00e7lara “derleyici” veya “paketleyici” (bundler) denir.<\/p>\n
Uzun y\u0131llar boyunca Webpack, React projeleri i\u00e7in en yayg\u0131n kullan\u0131lan paketleyici olmu\u015ftur. Webpack, g\u00fc\u00e7l\u00fc ve esnek bir ara\u00e7 olmas\u0131na ra\u011fmen, \u00f6zellikle b\u00fcy\u00fck projelerde geli\u015ftirme sunucusunun ba\u015flamas\u0131 (cold start) ve Hot Module Replacement (HMR) s\u00fcrelerinin uzamas\u0131 gibi performans sorunlar\u0131na yol a\u00e7abilmekteydi. Bu durum, geli\u015ftiricilerin verimlili\u011fini d\u00fc\u015f\u00fcrmekte ve geli\u015ftirme d\u00f6ng\u00fclerini yava\u015flatmaktayd\u0131. Create React App (CRA) gibi ara\u00e7lar, Webpack’in karma\u015f\u0131k yap\u0131land\u0131rmas\u0131n\u0131 soyutlayarak geli\u015ftiricilere h\u0131zl\u0131 bir ba\u015flang\u0131\u00e7 noktas\u0131 sunsa da, alt\u0131nda yatan Webpack mimarisinin getirdi\u011fi performans k\u0131s\u0131tlamalar\u0131n\u0131 tamamen ortadan kald\u0131ramam\u0131\u015ft\u0131r.<\/p>\n
\u0130\u015fte tam bu noktada, modern web geli\u015ftirme ara\u00e7lar\u0131 sahneye \u00e7\u0131kt\u0131. Vite, Evan You (Vue.js’nin yarat\u0131c\u0131s\u0131) taraf\u0131ndan geli\u015ftirilen, geli\u015ftirme sunucusu ve derleme arac\u0131 kombinasyonudur. Vite, ES Mod\u00fcllerini (ESM) temel alarak geli\u015ftirme ortam\u0131nda derleme ad\u0131m\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde ortadan kald\u0131r\u0131r ve bu sayede inan\u0131lmaz derecede h\u0131zl\u0131 bir geli\u015ftirme deneyimi sunar. React ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, geli\u015ftiricilere hem tan\u0131d\u0131k bir React geli\u015ftirme ortam\u0131 hem de rakipsiz bir h\u0131z avantaj\u0131 sa\u011flar.<\/p>\n
Vite’\u0131n pop\u00fclaritesi, sundu\u011fu e\u015fsiz h\u0131z ve geli\u015ftirici deneyimi sayesinde h\u0131zla artmaktad\u0131r. Geleneksel ara\u00e7lara k\u0131yasla bir\u00e7ok \u00f6nemli avantaj\u0131 bulunmaktad\u0131r:<\/p>\n
Geleneksel paketleyiciler (\u00f6rne\u011fin Webpack), projeyi \u00e7al\u0131\u015ft\u0131rmadan \u00f6nce t\u00fcm mod\u00fclleri bir araya getirip derler. Bu “\u00f6n-paketleme” (pre-bundling) s\u00fcreci, \u00f6zellikle b\u00fcy\u00fck uygulamalarda ciddi zaman alabilir.<\/p>\n
* Yava\u015f Ba\u015flang\u0131\u00e7 S\u00fcreleri (Cold Start):<\/strong> Geli\u015ftirme sunucusunu ilk ba\u015flatt\u0131\u011f\u0131n\u0131zda, t\u00fcm uygulama kodunun taranmas\u0131, ba\u011f\u0131ml\u0131l\u0131klar\u0131n \u00e7\u00f6z\u00fcmlenmesi ve derlenmesi gerekir. Bu i\u015flem, binlerce mod\u00fcl\u00fc olan projelerde dakikalar s\u00fcrebilir. Vite, bu sorunlara modern bir yakla\u015f\u0131mla \u00e7\u00f6z\u00fcm getirir:<\/p>\n * ES Mod\u00fclleri (ESM) \u00dczerinden Geli\u015ftirme:<\/strong> Vite, geli\u015ftirme ortam\u0131nda taray\u0131c\u0131n\u0131n yerel ES Mod\u00fcl\u00fc deste\u011fini kullan\u0131r. Bu, Vite’\u0131n kodunuzu derlemeden do\u011frudan taray\u0131c\u0131ya g\u00f6nderebilece\u011fi anlam\u0131na gelir. Yaln\u0131zca taray\u0131c\u0131 bir mod\u00fcl\u00fc istedi\u011finde Vite onu i\u015fler. Bu “iste\u011fe ba\u011fl\u0131 derleme” (on-demand compilation) sayesinde geli\u015ftirme sunucusunun ba\u015flang\u0131\u00e7 s\u00fcreleri neredeyse anl\u0131kt\u0131r. K\u0131sacas\u0131, Vite geli\u015ftiricilere daha h\u0131zl\u0131 bir ba\u015flang\u0131\u00e7, daha h\u0131zl\u0131 geri bildirim d\u00f6ng\u00fcleri ve daha az yap\u0131land\u0131rma karma\u015f\u0131kl\u0131\u011f\u0131 sunarak React projelerinde geli\u015ftirme deneyimini k\u00f6kten iyile\u015ftirir.<\/p>\n React projenizi Vite ile kurmaya ba\u015flamadan \u00f6nce bilgisayar\u0131n\u0131zda baz\u0131 temel ara\u00e7lar\u0131n y\u00fckl\u00fc olmas\u0131 gerekmektedir:<\/p>\n * Node.js:<\/strong> Vite ve React projeleri Node.js \u00e7al\u0131\u015fma zaman\u0131na ihtiya\u00e7 duyar. Node.js’in LTS (Uzun S\u00fcreli Destek) s\u00fcr\u00fcm\u00fcn\u00fc indirip kurman\u0131z \u00f6nerilir. Node.js kurulumuyla birlikte npm (Node Package Manager) de otomatik olarak y\u00fcklenecektir. Bu gereksinimleri kar\u015f\u0131lad\u0131\u011f\u0131n\u0131zda, React projenizi Vite ile kurmaya haz\u0131rs\u0131n\u0131z demektir.<\/p>\n \u015eimdi, React projemizi Vite kullanarak nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6relim.<\/p>\n Vite, projenizi kolayca olu\u015fturman\u0131z i\u00e7in bir komut sat\u0131r\u0131 aray\u00fcz\u00fc (CLI) sa\u011flar. Terminalinizi a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n Bu komut, * Se\u00e7imlerinizi yapt\u0131ktan sonra, Vite projenizin temel yap\u0131s\u0131n\u0131 saniyeler i\u00e7inde olu\u015fturacakt\u0131r. Terminal \u00e7\u0131kt\u0131s\u0131 \u015funa benzer olacakt\u0131r:<\/p>\n Proje ba\u015far\u0131yla olu\u015fturulduktan sonra, terminalinizde olu\u015fturulan proje dizinine ge\u00e7meniz ve projenin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00fcklemeniz gerekir.<\/p>\n Ba\u011f\u0131ml\u0131l\u0131klar y\u00fcklendikten sonra, Vite’\u0131n s\u00fcper h\u0131zl\u0131 geli\u015ftirme sunucusunu ba\u015flatmaya haz\u0131rs\u0131n\u0131z.<\/p>\n Bu komut, Terminal \u00e7\u0131kt\u0131s\u0131 \u015funa benzer olacakt\u0131r:<\/p>\n \u015eimdi taray\u0131c\u0131n\u0131z\u0131 a\u00e7\u0131n ve verilen URL’ye gidin (\u00f6rne\u011fin, Vite ile olu\u015fturulan React projesinin temel dizin yap\u0131s\u0131n\u0131 inceleyelim:<\/p>\n *
\n* Yava\u015f Hot Module Replacement (HMR):<\/strong> Kodda k\u00fc\u00e7\u00fck bir de\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda, Webpack genellikle etkilenen mod\u00fcl\u00fc ve onun ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 yeniden derlemek zorunda kal\u0131r. B\u00fcy\u00fck projelerde bu da hissedilir bir gecikmeye yol a\u00e7abilir.
\n* Karma\u015f\u0131k Yap\u0131land\u0131rma:<\/strong> Webpack’in yap\u0131land\u0131rma dosyas\u0131 (webpack.config.js) olduk\u00e7a karma\u015f\u0131k olabilir ve bir\u00e7ok eklenti (plugins), y\u00fckleyici (loaders) ve optimizasyon ayar\u0131 gerektirebilir. Bu durum, yeni ba\u015flayanlar i\u00e7in \u00f6\u011frenme e\u011frisini art\u0131r\u0131r ve deneyimli geli\u015ftiriciler i\u00e7in de zaman kayb\u0131na neden olabilir.<\/p>\nVite’\u0131n Temel Avantajlar\u0131<\/h4>\n
\n* An\u0131nda Hot Module Replacement (HMR):<\/strong> Vite, HMR’\u0131 ESM \u00fczerine in\u015fa etmi\u015ftir. Bir dosyada de\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda, Vite sadece de\u011fi\u015fen mod\u00fcl\u00fc ve onun ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ge\u00e7ersiz k\u0131lar ve taray\u0131c\u0131ya g\u00f6nderir. Bu i\u015flem, sadece de\u011fi\u015fen kodun taray\u0131c\u0131 taraf\u0131ndan yeniden y\u00fcklenmesini sa\u011flar ve uygulama durumunu koruyarak an\u0131nda g\u00fcncellemeler sunar.
\n* H\u0131zl\u0131 Derleme (Rollup ile):<\/strong> \u00dcretim ortam\u0131 i\u00e7in Vite, Rollup’\u0131 kullan\u0131r. Rollup, ESM tabanl\u0131 uygulamalar i\u00e7in olduk\u00e7a optimize edilmi\u015f ve verimli bir paketleyicidir. Bu sayede, Vite ile olu\u015fturulan \u00fcretim derlemeleri de olduk\u00e7a h\u0131zl\u0131 ve performansl\u0131d\u0131r.
\n* Geni\u015f Eklenti Ekosistemi:<\/strong> Vite, Rollup’\u0131n eklenti aray\u00fcz\u00fcn\u00fc benimser ve kendi \u00f6zel Vite eklentileriyle bu ekosistemi geni\u015fletir. Bu sayede, \u00f6zel ihtiya\u00e7lar\u0131n\u0131za g\u00f6re kolayca geni\u015fletilebilir.
\n* Kolay Yap\u0131land\u0131rma:<\/strong> Vite’\u0131n varsay\u0131lan yap\u0131land\u0131rmas\u0131 \u00e7o\u011fu proje i\u00e7in yeterlidir. \u00d6zel bir yap\u0131land\u0131rmaya ihtiya\u00e7 duydu\u011funuzda ise vite.config.js<\/code> dosyas\u0131 olduk\u00e7a basit ve anla\u015f\u0131l\u0131rd\u0131r.
\n* TypeScript, JSX, CSS Deste\u011fi:<\/strong> Vite, kutudan \u00e7\u0131kt\u0131\u011f\u0131 gibi TypeScript, JSX ve \u00e7e\u015fitli CSS \u00f6n i\u015flemcilerini (Sass, Less, Stylus) destekler. Bu, geli\u015ftiricilerin ek yap\u0131land\u0131rma olmadan modern web teknolojilerini kullanabilece\u011fi anlam\u0131na gelir.
\n* Monorepo Deste\u011fi:<\/strong> Vite, monorepo yap\u0131lar\u0131 i\u00e7inde de olduk\u00e7a iyi \u00e7al\u0131\u015f\u0131r ve ba\u011f\u0131ml\u0131l\u0131klar\u0131n y\u00f6netimi konusunda esneklik sunar.<\/p>\n\u00d6n Gereksinimler<\/h3>\n
\n * Node.js’in kurulu olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in terminalde node -v<\/code> ve npm -v<\/code> komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rabilirsiniz.
\n* Paket Y\u00f6neticisi:<\/strong> npm, Yarn veya pnpm’den herhangi birini kullanabilirsiniz. Bu makalede \u00f6rnekler i\u00e7in npm kullan\u0131lacakt\u0131r, ancak komutlar di\u011fer paket y\u00f6neticileriyle de benzerdir.
\n* Temel Komut Sat\u0131r\u0131 Bilgisi:<\/strong> Terminal veya komut istemcisini kullanarak dizinler aras\u0131nda gezinme ve temel komutlar\u0131 \u00e7al\u0131\u015ft\u0131rma bilgisi faydal\u0131 olacakt\u0131r.
\n* Metin D\u00fczenleyici:<\/strong> Visual Studio Code (VS Code) gibi modern bir metin d\u00fczenleyici, geli\u015ftirme s\u00fcrecinizi kolayla\u015ft\u0131racakt\u0131r.<\/p>\nReact Projesi Vite ile Ad\u0131m Ad\u0131m Kurulum<\/h3>\n
1. Yeni Bir Vite Projesi Olu\u015fturma<\/h4>\n
npm create vite@latest<\/code><\/pre>\ncreate-vite<\/code> arac\u0131n\u0131 \u00e7al\u0131\u015ft\u0131racak ve size bir dizi soru sorarak projenizi yap\u0131land\u0131rman\u0131za yard\u0131mc\u0131 olacakt\u0131r:<\/p>\nProje ad\u0131:<\/code><\/strong> (\u00f6rne\u011fin: my-react-app<\/code>)
\n * Projenizin ad\u0131n\u0131 girin. Bu ayn\u0131 zamanda projenizin olu\u015fturulaca\u011f\u0131 dizinin ad\u0131 olacakt\u0131r.
\n* Bir \u00e7er\u00e7eve se\u00e7in:<\/code><\/strong> (\u00f6rne\u011fin: React<\/code>)
\n * Ok tu\u015flar\u0131n\u0131 kullanarak React<\/code>‘\u0131 se\u00e7in ve Enter’a bas\u0131n.
\n* Bir varyant se\u00e7in:<\/code><\/strong> (\u00f6rne\u011fin: JavaScript<\/code> veya TypeScript<\/code>)
\n * React i\u00e7in \u00e7e\u015fitli varyantlar sunulur: JavaScript<\/code>, TypeScript<\/code>, JavaScript + SWC<\/code>, TypeScript + SWC<\/code>. SWC (Speedy Web Compiler), Rust tabanl\u0131 h\u0131zl\u0131 bir derleyicidir ve React kodunuzu daha h\u0131zl\u0131 derleyebilir. Yeni ba\u015flayanlar i\u00e7in JavaScript<\/code> veya TypeScript<\/code> yeterli olacakt\u0131r. E\u011fer TypeScript kullanmay\u0131 planl\u0131yorsan\u0131z TypeScript<\/code> varyant\u0131n\u0131 se\u00e7in. Bu makalede JavaScript<\/code> varyant\u0131 \u00fczerinden devam edece\u011fiz.<\/p>\n\u2714 Proje ad\u0131: \u2026 my-react-app\n\u2714 Bir \u00e7er\u00e7eve se\u00e7in: \u203a React\n\u2714 Bir varyant se\u00e7in: \u203a JavaScript\n\nScaffolding project in \/Users\/kullanici\/Desktop\/my-react-app...\n\nDone. Now run:\n\n cd my-react-app\n npm install\n npm run dev<\/code><\/pre>\n2. Proje Dizinine Gitme ve Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Y\u00fckleme<\/h4>\n
cd my-react-app\nnpm install<\/code><\/pre>\nnpm install<\/code> komutu, package.json<\/code> dosyas\u0131nda belirtilen t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 (React, ReactDOM, Vite eklentileri vb.) projenizin node_modules<\/code> klas\u00f6r\u00fcne indirecektir. Bu i\u015flem, internet h\u0131z\u0131n\u0131za ve proje ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131n say\u0131s\u0131na ba\u011fl\u0131 olarak birka\u00e7 saniye veya dakika s\u00fcrebilir.<\/p>\n3. Geli\u015ftirme Sunucusunu Ba\u015flatma<\/h4>\n
npm run dev<\/code><\/pre>\npackage.json<\/code> dosyas\u0131ndaki scripts<\/code> b\u00f6l\u00fcm\u00fcnde tan\u0131mlanan dev<\/code> komutunu \u00e7al\u0131\u015ft\u0131r\u0131r. Vite, geli\u015ftirme sunucusunu ba\u015flatacak ve size uygulaman\u0131z\u0131n yerel olarak eri\u015filebilir oldu\u011fu URL’yi (genellikle http:\/\/localhost:5173<\/code>) verecektir.<\/p>\n> my-react-app@0.0.0 dev\n> vite\n\n VITE v4.4.9 ready in 186 ms\n\n \u279c Local: http:\/\/localhost:5173\/\n \u279c Network: use --host to expose\n \u279c press h to show help<\/code><\/pre>\nhttp:\/\/localhost:5173<\/code>). React uygulaman\u0131z\u0131n varsay\u0131lan Vite logosu ve React logosu ile birlikte \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6receksiniz. Tebrikler, ilk Vite ve React projenizi ba\u015far\u0131yla kurdunuz!<\/p>\n4. Proje Yap\u0131s\u0131 ve Dosyalar<\/h4>\n
my-react-app\/\n\u251c\u2500\u2500 public\/\n\u2502 \u2514\u2500\u2500 vite.svg\n\u251c\u2500\u2500 src\/\n\u2502 \u251c\u2500\u2500 assets\/\n\u2502 \u2502 \u2514\u2500\u2500 react.svg\n\u2502 \u251c\u2500\u2500 App.css\n\u2502 \u251c\u2500\u2500 App.jsx \/\/ veya App.tsx\n\u2502 \u251c\u2500\u2500 index.css\n\u2502 \u2514\u2500\u2500 main.jsx \/\/ veya main.tsx\n\u251c\u2500\u2500 .eslintrc.cjs\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 package-lock.json\n\u251c\u2500\u2500 README.md\n\u2514\u2500\u2500 vite.config.js \/\/ veya vite.config.ts<\/code><\/pre>\npublic\/<\/code><\/strong>: Statik dosyalar\u0131n\u0131z\u0131 i\u00e7eren dizindir. Bu dizindeki dosyalar do\u011frudan web sunucusunun k\u00f6k\u00fcnden sunulur ve derleme s\u00fcrecine dahil edilmez. index.html<\/code> i\u00e7inde <\/code> gibi yollarla eri\u015filebilirler.
\n* src\/<\/code><\/strong>: Uygulaman\u0131z\u0131n kaynak kodunu i\u00e7erir.
\n * src\/assets\/<\/code><\/strong>: Uygulaman\u0131z\u0131n resim, font gibi statik varl\u0131klar\u0131n\u0131 i\u00e7erir. Vite, bu varl\u0131klar\u0131 derleme s\u00fcrecinde i\u015fler.
\n * src\/App.jsx<\/code><\/strong>: Ana React bile\u015feninizdir. Uygulaman\u0131z\u0131n temel layout’u ve bile\u015fenleri burada tan\u0131mlan\u0131r.
\n * src\/main.jsx<\/code><\/strong>: Uygulaman\u0131z\u0131n giri\u015f noktas\u0131d\u0131r. React uygulaman\u0131z\u0131n DOM’a ba\u011fland\u0131\u011f\u0131 yerdir. ReactDOM.createRoot<\/code> ve root.render<\/code> burada kullan\u0131l\u0131r.
\n * src\/App.css<\/code><\/strong> ve src\/index.css<\/code><\/strong>: Uygulaman\u0131z\u0131n stil dosyalar\u0131d\u0131r.
\n* .eslintrc.cjs<\/code><\/strong>: ESLint yap\u0131land\u0131rma dosyas\u0131d\u0131r. Kod kalitesini ve tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flamak i\u00e7in kullan\u0131l\u0131r.
\n* .gitignore<\/code><\/strong>: Git versiyon kontrol sistemi taraf\u0131ndan izlenmemesi gereken dosya ve dizinleri belirtir.
\n* index.html<\/code><\/strong>: Uygulaman\u0131z\u0131n tek HTML dosyas\u0131d\u0131r. Vite, geli\u015ftirme s\u0131ras\u0131nda bu dosyay\u0131 entry point olarak kullan\u0131r.