React'te ES6 modülünü kullanın

Modüller, özellikle ES6 tanıtıldığından beri modern JavaScript geliştirme sürecinde merkezi bir bileşendir. ES6 ile, import ve export kullanarak kodu daha düzenli ve bakımı daha kolay hale getirebilirsin. Bu kılavuzda, ES6 modüllerini nasıl etkili bir şekilde kullanarak React uygulamalarını modüler hale getireceğini öğreneceksin.

Temel Bulgular

• ES6 modülleri import ve export anahtar kelimelerini kullanır.
• Bir HTML dosyasında bir modülü yüklemek için,
• Bir modülden hem varsayılan hem de adlandırılmış ihracatları kullanabilirsin.
• import kullanırken farklı yazım şekilleri mümkündür ve ihtiyaca göre kullanılabilir.

Adım Adım Kılavuz

1. ES6 Modüllere Giriş

ES6 modüllerinin ne olduğunu anlaman gereklidir. Bu modüller, kodu ayrı dosyalara düzenlemek için basit bir yol sağlar. ES6 ile, tarayıcının bunun bir modül olduğunu anlaması için HTML dosyanda type="module" özniteliği olan bir

2. Modül Oluşturma

Şimdi main.jsx dosyan içine import etmek istediğin yeni bir modül oluşturursun. Mod1.js adında bir dosya oluştur. Bu dosyada daha sonra kullanmak istediğin çeşitli fonksiyonları tanımlayabilirsin.

3. İçe Aktarmaya İlişkin Temel Bilgiler

Main.jsx dosyasına modülünü içe aktaracaksın. İçe aktarma şu sözdizimiyle gerçekleşir: import { Fonksiyon } from './Mod1.js';. Geliştirme sunucunun doğru yapılandırıldığı sürece dosyayı.js uzantısı olmadan da içe aktarabilirsin.

4. Modülden Fonksiyonları İhraç Etme

Oluşturduğun fonksiyonları kullanabilmek için onları ihraç etmek zorundasın. Bu, fonksiyonun önüne export anahtar kelimesini yazarak gerçekleştirilir. Örneğin:

export function doIt() { console.log("Merhaba");
}

Şimdi bu fonksiyonu diğer dosyalarda içe aktarabilirsin.

5. Fonksiyonları İçe Aktarma

İhraç edilen fonksiyonu main.jsx dosyasında kullanabilmek için içe aktarma sözdizimini kullanırsın:

import { doIt } from './Mod1.js';

Bu şekilde, doIt fonksiyonuna erişebilir ve kod içinde istediğin gibi çağırabilirsin.

6. Varsayılan İhracı Kullanma

Adlandırılmış ihracatların yanı sıra, bir varsayılan ihracatı (default export) da kullanma imkanı vardır. Bu, süslü parantezler olmadan içe aktarılacak bir fonksiyonu varsayılan ihracat olarak tanımlayabileceğin anlamına gelir. Bunun için basitçe şunu yazarsın:

export default function makeIt() { console.log("Yap!");
}

İçe aktarma dosyanda bunu şu şekilde çağırabilirsin:

import makeIt from './Mod1.js';

7. Karmaşık Modüller ve İsim Çakışmaları

Bir modülden birden fazla fonksiyon içe aktarıyorsan, isim çakışmaları oluşabilir. Bu durumda, içe aktarılan fonksiyonlara farklı isimler vermek mantıklı olacaktır. Bu işlemi, şu sözdizimini kullanarak gerçekleştirebilirsin: import { doIt as myDoIt } from './Mod1.js';.

8. Tüm Modülü İçe Aktarma

Bazı durumlarda, bir modüldeki tüm fonksiyonları tek seferde içe aktarmak isteyebilirsin. Bu durumda, şu sözdizimini kullanabilirsin:

import * as Mod1 from './Mod1.js';

Şimdi, bu modülün tüm ihracatlarına Mod1 belirleyicisi üzerinden erişim sağlarsın.

ES6 Modülleri Hakkında Sonuç

Özetle, ES6'daki modül sistemi, JavaScript uygulamalarınızın yapısını iyileştirmenize yardımcı olur. Modüler yapının sağladığı birçok avantaj arasında kodun tekrar kullanılabilirliği, daha iyi okunabilirlik ve bakımı kolaylaştırması bulunmaktadır.

Özet

Bu kılavuzda ES6 Modüllerinin temellerini keşfettiniz ve bunları React uygulamalarınızda nasıl etkili bir şekilde kullanacağınızı öğrendiniz. Modüller hakkında sağlam bilgi sahibi olmak, modern web gelişiminde başarılı olmanız için gereklidir. Projelerinizi modüler ve anlaşılır hale getirmek için anlatılan teknikleri kullanın.