Modern web geli\u015ftirmenin h\u0131zla de\u011fi\u015fen d\u00fcnyas\u0131nda, React uygulamalar\u0131 karma\u015f\u0131kl\u0131k a\u00e7\u0131s\u0131ndan s\u00fcrekli b\u00fcy\u00fcmektedir. B\u00fcy\u00fck ve bak\u0131m\u0131 kolay uygulamalar in\u015fa etmenin temel ta\u015flar\u0131ndan biri, kod taban\u0131n\u0131n genel d\u00fczenidir. Bu d\u00fczenin en s\u0131k g\u00f6z ard\u0131 edilen ancak en kritik y\u00f6nlerinden biri de import ifadeleridir. Temiz, d\u00fczenli ve stratejik olarak tasarlanm\u0131\u015f import ifadeleri, bir projenin okunabilirli\u011fini, bak\u0131m\u0131n\u0131 ve \u00f6zellikle yeniden d\u00fczenleme (refactoring) s\u00fcre\u00e7lerinin verimlili\u011fini do\u011frudan etkiler. Bu makalede, React uygulamalar\u0131n\u0131zda s\u00fcper temiz ve refactor dostu import ifadeleri olu\u015fturman\u0131n inceliklerini, en iyi uygulamalar\u0131n\u0131, ara\u00e7lar\u0131n\u0131 ve stratejilerini derinlemesine inceleyece\u011fiz.<\/p>\n
Import ifadeleri, bir dosyan\u0131n hangi d\u0131\u015f ba\u011f\u0131ml\u0131l\u0131klara sahip oldu\u011funu g\u00f6steren bir “i\u00e7indekiler tablosu” gibidir. Bu tablolar\u0131n d\u00fczenli olmas\u0131, kodun genel sa\u011fl\u0131\u011f\u0131 i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n
Karma\u015f\u0131k bir dosyan\u0131n ba\u015f\u0131nda d\u00fczensiz ve uzun import listeleri, geli\u015ftiricinin kodu anlamaya ba\u015flamadan \u00f6nce gereksiz bir zihinsel y\u00fck olu\u015fturur. Temiz importlar, bir bak\u0131\u015fta dosyan\u0131n ne t\u00fcr bile\u015fenler, kancalar veya yard\u0131mc\u0131 fonksiyonlar kulland\u0131\u011f\u0131n\u0131 anlamay\u0131 kolayla\u015ft\u0131r\u0131r. Grupland\u0131r\u0131lm\u0131\u015f, s\u0131ralanm\u0131\u015f ve tutarl\u0131 bir yap\u0131ya sahip importlar, dosyan\u0131n amac\u0131n\u0131 ve ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 h\u0131zl\u0131ca kavramam\u0131z\u0131 sa\u011flar. Bu, \u00f6zellikle yeni bir geli\u015ftiricinin projeye adapte olmas\u0131 veya mevcut bir geli\u015ftiricinin uzun zaman sonra bir dosyaya geri d\u00f6nmesi durumunda b\u00fcy\u00fck avantaj sa\u011flar.<\/p>\n
Uygulamalar b\u00fcy\u00fcd\u00fck\u00e7e, mod\u00fcllerin ve bile\u015fenlerin yerleri de\u011fi\u015febilir, isimleri g\u00fcncellenebilir veya ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015febilir. E\u011fer import ifadeleri karma\u015f\u0131ksa, bu t\u00fcr de\u011fi\u015fiklikler “import hell” olarak bilinen bir duruma yol a\u00e7abilir. Her dosyadaki import yolunu manuel olarak g\u00fcncellemek hem zaman al\u0131c\u0131 hem de hataya a\u00e7\u0131kt\u0131r. Temiz ve stratejik importlar (\u00f6rne\u011fin, mutlak importlar veya takma adlar), bu bak\u0131m y\u00fck\u00fcn\u00fc \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. Bir mod\u00fcl\u00fcn i\u00e7 yap\u0131s\u0131 de\u011fi\u015fse bile, onu kullanan di\u011fer mod\u00fcllerin import yollar\u0131 de\u011fi\u015fmeyebilir, bu da de\u011fi\u015fikliklerin etkisini s\u0131n\u0131rlar.<\/p>\n
Refactoring, mevcut kodun d\u0131\u015f davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirmeden i\u00e7 yap\u0131s\u0131n\u0131 iyile\u015ftirme s\u00fcrecidir. Bu s\u00fcre\u00e7te, bile\u015fenlerin veya fonksiyonlar\u0131n farkl\u0131 dizinlere ta\u015f\u0131nmas\u0131, farkl\u0131 mod\u00fcllere ayr\u0131lmas\u0131 veya birle\u015ftirilmesi s\u0131k\u00e7a g\u00f6r\u00fcl\u00fcr. E\u011fer import ifadeleri g\u00f6receli yollarla ( D\u00fczensiz importlar, \u00f6zellikle b\u00fcy\u00fck ekiplerde, ayn\u0131 mod\u00fcl\u00fcn farkl\u0131 yollarla import edilmesi gibi \u00e7ak\u0131\u015fmalara yol a\u00e7abilir. Bu durum, gereksiz kod tekrar\u0131na, paket boyutunun artmas\u0131na ve hatta \u00e7al\u0131\u015fma zaman\u0131 hatalar\u0131na neden olabilir. Tutarl\u0131 bir import stratejisi ve otomatik d\u00fczenleme ara\u00e7lar\u0131 kullanarak bu t\u00fcr hatalar\u0131n \u00f6n\u00fcne ge\u00e7ilebilir.<\/p>\n Son olarak, temiz importlar geli\u015ftirici deneyimini art\u0131r\u0131r. Geli\u015ftiriciler, kodun okunabilir ve bak\u0131m\u0131 kolay oldu\u011funu bildiklerinde daha mutlu ve \u00fcretken olurlar. Daha az hata ay\u0131klama s\u00fcresi, daha h\u0131zl\u0131 \u00f6zellik geli\u015ftirme ve daha az “import d\u00fczeltme” i\u015fi, genel proje verimlili\u011fini art\u0131r\u0131r.<\/p>\n Import ifadelerini optimize etmek i\u00e7in farkl\u0131 t\u00fcrlerini ve ne zaman kullan\u0131lmalar\u0131 gerekti\u011fini anlamak \u00f6nemlidir.<\/p>\n * Named Imports:<\/b> Bir mod\u00fclden birden fazla \u00f6\u011feyi (fonksiyonlar, de\u011fi\u015fkenler, bile\u015fenler vb.) s\u00fcsl\u00fc parantez i\u00e7inde ayr\u0131 ayr\u0131 import etmek i\u00e7in kullan\u0131l\u0131r. Tree-shaking i\u00e7in daha iyidir, \u00e7\u00fcnk\u00fc sadece kullan\u0131lan \u00f6\u011feler paketlenir. Mod\u00fcl\u00fcn API’sini daha a\u00e7\u0131k hale getirir. Genel olarak, m\u00fcmk\u00fcn oldu\u011funca Absolute importlar, projenin k\u00f6k dizinine g\u00f6re tan\u0131mlanan import yollar\u0131d\u0131r. G\u00f6receli yollar\u0131n ( Mutlak importlar\u0131n faydalar\u0131 \u015funlard\u0131r: Mutlak importlar\u0131 etkinle\u015ftirmek i\u00e7in Projenizin k\u00f6k dizininde bir Bu yap\u0131land\u0131rma ile, Alias importlar, mutlak importlara benzer ancak daha spesifik takma adlar tan\u0131mlaman\u0131za olanak tan\u0131r. \u00d6zellikle belirli dizinler (\u00f6rne\u011fin, Bu yap\u0131land\u0131rma ile, G\u00f6receli importlar, mevcut dosyan\u0131n konumuna g\u00f6re ba\u015fka bir dosyan\u0131n konumunu belirtir ( Relative importlar, genellikle ayn\u0131 dizin i\u00e7indeki veya hemen bir \u00fcst\/alt dizindeki mod\u00fcller i\u00e7in kabul edilebilir. Ancak, yol Tutarl\u0131 bir d\u00fczenleme stratejisi, import ifadelerinin okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n Import ifadelerini belirli kategorilere g\u00f6re grupland\u0131rmak ve her grubu kendi i\u00e7inde alfabetik olarak s\u0131ralamak, en yayg\u0131n ve etkili stratejidir. \u00d6nerilen gruplama s\u0131ras\u0131 genellikle \u015f\u00f6yledir:<\/p>\n 1. Harici K\u00fct\u00fcphaneler (React, React Router, Redux, vb.):<\/b><\/p>\n 2. \u00dc\u00e7\u00fcnc\u00fc Taraf K\u00fct\u00fcphaneler (lodash, axios, material-ui, vb.):<\/b><\/p>\n 3. Mutlak Importlar (kendi mod\u00fcllerimiz, 4. Takma Ad Importlar (aliaslar, 5. G\u00f6receli Importlar (ayn\u0131 dizin veya yak\u0131n dizinler):<\/b><\/p>\n 6. CSS\/SCSS\/Resim Importlar\u0131 (en sonda):<\/b><\/p>\n Her grup aras\u0131nda bir bo\u015f sat\u0131r b\u0131rakmak, g\u00f6rsel ayr\u0131m\u0131 ve okunabilirli\u011fi art\u0131r\u0131r.<\/p>\n Gruplar aras\u0131nda tek bir bo\u015f sat\u0131r b\u0131rakmak, kodun daha nefes almas\u0131n\u0131 sa\u011flar ve farkl\u0131 ba\u011f\u0131ml\u0131l\u0131k kategorilerini an\u0131nda ay\u0131rt etmeye yard\u0131mc\u0131 olur.<\/p>\n Ayn\u0131 mod\u00fclden birden fazla named import al\u0131rken, bunlar\u0131 tek bir sat\u0131rda toplamak genel olarak tercih edilir. Ancak, sat\u0131r uzunlu\u011fu \u00e7ok uzad\u0131\u011f\u0131nda veya import edilen \u00f6\u011feler \u00e7ok fazla oldu\u011funda, her \u00f6\u011feyi ayr\u0131 bir sat\u0131ra b\u00f6lmek daha okunabilir olabilir.<\/p>\n Barrel dosyalar\u0131 (genellikle Diyelim ki Bir barrel dosyas\u0131 ( Art\u0131k bunlar\u0131 tek bir sat\u0131rda import edebilirsiniz:<\/p>\n * Tek Bir Yerden Import:<\/b> \u0130lgili bile\u015fenleri veya fonksiyonlar\u0131 tek bir import ifadesiyle almay\u0131 sa\u011flar. * Tree-Shaking Sorunlar\u0131:<\/b> Baz\u0131 bundler’lar (\u00f6zellikle eski s\u00fcr\u00fcmleri), barrel dosyas\u0131ndan sadece bir \u00f6\u011fe import edildi\u011finde bile t\u00fcm mod\u00fcl\u00fc paketleyebilir. Bu, paket boyutunu art\u0131rabilir. Modern bundler’lar (Webpack 5, Rollup) genellikle bu sorunu daha iyi y\u00f6netir. Barrel dosyalar\u0131, k\u00fc\u00e7\u00fck, yak\u0131ndan ili\u015fkili ve s\u0131k\u00e7a birlikte kullan\u0131lan mod\u00fcllerin bulundu\u011fu dizinler i\u00e7in en uygundur. \u00d6rne\u011fin, bir “UI Kit” i\u00e7indeki temel bile\u015fenler veya bir “utils” dizinindeki yard\u0131mc\u0131 fonksiyonlar. \u00c7ok b\u00fcy\u00fck veya seyrek kullan\u0131lan mod\u00fcller i\u00e7in dikkatli olmak gerekir.<\/p>\n Manuel d\u00fczenleme \u00e7abas\u0131, \u00f6zellikle b\u00fcy\u00fck ekiplerde veya projelerde tutarl\u0131l\u0131\u011f\u0131 sa\u011flamak i\u00e7in yeterli olmayabilir. Otomatik ara\u00e7lar bu s\u00fcre\u00e7te kritik bir rol oynar.<\/p>\n ESLint, kod kalitesini ve stilini zorlamak i\u00e7in kullan\u0131lan pop\u00fcler bir ara\u00e7t\u0131r. Bu yap\u0131land\u0131rma, importlar\u0131n belirli bir s\u0131raya g\u00f6re grupland\u0131r\u0131lmas\u0131n\u0131, gruplar aras\u0131nda bo\u015f sat\u0131r olmas\u0131n\u0131 ve her grubun i\u00e7inde alfabetik olarak s\u0131ralanmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, \u00e7\u00f6z\u00fcmlenemeyen veya yinelenen importlar\u0131 da tespit eder.<\/p>\n Prettier, kodunuzu tutarl\u0131 bir \u015fekilde formatlayan bir “opinionated code formatter”d\u0131r. ESLint ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, import ifadelerinin otomatik olarak belirli bir stile uymas\u0131n\u0131 sa\u011flar. Prettier, importlar\u0131n s\u0131ras\u0131n\u0131 veya grupland\u0131rmas\u0131n\u0131 do\u011frudan y\u00f6netmese de, sat\u0131r uzunlu\u011fu, noktalama i\u015faretleri gibi stilistik konular\u0131 halleder. ESLint’in Visual Studio Code, geli\u015ftiricilerin hayat\u0131n\u0131 kolayla\u015ft\u0131ran bir\u00e7ok \u00f6zelli\u011fe sahiptir. “Organize Imports” \u00f6zelli\u011fi (Shift + Alt + O veya Command + Shift + O), kullan\u0131lmayan importlar\u0131 kald\u0131r\u0131r ve kalanlar\u0131 alfabetik olarak s\u0131ralar. ESLint ve Prettier ile entegre edildi\u011finde, kaydetme an\u0131nda (on-save) otomatik d\u00fczenleme yapmak, geli\u015ftirme ak\u0131\u015f\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r.<\/p>\n Temiz importlar, refactoring’i kolayla\u015ft\u0131r\u0131r, ancak refactoring’i daha da g\u00fc\u00e7lendiren baz\u0131 mimari yakla\u015f\u0131mlar da vard\u0131r.<\/p>\n Her mod\u00fcl\u00fcn (bile\u015fen, hook, yard\u0131mc\u0131 fonksiyon vb.) tek bir sorumlulu\u011fu olmal\u0131 ve bu sorumlulu\u011fu a\u00e7\u0131k\u00e7a tan\u0131mlanm\u0131\u015f bir API arac\u0131l\u0131\u011f\u0131yla d\u0131\u015fa aktarmal\u0131d\u0131r. Bu, mod\u00fcllerin ba\u011f\u0131ms\u0131zl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r ve bir mod\u00fcl\u00fcn i\u00e7 yap\u0131s\u0131 de\u011fi\u015fti\u011finde di\u011fer mod\u00fcller \u00fczerindeki etkiyi s\u0131n\u0131rlar. Net s\u0131n\u0131rlar, import ifadelerinin de daha anlaml\u0131 ve istikrarl\u0131 olmas\u0131n\u0131 sa\u011flar.<\/p>\n “Dependency Rule” (Ba\u011f\u0131ml\u0131l\u0131k Kural\u0131) olarak bilinen prensibe g\u00f6re, daha y\u00fcksek seviyeli mod\u00fcller (i\u015f mant\u0131\u011f\u0131, UI bile\u015fenleri) daha d\u00fc\u015f\u00fck seviyeli mod\u00fcllere (yard\u0131mc\u0131 fonksiyonlar, veri eri\u015fim katman\u0131) ba\u011f\u0131ml\u0131 olmal\u0131d\u0131r. Tersine ba\u011f\u0131ml\u0131l\u0131klardan (dairesel ba\u011f\u0131ml\u0131l\u0131klar) ka\u00e7\u0131n\u0131lmal\u0131d\u0131r. Bu kurala uymak, kod taban\u0131n\u0131 daha esnek ve bak\u0131m\u0131 kolay hale getirir, ayn\u0131 zamanda import d\u00f6ng\u00fclerini \u00f6nler.<\/p>\n Barrel dosyalar\u0131, yeniden d\u0131\u015fa aktarman\u0131n bir bi\u00e7imidir. Ancak, daha geni\u015f bir ba\u011flamda, bir mod\u00fcl\u00fcn ba\u015fka bir mod\u00fcl\u00fcn d\u0131\u015fa aktard\u0131\u011f\u0131 \u00f6\u011feleri kendi API’sinin bir par\u00e7as\u0131 olarak yeniden d\u0131\u015fa aktarmas\u0131 da refactoring’i kolayla\u015ft\u0131rabilir. \u00d6rne\u011fin, bir TypeScript kullan\u0131yorsan\u0131z, sadece t\u00fcrleri import etti\u011finizde Bu, \u00f6zellikle dairesel ba\u011f\u0131ml\u0131l\u0131klar\u0131n tip importlar\u0131 nedeniyle olu\u015ftu\u011fu durumlarda sorunlar\u0131 \u00e7\u00f6zebilir.<\/p>\n Temiz import ifadeleri olu\u015ftururken ka\u00e7\u0131n\u0131lmas\u0131 gereken baz\u0131 yayg\u0131n hatalar vard\u0131r:<\/p>\n * \u00c7ok Uzun G\u00f6receli Yollar:<\/b> React uygulamalar\u0131nda s\u00fcper temiz ve refactor dostu import ifadeleri olu\u015fturmak, sadece estetik bir tercih de\u011fil, ayn\u0131 zamanda uzun vadeli proje sa\u011fl\u0131\u011f\u0131 ve geli\u015ftirici verimlili\u011fi i\u00e7in kritik bir yat\u0131r\u0131md\u0131r. Mutlak ve takma ad importlar\u0131n\u0131 benimseyerek, import ifadelerini grupland\u0131r\u0131p s\u0131ralayarak ve ESLint ile Prettier gibi otomatik ara\u00e7lar\u0131 kullanarak, kod taban\u0131n\u0131z\u0131n okunabilirli\u011fini, bak\u0131m\u0131n\u0131 ve refactoring kabiliyetini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilirsiniz. Bu stratejiler, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, geli\u015ftirme s\u00fcrecini daha keyifli ve verimli hale getirerek, uygulaman\u0131z\u0131n gelecekteki b\u00fcy\u00fcmesine ve evrimine sa\u011flam bir temel haz\u0131rlar. Unutmay\u0131n, temiz importlar sadece kodun bir par\u00e7as\u0131 de\u011fil, ayn\u0131 zamanda iyi bir yaz\u0131l\u0131m mimarisinin g\u00f6stergesidir.<\/p>\n..\/..\/..\/<\/code>) doluysa, bir dosyan\u0131n yerini de\u011fi\u015ftirmek, onu kullanan y\u00fczlerce dosyadaki import yolunu g\u00fcncellemek anlam\u0131na gelebilir. Mutlak importlar veya takma adlar kullan\u0131ld\u0131\u011f\u0131nda ise, bir dosyan\u0131n i\u00e7 yap\u0131s\u0131 veya konumu de\u011fi\u015fse bile, onu \u00e7a\u011f\u0131ran dosyalar\u0131n import ifadeleri genellikle ayn\u0131 kal\u0131r veya \u00e7ok daha az de\u011fi\u015fikli\u011fe ihtiya\u00e7 duyar. Bu, refactoring’i daha az korkutucu ve daha verimli hale getirir.<\/p>\n\u00c7ak\u0131\u015fmalar\u0131n ve Hatalar\u0131n Azalt\u0131lmas\u0131<\/h4>\n
Geli\u015ftirici Deneyimi<\/h4>\n
Temel Import T\u00fcrleri ve En \u0130yi Uygulamalar<\/h3>\n
Named Imports vs. Default Imports<\/h4>\n
\/\/ Named Import\nimport { useState, useEffect } from 'react';\n\n\/\/ Default Import\nimport React from 'react';\nimport MyComponent from '.\/MyComponent';<\/code><\/pre>\n
\n* Default Imports:<\/b> Bir mod\u00fclden tek bir ana \u00f6\u011feyi import etmek i\u00e7in kullan\u0131l\u0131r. Genellikle birincil bile\u015fen veya ana fonksiyon i\u00e7in tercih edilir. \u0130simlendirme esnekli\u011fi sunar (import ederken farkl\u0131 bir isim verilebilir), ancak tree-shaking potansiyelini azaltabilir.<\/p>\nnamed imports<\/code> kullanmak, kodun daha mod\u00fcler ve tree-shaking dostu olmas\u0131na yard\u0131mc\u0131 olur. Ancak, bir mod\u00fcl\u00fcn a\u00e7\u0131k\u00e7a tek bir ana ihracat\u0131 varsa, default import<\/code> kullanmak da kabul edilebilir.<\/p>\nAbsolute Imports<\/h4>\n
..\/..\/<\/code>) aksine, dosyan\u0131n projedeki mutlak konumunu belirtir.<\/p>\n\/\/ G\u00f6receli import (k\u00f6t\u00fc \u00f6rnek)\nimport Button from '..\/..\/..\/..\/components\/Button';\n\n\/\/ Mutlak import (iyi \u00f6rnek)\nimport Button from 'components\/Button';<\/code><\/pre>\n
\n* Okunabilirlik:<\/b> Yollar daha k\u0131sa ve daha anla\u015f\u0131l\u0131rd\u0131r.
\n* Refactoring Kolayl\u0131\u011f\u0131:<\/b> Bir dosya ta\u015f\u0131nd\u0131\u011f\u0131nda, onu import eden di\u011fer dosyalar\u0131n yollar\u0131 genellikle de\u011fi\u015fmez.
\n* Tutarl\u0131l\u0131k:<\/b> T\u00fcm ekip \u00fcyeleri ayn\u0131 import stilini kullan\u0131r.<\/p>\njsconfig.json<\/code> (JavaScript projeleri i\u00e7in) veya tsconfig.json<\/code> (TypeScript projeleri i\u00e7in) dosyalar\u0131n\u0131 kullanman\u0131z gerekir.<\/p>\njsconfig.json<\/code> veya tsconfig.json<\/code> ile Yap\u0131land\u0131rma<\/h5>\njsconfig.json<\/code> veya tsconfig.json<\/code> dosyas\u0131 olu\u015fturun (e\u011fer yoksa) ve compilerOptions<\/code> alt\u0131na baseUrl<\/code> ve iste\u011fe ba\u011fl\u0131 olarak paths<\/code> ekleyin.<\/p>\n\/\/ jsconfig.json \u00f6rne\u011fi\n{\n \"compilerOptions\": {\n \"baseUrl\": \"src\", \/\/ Projenizin kaynak kodunun ba\u015flad\u0131\u011f\u0131 dizin\n \"jsx\": \"react-jsx\"\n },\n \"include\": [\"src\"]\n}<\/code><\/pre>\nsrc<\/code> dizini alt\u0131ndaki herhangi bir dosyay\u0131 do\u011frudan components\/Button<\/code> gibi import edebilirsiniz. \u00d6rne\u011fin, src\/components\/Button.jsx<\/code> dosyas\u0131n\u0131 import Button from 'components\/Button';<\/code> \u015feklinde kullanabilirsiniz.<\/p>\nAlias Imports<\/h4>\n
@components<\/code>, @utils<\/code>, @hooks<\/code>) i\u00e7in k\u0131sa ve anlaml\u0131 isimler vermek istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\/\/ Alias import \u00f6rne\u011fi\nimport MyHook from '@hooks\/useMyHook';\nimport { calculateTotal } from '@utils\/math';<\/code><\/pre>\nYap\u0131land\u0131rma Detaylar\u0131<\/h5>\n
tsconfig.json<\/code> (TypeScript) veya jsconfig.json<\/code> (JavaScript) dosyas\u0131nda paths<\/code> \u00f6zelli\u011fini kullanarak takma adlar\u0131 tan\u0131mlayabilirsiniz:<\/p>\n\/\/ tsconfig.json veya jsconfig.json \u00f6rne\u011fi\n{\n \"compilerOptions\": {\n \"baseUrl\": \".\", \/\/ K\u00f6k dizin\n \"paths\": {\n \"@components\/\": [\"src\/components\/<\/em>\"],\n \"@hooks\/\": [\"src\/hooks\/<\/em>\"],\n \"@utils\/\": [\"src\/utils\/<\/em>\"],\n \"@assets\/\": [\"src\/assets\/<\/em>\"]\n },\n \"jsx\": \"react-jsx\"\n },\n \"include\": [\"src\"]\n}<\/code><\/pre>\nsrc\/components\/Button.jsx<\/code> dosyas\u0131n\u0131 import Button from '@components\/Button';<\/code> \u015feklinde kullanabilirsiniz. Alias importlar, projenin yap\u0131s\u0131n\u0131 daha a\u00e7\u0131k hale getirir ve import ifadelerini daha da k\u0131salt\u0131r.<\/p>\nRelative Imports<\/h4>\n
.\/<\/code>, ..\/<\/code>).<\/p>\n\/\/ Ayn\u0131 dizindeki bir dosyay\u0131 import etme\nimport Helper from '.\/Helper';\n\n\/\/ \u00dcst dizindeki bir dosyay\u0131 import etme\nimport Layout from '..\/Layout';<\/code><\/pre>\n..\/..\/<\/code> gibi uzad\u0131\u011f\u0131nda, mutlak veya takma ad importlar\u0131na ge\u00e7mek daha iyidir. A\u015f\u0131r\u0131 g\u00f6receli yollar, refactoring kabuslar\u0131na davetiye \u00e7\u0131kar\u0131r.<\/p>\nImport \u0130fadelerini D\u00fczenleme Stratejileri<\/h3>\n
Gruplama ve S\u0131ralama<\/h4>\n
import React from 'react';\nimport { useState, useEffect } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useSelector } from 'react-redux';<\/code><\/pre>\nimport axios from 'axios';\nimport { format } from 'date-fns';\nimport { Button } from '@material-ui\/core';<\/code><\/pre>\nsrc<\/code> k\u00f6k\u00fcnden ba\u015flayanlar):<\/b><\/p>\nimport Header from 'components\/layout\/Header';\nimport { fetchUsers } from 'services\/userService';<\/code><\/pre>\n@<\/code> ile ba\u015flayanlar):<\/b><\/p>\nimport useAuth from '@hooks\/useAuth';\nimport { validateEmail } from '@utils\/validation';<\/code><\/pre>\nimport LocalComponent from '.\/LocalComponent';\nimport { fetchData } from '..\/api';<\/code><\/pre>\nimport '.\/MyComponent.css';\nimport logo from 'assets\/logo.svg';<\/code><\/pre>\nBo\u015f Sat\u0131r Kullan\u0131m\u0131<\/h4>\n
import React, { useState } from 'react';\n\nimport axios from 'axios';\nimport { Button } from '@mui\/material';\n\nimport { useAuth } from '@hooks\/useAuth';\nimport { formatCurrency } from '@utils\/formatters';\n\nimport UserProfile from '.\/UserProfile';\nimport styles from '.\/UserProfile.module.css';<\/code><\/pre>\nTek Sat\u0131rda Birden Fazla Import<\/h4>\n
\/\/ \u0130yi\nimport { useState, useEffect, useCallback } from 'react';\n\n\/\/ Daha iyi (\u00e7ok say\u0131da import i\u00e7in)\nimport {\n useState,\n useEffect,\n useCallback,\n useMemo,\n useRef,\n} from 'react';<\/code><\/pre>\nDizin \u0130ndeks Dosyalar\u0131 (Barrel Files)<\/h4>\n
index.js<\/code> veya index.ts<\/code> olarak adland\u0131r\u0131l\u0131r), bir dizindeki birden fazla mod\u00fcl\u00fc tek bir dosyada toplay\u0131p d\u0131\u015fa aktararak importlar\u0131 basitle\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\nNedir? Neden Kullan\u0131l\u0131r?<\/h5>\n
src\/components\/forms<\/code> dizininde Button.jsx<\/code>, Input.jsx<\/code> ve Select.jsx<\/code> bile\u015fenleriniz var. Normalde bunlar\u0131 ayr\u0131 ayr\u0131 import etmeniz gerekir:<\/p>\nimport Button from 'components\/forms\/Button';\nimport Input from 'components\/forms\/Input';\nimport Select from 'components\/forms\/Select';<\/code><\/pre>\nsrc\/components\/forms\/index.js<\/code>) olu\u015fturarak:<\/p>\n\/\/ src\/components\/forms\/index.js\nexport { default as Button } from '.\/Button';\nexport { default as Input } from '.\/Input';\nexport { default as Select } from '.\/Select';<\/code><\/pre>\nimport { Button, Input, Select } from 'components\/forms';<\/code><\/pre>\nAvantajlar\u0131:<\/h5>\n
\n* Refactoring Kolayl\u0131\u011f\u0131:<\/b> Alt bile\u015fenlerin konumu de\u011fi\u015fse bile, barrel dosyas\u0131n\u0131 kullanan di\u011fer mod\u00fcllerin import ifadesi de\u011fi\u015fmez.
\n* Daha Temiz Kod:<\/b> Import listelerini k\u0131salt\u0131r ve d\u00fczenler.<\/p>\nDezavantajlar\u0131:<\/h5>\n
\n* Gereksiz Kod Y\u00fcklemesi:<\/b> E\u011fer barrel dosyas\u0131nda \u00e7ok say\u0131da \u00f6\u011fe varsa ve siz sadece birka\u00e7\u0131n\u0131 kullan\u0131yorsan\u0131z, gereksiz kodun dahil edilme riski vard\u0131r.
\n* Dairesel Ba\u011f\u0131ml\u0131l\u0131k Riski:<\/b> Barrel dosyalar\u0131 yanl\u0131\u015f yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131nda dairesel ba\u011f\u0131ml\u0131l\u0131klara yol a\u00e7abilir.<\/p>\nNe Zaman Kullan\u0131lmal\u0131?<\/h5>\n
Otomatik D\u00fczenleme Ara\u00e7lar\u0131<\/h3>\n
ESLint<\/h4>\n
eslint-plugin-import<\/code> eklentisi, import ifadelerini d\u00fczenlemek i\u00e7in g\u00fc\u00e7l\u00fc kurallar sunar.<\/p>\nYap\u0131land\u0131rma \u00d6rnekleri<\/h5>\n
package.json<\/code> dosyan\u0131zdaki devDependencies<\/code> b\u00f6l\u00fcm\u00fcne eslint-plugin-import<\/code>‘u ekleyin ve .eslintrc.js<\/code> dosyan\u0131zda yap\u0131land\u0131r\u0131n:<\/p>\n\/\/ .eslintrc.js\nmodule.exports = {\n extends: [\n 'react-app',\n 'react-app\/jest',\n 'plugin:import\/recommended', \/\/ import eklentisini dahil et\n 'plugin:import\/typescript', \/\/ TypeScript kullan\u0131yorsan\u0131z\n ],\n plugins: ['import'],\n rules: {\n 'import\/order': [\n 'error',\n {\n 'groups': [\n 'builtin', \/\/ Node.js yerle\u015fik mod\u00fclleri\n 'external', \/\/ \u00dc\u00e7\u00fcnc\u00fc taraf paketler\n 'internal', \/\/ Absolute\/alias importlar\n 'parent', \/\/ \u00dcst dizinler\n 'sibling', \/\/ Karde\u015f dosyalar\n 'index', \/\/ Ayn\u0131 dizindeki index dosyas\u0131\n 'object', \/\/ Object importlar\u0131\n 'type', \/\/ Type importlar\u0131 (TypeScript)\n ],\n 'pathGroups': [\n {\n 'pattern': 'react',\n 'group': 'external',\n 'position': 'before',\n },\n {\n 'pattern': '@mui\/<\/em>', \/\/ Material UI veya benzeri k\u00fct\u00fcphaneler\n 'group': 'external',\n 'position': 'after',\n },\n {\n 'pattern': '@components\/<\/em>',\n 'group': 'internal',\n 'position': 'before',\n },\n {\n 'pattern': '@hooks\/<\/em>',\n 'group': 'internal',\n 'position': 'before',\n },\n {\n 'pattern': '@utils\/<\/em>',\n 'group': 'internal',\n 'position': 'before',\n },\n {\n 'pattern': '@assets\/<\/em>',\n 'group': 'internal',\n 'position': 'after',\n },\n {\n 'pattern': '.\/<\/em>\/*.module.css', \/\/ CSS mod\u00fclleri en sonda\n 'group': 'sibling',\n 'position': 'after',\n },\n ],\n 'pathGroupsExcludedImportTypes': ['react'],\n 'newlines-between': 'always', \/\/ Gruplar aras\u0131nda bo\u015f sat\u0131r b\u0131rak\n 'alphabetize': {\n 'order': 'asc', \/\/ Alfabetik s\u0131ralama\n 'caseInsensitive': true,\n },\n },\n ],\n 'import\/no-unresolved': 'error', \/\/ \u00c7\u00f6z\u00fcmlenemeyen importlara hata ver\n 'import\/no-duplicates': 'warn', \/\/ Yinelenen importlara uyar\u0131 ver\n 'import\/no-unused-modules': [\n 'warn',\n {\n 'unusedExports': true,\n 'missingExports': true,\n },\n ],\n 'import\/no-relative-parent-imports': 'off', \/\/ G\u00f6receli \u00fcst dizin importlar\u0131na izin ver (iste\u011fe ba\u011fl\u0131)\n 'import\/first': 'error', \/\/ Importlar\u0131n dosyan\u0131n ba\u015f\u0131nda olmas\u0131n\u0131 sa\u011fla\n },\n settings: {\n 'import\/resolver': {\n node: {\n extensions: ['.js', '.jsx', '.ts', '.tsx'],\n },\n \/\/ Absolute importlar ve aliaslar i\u00e7in ayarlar\n \/\/ jsconfig.json\/tsconfig.json kullan\u0131yorsan\u0131z, eslint-import-resolver-node<\/code> veya eslint-import-resolver-typescript<\/code> otomatik olarak alg\u0131layabilir.\n \/\/ Manuel yap\u0131land\u0131rma \u00f6rne\u011fi:\n \/\/ alias: {\n \/\/ map: [\n \/\/ ['@components', '.\/src\/components'],\n \/\/ ['@hooks', '.\/src\/hooks'],\n \/\/ ['@utils', '.\/src\/utils'],\n \/\/ ['@assets', '.\/src\/assets'],\n \/\/ ],\n \/\/ extensions: ['.js', '.jsx', '.ts', '.tsx'],\n \/\/ },\n typescript: {\n project: '.\/tsconfig.json', \/\/ TypeScript projeleri i\u00e7in\n },\n },\n },\n};<\/code><\/pre>\nPrettier<\/h4>\n
import\/order<\/code> kural\u0131 ile Prettier’\u0131 birlikte kullanarak hem s\u0131ralama hem de genel formatlama tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\nVS Code Ayarlar\u0131<\/h4>\n
\/\/ .vscode\/settings.json\n{\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": true,\n \"source.organizeImports\": true\n },\n \"eslint.validate\": [\"javascript\", \"javascriptreact\", \"typescript\", \"typescriptreact\"],\n \"editor.formatOnSave\": true,\n \"[javascript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[javascriptreact]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[typescript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[typescriptreact]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n }\n}<\/code><\/pre>\nRefactoring Dostu Yakla\u015f\u0131mlar<\/h3>\n
Mod\u00fcl S\u0131n\u0131rlar\u0131n\u0131 Belirleme<\/h4>\n
Ba\u011f\u0131ml\u0131l\u0131k Y\u00f6n\u00fcn\u00fc Y\u00f6netme<\/h4>\n
Yeniden D\u0131\u015fa Aktarma (Re-exporting)<\/h4>\n
features\/auth<\/code> dizini, hooks\/useAuth<\/code> ve components\/AuthForm<\/code> gibi \u00f6\u011feleri yeniden d\u0131\u015fa aktarabilir, b\u00f6ylece di\u011fer mod\u00fcller sadece features\/auth<\/code>‘tan import yapar.<\/p>\nType Imports (TypeScript i\u00e7in)<\/h4>\n
import type<\/code> kullanmak, \u00e7al\u0131\u015fma zaman\u0131nda (runtime) gereksiz kod y\u00fcklemesini \u00f6nler ve import grafi\u011fini daha net hale getirir.<\/p>\n\/\/ Normal import (hem de\u011fer hem tip)\nimport { User } from '.\/types';\n\n\/\/ Type-only import (sadece tip)\nimport type { User } from '.\/types';<\/code><\/pre>\nYayg\u0131n Hatalar ve Ka\u00e7\u0131n\u0131lmas\u0131 Gereken Durumlar<\/h3>\n
..\/..\/..\/components\/Button<\/code> gibi yollar, dosya ta\u015f\u0131nd\u0131\u011f\u0131nda b\u00fcy\u00fck sorunlara yol a\u00e7ar. Mutlak veya takma ad importlar\u0131na ge\u00e7in.
\n* Tutars\u0131z S\u0131ralama ve Gruplama:<\/b> Ekip genelinde bir standart olmamas\u0131, her dosyan\u0131n farkl\u0131 bir import d\u00fczenine sahip olmas\u0131na neden olur. ESLint ve Prettier gibi ara\u00e7larla tutarl\u0131l\u0131\u011f\u0131 sa\u011flay\u0131n.
\n* Gereksiz Importlar (Kullan\u0131lmayan Kod):<\/b> Bir mod\u00fcl\u00fc import edip kullanmamak, gereksiz kod y\u00fcklemesine ve kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131na yol a\u00e7ar. Otomatik d\u00fczenleme ara\u00e7lar\u0131 bu t\u00fcr importlar\u0131 kald\u0131rabilir.
\n* Dairesel Ba\u011f\u0131ml\u0131l\u0131klar:<\/b> \u0130ki veya daha fazla mod\u00fcl\u00fcn birbirine do\u011frudan veya dolayl\u0131 olarak ba\u011f\u0131ml\u0131 olmas\u0131, uygulaman\u0131n ba\u015flat\u0131lmas\u0131nda sorunlara, \u00f6ng\u00f6r\u00fclemeyen davran\u0131\u015flara ve hata ay\u0131klama zorluklar\u0131na neden olabilir. Bu durum genellikle mod\u00fcl s\u0131n\u0131rlar\u0131n\u0131n iyi tan\u0131mlanmamas\u0131ndan kaynaklan\u0131r.<\/p>\nSonu\u00e7<\/h3>\n