React ES6 Modules / Export / Import

JavaScript modülleri, kodunuzu ayrı dosyalara bölmenize olanak tanır. Bu durum, kod tabanının bakımını kolaylaştırır. ES Modülleri, `import` ve `export` ifadelerine dayanır.
Dışa Aktarma (Export)
Herhangi bir dosyadan bir fonksiyonu veya değişkeni dışa aktarabilirsiniz.
`person.js` adında bir dosya oluşturalım ve bu dosyayı dışa aktarmak istediğimiz öğelerle dolduralım.
İki tür dışa aktarma vardır: İsimlendirilmiş (Named) ve Varsayılan (Default).

İsimlendirilmiş Dışa Aktarmalar
İsimlendirilmiş dışa aktarmaları iki şekilde oluşturabilirsiniz:
 
export const name = "Tobias"
export const age = 18

//veya

const name = "Tobias"
const age = 18
export { name, age }
 
Varsayılan Dışa Aktarımlar

`message.js` adında başka bir dosya oluşturalım ve bunu varsayılan dışa aktarımı (default export) göstermek için kullanalım.
Bir dosyada yalnızca tek bir varsayılan dışa aktarım bulunabilir.

const message = () => {
  const name = "Tobias";
  const age = 18;
  return name + ' is ' + age + 'years old.';
};

export default message;

 

 İçe Aktarma

Modülleri bir dosyaya iki şekilde içe aktarabilirsiniz: bunların adlandırılmış dışa aktarımlar mı yoksa varsayılan dışa aktarımlar mı olduğuna bağlı olarak.
Adlandırılmış dışa aktarımlar süslü parantezler kullanılarak ayrıştırılmalıdır. Varsayılan dışa aktarımlar ayrıştırılmaz.
 

import { name, age } from "./person.js";

import message from "./message.js";

 

Kaynak

Yükleniyor...