ReactJS - .JS ve .JSX karşılaştırması

211

Çalışırken çok kafa karıştırıcı bulduğum bir şey var React.

İnternette .js, tepki içeren .jsxdosyaları kullanan birçok örnek vardır, ancak birçoğu dosyaları kullanır .

Ben .jsxdosyaları hakkında okudum ve benim anlayış sadece içinde html etiketleri yazmak izin olmasıdır javascript. Fakat aynı şey .jsdosyalara da yazılabilir .

Peki bu iki uzantı .jsve arasındaki gerçek fark .jsxnedir?

reactjs jsx

— confusedDeveloper
kaynak

172

Dosya uzantıları söz konusu olduğunda hiçbiri yoktur. Paketleyiciniz / transpiler / ne tür dosya içeriğinin çözüleceğine dikkat eder.

Bununla birlikte, .jsbir .jsxdosya türüne veya dosya türüne neyin konulacağına karar verirken göz önünde bulundurulması gereken başka noktalar da vardır . JSX standart JavaScript olmadığından, "düz" JavaScript olmayan her şeyin kendi uzantılarına (örneğin .jsxJSX ve .tsTypeScript için) girmesi gerektiği söylenebilir.

Bir var iyi tartışma burada okumak için uygun

— Henrik Andersson
kaynak

6

Güzel bağlantı! Benim için bu tartışma da ilginç bir şey!

— Felipe Augusto

1

İyi dedi. JSX ne JS ne de HTML değildir, bu yüzden kendi uzantısını vermek ne olduğunu belirtmeye yardımcı olur - kullanmak .jsxbir gereklilik olmasa bile

— STW

35

Çoğu durumda, sadece JSX dosyalarıyla değil, JS ile çalışacak şekilde yapılandırılmış olabilecek transpiler / bundler'a ihtiyaç vardır! Böylece JSX yerine JS dosyaları kullanmak zorunda kalırsınız.

Ve tepki sadece javascript için bir kütüphane olduğu için JSX veya JS arasında seçim yapmanız hiç fark etmez. Tamamen değiştirilebilirler!

Bazı durumlarda, kullanıcılar / geliştiriciler kod vurgulaması nedeniyle JS üzerinden JSX'i de seçebilirler, ancak daha yeni editörlerin çoğu da JS dosyalarında tepki sözdizimini doğru bir şekilde görüntülüyor.

— marpme
kaynak

27

JSX etiketleri ( <Component/>) açıkça standart javascript değildir ve <script>örneğin çıplak bir etikete koyarsanız özel bir anlamı yoktur . Bu nedenle, bunları içeren tüm React dosyaları JS değil JSX'tir.

Kural olarak, bir React uygulamasının giriş noktası React bileşenleri içermesine rağmen genellikle .jsx yerine .js'dir. .Jsx de olabilir. Diğer tüm JSX dosyaları genellikle .jsx uzantısına sahiptir.

Her durumda, belirsizlik olmasının nedeni, transpiler aslında JSX oldukları sürece her türlü dosyayı mutlu bir şekilde munches olduğu için sonuçta uzantının çok önemli olmamasıdır.

Benim tavsiyem şu: Endişelenme.

— jlaitio
kaynak

Hatta var elem = <div>Text</div>;standart bir html öğesi değildir; o desteklemez appendChild, classListmuhtemelen diğer html özellikleri ve. Html etiketlerini doğrudan javascript içinde istiyorsanız, şablon değişmezini (backtick `) innerHtmlveya ile birlikte kullanmak daha iyidir outerHtml.

— Strateji Düşünür

7

JSX etiketlerinin standart javascript olmadığı gerçeğinin yanı sıra, .jsx uzantısını kullanmamın nedeni Emmet'in hala editörde çalışmasıdır - bilirsiniz, html kodunu genişleten kullanışlı bir eklenti, örneğin ul> li içine

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

— Gabriel Vasile
kaynak

Visual Studio Code'daki Emmet for .js dosyalarını ayarlarınıza aşağıdaki gibi ekleyerek kullanmak mümkündür: "emmet.includeLanguages": { "javascript": "javascriptreact" }ancak evet, JSX kodunun mümkünse .jsx uzantısını kullanması gerektiğini kabul ediyorum.

— Thomas Higginbotham

6

Belirtildiği gibi JSXstandart bir Javascript uzantısı değildir. .jsKullanabileceğiniz geri kalan bileşenlere dayalı olarak ve Uygulama için giriş noktanızı adlandırmak daha iyidir .jsx.

.JSXTüm bileşenlerin dosya adları için kullanmamın önemli bir nedeni var. Aslında, büyük kod demetine sahip büyük ölçekli bir projede, tüm React bileşenlerini .jsxuzantı ile ayarlarsak , proje boyunca farklı javascript dosyalarına (yardımcılar, ara katman yazılımı vb.) Giderken daha kolay olur ve bunun a React Component ve diğer javascript dosyası türleri değil.

— Siavash
kaynak

4

JSX, standart JavaScript değil, Airbnb stil rehberine dayanan 'eslint' bu kalıbı düşünebilir

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

bir uyarı olarak, MyComponent.jsx dosyanızı adlandırdıysanız, eslint kuralını düzenlemezseniz, stil kılavuzunu buradan kontrol edebilirsiniz.

— Majid Eltayeb
kaynak