React Export ve Import

Merhaba sevgili geliştirici dostlarım, kahveler hazırsa bizde hazırırız.🚀 Bugün konumuz Export ve Import. İyi okumalar diliyorum 👩🏻‍💻

✨ Bu yazıdaki konu başlıkları:

1)Neden Export ve Import

2)Avantajları

3)Dezavantajları

4)Export ve Import Kullanımı

• Default Export
• Default Import
• Named Export
• Named Import

5)İpuçları

• Dinamik Import
• Export ve Import Kısayolları

✨Neden Export ve Import ?

Componentler’in büyüsü, yeniden kullanabiliyor olmasıdır. Componentler’den yeni componentler oluşturabiliriz fakat karmaşıklaştıkça farklı dosyalara ayırmak daha mantıklı ve kullanışlı hale gelir.

Export ve import ifadeleri, componentler ve modüller arasında kod paylaşımını sağlayan JavaScript ES6 özellikleridir.

✨Avantajları:

1. Modülerlik: Kodunuzu mantıklı parçalara ayırmanızı ve her parçanın ayrı bir dosyada tutulmasını sağlar, bu da projenin okunabilirliğini ve bakımını kolaylaştırır.
2. Yeniden Kullanılabilirlik: Tek bir yerde tanımlanan ve farklı dosyalarda kullanılan modüller veya componentler oluşturmanıza olanak tanır, böylece kod tekrarını azaltır.
3. Tree Shaking: Modern araç zincirleri, kullanılmayan kodları projeden çıkarma (tree shaking) yeteneğine sahiptir. Bu, yalnızca gerekli kodların son pakete dahil edilmesini sağlar ve uygulamanın boyutunu azaltır.

✨Dezavantajları:

1. Dinamik Bağımlılıklar: Dinamik importlar kullanışlı olabilir, ancak bağımlılıkları anlamayı ve hata ayıklamayı zorlaştırabilir.
2. Performans: Eğer çok sayıda küçük modül içe aktarılıyorsa, bu, özellikle ağ gecikmesinin önemli olduğu durumlarda, başlangıç yükleme süresini artırabilir.

✨Export ve Import Kullanımı

Default Export:

• Her dosya, yalnızca bir default export içerebilir. Genellikle componentleri dışa aktarırken kullanılır.

const Profile = () => {
  return <div>Profile</div>
  );
};

export default Profile;

Default Import:

• Default olarak dışa aktarılmış bir bileşeni veya modülü içe aktarırken, herhangi bir isim kullanabilirsiniz.

Eğer export default olarak component’i dışarı aktarıyorsak component için default bir değer gönderiyoruz anlamına geliyor. Bu yüzden import ederken (içeri aktarırken) ‘{}’ kullanmıyoruz.

import UserProfile from "./Profile";

Named Export:

• Bir dosyadan birden fazla öğeyi dışa aktarmak için kullanılır. İçe aktarırken, aynı isimlerin kullanılması gerekir.

// utils.js
export const name = 'John Doe';
export const id = 101;
export const email = 'johndoe@example.com';

Named Import:

• Adlandırılmış dışa aktarılmış öğeleri içe aktarırken, süslü parantez {} içinde aynı isimleri kullanmanız gerekir.

// App.js
import { name,id,email } from './utils';
function App() {
  return (
    <div>
      <p>Name: {name}</p>
      <p>ID: {id}</p>
      <p>Email: {email}</p>
    </div>
  );
}
export default App;

Bir dosyadan birden fazla öğeyi içe aktarmak isterseniz ve bu öğeleri tek bir nesne altında toplamak istiyorsanız, import * as ifadesini kullanabilirsiniz. Bu kullanım, özellikle bir modüldeki tüm named exports'a bir nesne üzerinden erişmek istediğinizde faydalıdır.

Şimdi, bu dosyadan tüm named export’ları user nesnesi altında toplayarak içe aktaralım:

// App.js
import * as user from './utils';
function App() {
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>ID: {user.id}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}
export default App;

✨İpuçları

Dinamik import

JavaScript modüllerini yalnızca gerektiğinde yüklemek için kullanılan bir yöntemdir. Bu, özellikle uygulamanızın başlangıç yükleme süresini iyileştirmek için kodunuzun bölümlere ayrılmasını (code splitting) sağlar. Kullanıcı belirli bir özelliği veya bileşeni ilk kez kullanmaya çalıştığında, ilgili kod o anda yüklenir. Böylece, uygulamanızın başlangıcında yüklenmesi gereken toplam kod miktarı azalır.

import('./Profile').then(ProfileModule => {
  const Profile = ProfileModule.default;
  // Profil bileşenini kullan
});

Dinamik import (import()) ile Profile.js dosyası gerektiğinde yüklenir. Bu işlem asenkron olduğundan, diğer JavaScript kodları beklemeksizin çalışmaya devam eder.

Modül yüklendiğinde, .then() içinde tanımlanan fonksiyon çalışır ve Profile bileşenine ProfileModule.default üzerinden erişilir. Bu yöntem, yalnızca gerektiğinde kod yükleyerek büyük uygulamaların performansını iyileştirir.

Export ve Import Kısayolları:

Export ve import kısayolları, React’teki modül yönetimini daha etkili ve düzenli hale getiren bir özelliktir. Bu kısayollar sayesinde, bir modülü içe aktardıktan (import) sonra hemen farklı bir dosyadan dışa aktarabilirsiniz (export). Bu işlem, kod tekrarını azaltır ve daha temiz bir kod yapısı sağlar. İki örnek üzerinden bu konuyu açıklayalım:

• Default Export ve Import Kısayolu:

export { default as Profile } from './Profile';

Bu, özellikle bir index dosyasında birçok bileşeni bir araya toplayıp bunları tek bir yerden yönetmek istediğinizde kullanışlıdır. Böylece, Profile bileşenini kullanmak istediğinizde, doğrudan bu index dosyası üzerinden içe aktarabilirsiniz.

• Named Export ve Import Kısayolu:

export { id, name } from './utils';

Her iki durumda da, bu kısayollar sayesinde, modüller arası bağımlılıkları yönetmek, kodu yeniden kullanmak ve projenin modüler yapısını korumak daha kolay hale gelir. Ayrıca, bu yöntemler, projenin bakımını ve güncellenmesini de kolaylaştırır.

Eğer yazıyı beğendiyseniz, diğer içeriklerime göz atmayı unutmayın. Keyifli okumalar! 📚

Bana destek olmak için kahve ısmarlayabilirsiniz 🌟

Benimle iletişime geçmek isterseniz: Esra Nur Mülkpınar