Vite ile React Uygulama Olu\u015fturma: Daha H\u0131zl\u0131 ve Modern Bir Alternatif<\/p>\n
Merhaba! Fatih Soysal olarak, bug\u00fcn size modern web geli\u015ftirme d\u00fcnyas\u0131nda giderek pop\u00fclerle\u015fen bir ara\u00e7 olan Vite.js ile React uygulamalar\u0131 olu\u015fturmay\u0131 detayl\u0131 bir \u015fekilde anlataca\u011f\u0131m. Bildi\u011finiz gibi, Create React App (CRA) uzun s\u00fcredir React projeleri ba\u015flatmak i\u00e7in tercih edilen y\u00f6ntemdi. Ancak Vite, sundu\u011fu \u00fcst\u00fcn performans ve geli\u015fmi\u015f \u00f6zellikleriyle CRA’ye g\u00fc\u00e7l\u00fc bir alternatif olu\u015fturuyor.<\/p>\n
\u00d6ncelikle, Vite’\u0131n ne oldu\u011funu ve neden bu kadar pop\u00fcler oldu\u011funu a\u00e7\u0131klayal\u0131m. Vite, “y\u0131ld\u0131r\u0131m h\u0131zl\u0131” anlam\u0131na gelen bir kelime olan Frans\u0131zca k\u00f6kenli bir kelimedir. Ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, Vite inan\u0131lmaz derecede h\u0131zl\u0131 bir geli\u015ftirme deneyimi sunar. Bu h\u0131z\u0131, geli\u015ftirme a\u015famas\u0131nda kullan\u0131lan “dev server” ve “build” s\u00fcre\u00e7lerini optimize ederek sa\u011flar. CRA’ye k\u0131yasla, s\u0131cak mod yeniden y\u00fckleme (hot module replacement – HMR) \u00f6zelli\u011finin \u00e7ok daha h\u0131zl\u0131 \u00e7al\u0131\u015ft\u0131\u011f\u0131 fark edilir. Bu da kod de\u011fi\u015fikliklerini an\u0131nda g\u00f6rmenizi ve daha verimli \u00e7al\u0131\u015fman\u0131z\u0131 sa\u011flar. Sonu\u00e7 olarak, geli\u015ftirme s\u00fcreniz \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131sal\u0131r.<\/p>\n
Bir React projesi olu\u015fturmak i\u00e7in Vite’\u0131 kullanmak olduk\u00e7a basittir. \u0130lk ad\u0131m olarak, npm veya yarn paket y\u00f6neticilerinden birini kullanarak Vite’\u0131 global olarak kurmal\u0131s\u0131n\u0131z:<\/p>\n
npm install -g create-vite\n<\/code><\/pre>\nVeya:<\/p>\n
yarn global add create-vite\n<\/code><\/pre>\nKurulum tamamland\u0131ktan sonra, a\u015fa\u011f\u0131daki komutu kullanarak yeni bir React projesi olu\u015fturabilirsiniz:<\/p>\n
create-vite my-react-app --template react\n<\/code><\/pre>\nBu komut, “my-react-app” adl\u0131 bir klas\u00f6r i\u00e7erisinde yeni bir React projesi olu\u015fturacakt\u0131r. “–template react” parametresi, projenin React tabanl\u0131 olmas\u0131n\u0131 sa\u011flar.<\/p>\n
Projenin Kurulumu ve \u00c7al\u0131\u015ft\u0131r\u0131lmas\u0131<\/h2>\n
Proje klas\u00f6r\u00fcne girdikten sonra, a\u015fa\u011f\u0131daki komutlarla ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyebilir ve uygulamay\u0131 \u00e7al\u0131\u015ft\u0131rabilirsiniz:<\/p>\n
cd my-react-app\nnpm install \/\/ veya yarn\nnpm run dev \/\/ veya yarn dev\n<\/code><\/pre>\nBu komutlar, proje ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00fckler ve geli\u015ftirme sunucusunu ba\u015flat\u0131r. Art\u0131k taray\u0131c\u0131n\u0131zda uygulamaya g\u00f6z atabilirsiniz.<\/p>\n
Vite’\u0131n Avantajlar\u0131<\/h2>\n
Vite’\u0131n sundu\u011fu avantajlar, sadece h\u0131zl\u0131 bir geli\u015ftirme deneyiminden ibaret de\u011fildir. Esneklik ve modern JavaScript \u00f6zellikleriyle de \u00f6ne \u00e7\u0131kar. \u00d6rne\u011fin, Vite, ES modules deste\u011fi sayesinde kod par\u00e7ac\u0131klar\u0131n\u0131 (chunks) daha etkin bir \u015fekilde y\u00fckler ve sunar. Bu sayede, uygulaman\u0131z\u0131n y\u00fckleme s\u00fcresi daha da k\u0131salt\u0131l\u0131r. Ayr\u0131ca, modern JavaScript \u00f6zelliklerini do\u011frudan kullanabilir ve geli\u015fmi\u015f bir yap\u0131land\u0131rma sistemi sayesinde projenizi \u00f6zelle\u015ftirebilirsiniz.<\/p>\n