Konsep export/import sangat penting untuk diketahui dikarenakan kebanyakan project yang besar nantinya akan membutuhkan ini untuk membagi file-file agar menjadi terstruktur dan rapi. Sebagai contoh pada project sebelumnya telah dibuat fungsi Biodata dan Foto yang diletakan dalam satu file yang sama. Berikutnya, akan dipisahkan antaran fungsi ini menjadi filenya masing-masing (Biodata.jsx dan Foto.jsx) kemudian akan dilakukan proses export/import file kedalam App.jsx.

Berikut adalah langkah-langkahnya :

Pertama – buat sebuah file baru dengan nama Biodata.jsx, file ini
bisa diletakan sejajar dengan index.jsx atau dapat dibuatkan folder.

Biodata.jsx

Kedua – kembali membuat sebuah file baru dengan nama Foto.jsx,
file ini bisa diletakan sejajar dengan index.jsx atau dapat dibuatkan
folder. Pastikan pada akhir sintak fungsinya di export dengan sintaks
export default Foto

Foto.jsx

Ketiga – setelah kedua file di-export berikutnya dilakukan import
pada file App.jsx, dengan sintak seperti berikut :

App.jsx

Output :