ReactJS export ve export default arasındaki farklar

Bugün sizinle Reacta başlarken bir çok React kurslarında eğitmenlerin javascriptten bildiklerini varsaydığı biraz üstü kapatılarak geçilen export ve export default kodlarından ve farklılıklarından bahsedeceğim.

export ve export default ne işe yarar?
export ve export default ifadesi reactta bir companenti dışarıya açmamıza yarar. Yani siz bir companent oluşturduğunuzda, varsayalım bu companent fonksiyonel bir companent olsun. Adı da Örneğin Text olsun. Text companentini dışarı açmak için bir şarta ihtiyacınız var. Reactta iki tane şart var bunlar: export ve export default şartlarıdır. Eğer export ile işaretlerseniz siz bu companenti örneğin, App.jsx ismindeki dosyanıza dahil ederken yani import ederken. Kesinlikle şunları kullanmalısınız.

• Çağırılacak companenti süslü paranteze almak zorundasınız, çünkü birden fazla companent olabilir. Veya çağırmak istediğiniz companentleri süslü parantezlere ayırabilirsiniz.
• Eğer örneğin Text isimli companentin ismini değiştirecekseniz as anahtar kelimesini kullanmalısınız.

Export örneği

Aşağıdaki örnekte Text isimli export ile işaretlenmiş bir companent oluşturduk ve bu companent geriye 'Bu bir metindir' içerikli bir p etiketi döndürmektedir.

Bu companenti App.jsx içerisine dahil etmek için yukarıda bahsedilen şartlara uygun hareket etmeliyiz. Aşağıdaki görsel de olduğu gibi bu şekilde dosyanıza dahil edebilirsiniz.

Program çalıştırıldığında ise tarayıcıda şu şekilde görünür:

Yukarıda bahsettiğim gibi birden fazla companent ekleyeceksek export kullanmalıyız, peki bu tezi de kanıtlamak için birden fazla companentimiz olsun, Text.jsx dosyasına Text2 isminde companent oluşturduk ve yine Bu bir metindir 2. şeklinde geriye yine p etiketi döndüren bir companent oluşturulalım ve bu companenti tanımlandığı isim ile çağıralım.

Text2 companenti:

Aşağıdaki görselde ise App.jsx dosyası içerisine önceden import ile eklediğimiz Text companentinin yanına Text2 isimli yeni oluşturduğumuz companenti çağırdık ve 9.satırda bu companenti çağırdık.

Bunun sonucunda ise oluşan ekran çıktısı ise aşağıdaki görseldeki gibidir.

Export default kullanımı

Export default kullanırken sadece 1 companent dışarı çıkartırız. React projelerinde en çok export default tercih edilmektedir. Örneğin bir Login compnanentimiz olsun, bu companenti export default ile işaretledik diyelim. App.jsx dosyamıza import ile Login companentimizi dahil ettiğimizde bunu süslü parantez olmadan çağırmalıyız. Adını değiştireceğimiz zaman ise as ifadesi yerine başka bir isim kullanırız örneğin import Giris from './Login'; şeklinde dahil edebiliriz.

Bir örnekle pekiştirelim, aşağıdaki görseli inceleyin:

Yukarıdaki görselde Login isimli companenti export default ile işaretledik. Aşağıdaki görselde ise bu companenti App.jsx dosyasına dahil etme görüntüsü bulunmaktadır.

Yukarıdaki görselde import Login from './Login'; kullanarak Login ismi ile companentimizi App.jsx'e dahil ettik ve 8. satırda kullandık. Yukarıda da bahsettiğim üzere export default kullanılan bir companentte isim değiştirmek için as ifadesi yerine tanımladığımız companentin adına karşılık gelmesi adına başka bir şey yazarız. Bunu şöyle düşünün: Companentimizin adı Login bunun adını farklı şekilde import etmek için gidip Login yerine başka bir isim kullanırız. bu da aslında Login.jsxdeki Login companentin adına karşılık gelir. Çünkü zaten reacta sadece bir companent var diyoruz orada ki gerçektende Login.jsx de 1 tane Login isimli companent var.

Soldaki görseldeki 2.satırda direkt Login.jsx'de tanımlandığı gibi Login ismiyle import ettik. ve 8.satırda kullandık.
Sağdaki görselde ise Giris ismini kullanarak 8. satırda Giris ismiyle kullandık. Aşağıda ekran çıktısı bulunmaktadır:

Kısa Özet ve farklılıklar

• export kullanırken birden fazla companent dışarıya açabiliriz fakat export default ile sadece bir companent dışarıya açabiliriz.
• export ile işaretlediğimiz bir companentin ismini değiştirirken as kullanılırız, export defaultta import ederken tanımlamak istediğimiz ismi gireriz.
• export ile işaretlediğimiz compnanetleri süslü parantez içerisinde import ederiz, ama export defaultta ise süslü parantez kullanmayız.

NOT: Bir companenti isimlendirirken baş harfi büyük olmalıdır. Text companentinin ismini text olarak değiştiremeyiz. Örneğin Text1 olarak değiştirebiliriz. Burada PascalCase kuralına uymamız gerekir. Çünkü React küçük harfle yazılan bir companenti html etiketi zanneder ve hata fırlatır.