1. "Unexpected Token" Nedir?
Bir sabah React projenizi açtınız, birkaç değişiklik yaptınız, ve ardından projeyi çalıştırmaya başladınız. Her şey yolunda gibi görünüyor, ancak tarayıcıda sizi bir hata mesajı bekliyor: *"Unexpected token"*.
2. Hata Nerelerde Görülür?
Hata, çoğunlukla aşağıdaki durumlarda karşımıza çıkar:
- ES6 özellikleri (örneğin arrow function) eski bir JavaScript sürümünde çalıştırılmaya çalışıldığında
- React component'lerinde yanlış yerleştirilmiş süslü parantezler veya tırnak işaretleri
- Eksik veya fazla olan import ifadeleri
3. Örnekler ile Anlatım
Şimdi, gelin birkaç örnek üzerinden bu hatayı anlamaya çalışalım.
Aşağıdaki kodu göz önünde bulunduralım:
```javascript
const MyComponent = () => {
return (
Hello World!
);
};
```
Burada her şey gayet düzgün görünüyor. Ancak, tırnakları yanlış bir şekilde kullanırsak, örneğin şunu yazarsak:
```javascript
const MyComponent = () => {
return (
Hello World!
);
};
```
Bu küçük noktalı virgül (semicolon) hatası, "Unexpected Token" hatasına yol açar. Çünkü JSX kodunda her bir elementin sonunda noktalı virgül koymak gereksizdir. React, bunun bir hata olduğunu ve "Unexpected token" hatasını fırlatır.
# Örnek 2: JavaScript ES6 Özelliklerinin Eski Tarayıcıda Kullanımı
Diyelim ki React projenizde ES6 arrow function kullanıyorsunuz, ancak eski bir tarayıcıda veya eski bir node.js sürümünde çalıştırıyorsunuz. Böyle bir durumda da benzer bir hata alabilirsiniz:
const sayHello = () => {
console.log("Hello!");
};
```
Eski sürümlerde bu kodun çalışması için bazı ek ayarların yapılması gerekebilir. Bunun için Babel gibi derleyiciler kullanılmalıdır.
4. "Unexpected Token" Hatasını Nasıl Çözebiliriz?
Bu tür hataları çözmek için birkaç farklı yöntem mevcuttur:
İlk olarak, hatanın sebebini anlamak için kodunuzu dikkatle gözden geçirin. Parantezlerinizi, tırnak işaretlerinizi ve virgüllerinizi kontrol edin. Eğer JSX yazıyorsanız, her açılan parantez için kapanan bir parantez olduğundan emin olun.
# 4.2. ES6 Özelliklerini Destekleyen Bir Ortam Kullanın
Eğer ES6 özellikleri kullanıyorsanız, React projenizi çalıştırmadan önce bunların doğru şekilde derlendiğinden emin olun. Modern JavaScript özelliklerini desteklemeyen eski bir tarayıcı veya node sürümü kullanıyorsanız, Babel gibi araçlarla kodunuzu derlemeniz gerekebilir.
Bazen React projenizde kullanılan bazı paketler eski sürümlerdir ve bunlar da "Unexpected Token" hatasına yol açabilir. Projeyi güncel tutmak ve kullanılan paketleri en son sürüme yükseltmek, bu tür hataları ortadan kaldırabilir.
Bunu yapmanın en kolay yolu şu komuttur:
```bash
npm update
```
# 4.4. Hata Mesajını Dikkatle Okuyun
Hata mesajları, hatanın tam olarak nerede oluştuğunu size gösterir. Hata mesajını dikkatle inceleyerek, hangi satırda ve hangi dosyada problem olduğunu tespit edebilirsiniz. Hata genellikle şu şekilde görünebilir:
SyntaxError: Unexpected token '!'
```
Bu, belirli bir karakterin veya sembolün beklenmedik bir yerde kullanıldığını gösterir.
5. Sonuç
"Unexpected Token" hatası, genellikle küçük bir yazım hatasından kaynaklanır. Ancak, doğru araçlar ve dikkatli bir inceleme ile kolayca çözülebilir. React.js ve JavaScript geliştirmeye devam ederken, bu tür hataları hızlıca tespit edebilmek için hata mesajlarını dikkatle okumanız ve kodunuzu düzenli tutmanız çok önemlidir.
Başarılar ve mutlu kodlamalar!
