ReactJS - .JS vs .JSX

Ada sesuatu yang saya pikir sangat membingungkan ketika bekerja React.

Ada banyak contoh yang tersedia di internet yang menggunakan .jsfile dengan reaksi tetapi banyak lainnya menggunakan .jsxfile.

Saya telah membaca tentang .jsxfile dan pengertian saya adalah mereka membiarkan Anda menulis tag html di dalam file Anda javascript. Tetapi hal yang sama dapat ditulis dalam .jsfile juga.

Jadi apa perbedaan sebenarnya antara kedua ekstensi ini .jsdan .jsx?

Tidak ada ketika datang ke ekstensi file. Bundler / transpiler Anda / apa pun yang menangani menyelesaikan jenis konten file apa yang ada.

Namun ada beberapa pertimbangan lain ketika memutuskan apa yang akan dimasukkan ke dalam .jsatau .jsxtipe file. Karena JSX bukan JavaScript standar, orang dapat berargumen bahwa apa pun yang bukan JavaScript "biasa" harus masuk ke ekstensinya sendiri, misalnya., .jsxUntuk JSX dan .tsuntuk TypeScript misalnya.

Ada diskusi yang baik di sini tersedia untuk dibaca

Dalam sebagian besar kasus, itu hanya kebutuhan untuk transpiler / bundler, yang mungkin tidak dikonfigurasi untuk bekerja dengan file JSX, tetapi dengan JS! Jadi, Anda terpaksa menggunakan file JS bukan JSX.

Dan karena reaksi hanyalah pustaka untuk javascript, tidak ada bedanya bagi Anda untuk memilih antara JSX atau JS. Mereka benar-benar dipertukarkan!

Dalam beberapa kasus, pengguna / pengembang mungkin juga memilih JSX daripada JS, karena penyorotan kode, tetapi sebagian besar editor yang lebih baru juga melihat sintaks reaksi dengan benar dalam file JS.

Tag JSX ( <Component/>) jelas bukan javascript standar dan tidak memiliki arti khusus jika Anda memasukkannya ke dalam <script>tag telanjang misalnya. Karenanya semua Bereaksi file yang mengandung mereka adalah JSX dan bukan JS.

Secara konvensi, titik masuk dari aplikasi Bereaksi biasanya. Js bukan .jsx meskipun berisi komponen Bereaksi. Mungkin juga .jsx. File JSX lainnya biasanya memiliki ekstensi .jsx.

Bagaimanapun, alasan ada ambiguitas adalah karena pada akhirnya ekstensi tidak terlalu penting karena transpiler dengan senang hati mengunyah segala jenis file selama mereka sebenarnya JSX.

Saran saya adalah: jangan khawatir tentang itu.

Selain fakta yang disebutkan bahwa tag JSX bukan javascript standar, alasan saya menggunakan ekstensi .jsx adalah karena dengan itu Emmet masih berfungsi di editor - Anda tahu, plugin yang berguna yang memperluas kode html, misalnya ul> li ke

<ul>
  <li></li>
</ul>

Seperti yang disebutkan lainnya JSXbukanlah ekstensi Javascript standar. Lebih baik menyebutkan titik masuk Aplikasi Anda berdasarkan .jsdan untuk komponen lainnya, yang dapat Anda gunakan .jsx.

Saya memiliki alasan penting mengapa saya menggunakan .JSXsemua nama file komponen. Sebenarnya, dalam proyek skala besar dengan banyak kode, jika kita mengatur semua komponen React dengan .jsxekstensi, itu akan lebih mudah saat menavigasi ke file javascript yang berbeda di seluruh proyek (seperti helpers, middleware, dll.) Dan Anda tahu ini Komponen Bereaksi dan bukan tipe lain dari file javascript.

JSX bukan JavaScript standar, berdasarkan panduan gaya Airbnb 'eslint' dapat mempertimbangkan pola ini

// filename: MyComponent.js
function MyComponent() {
  return <div />;
}

sebagai peringatan, jika Anda menamai file Anda MyComponent.jsx itu akan berlalu, kecuali jika Anda mengedit aturan eslint Anda dapat memeriksa panduan gaya di sini