ReactJS - .JS vs .JSX

211

Es gibt etwas, das ich bei der Arbeit sehr verwirrend finde React.

Im Internet gibt es viele Beispiele, die .jsDateien mit Reaktion verwenden, aber viele andere verwenden .jsxDateien.

Ich habe über .jsxDateien gelesen und mein Verständnis ist, dass Sie damit nur HTML-Tags in Ihre schreiben können javascript. Das Gleiche kann aber auch in .jsDateien geschrieben werden.

Was ist der tatsächliche Unterschied zwischen diesen beiden Erweiterungen .jsund .jsx?

reactjs jsx

— verwirrter Entwickler
quelle

171

Es gibt keine, wenn es um Dateierweiterungen geht. Ihr Bundler / Transpiler / was auch immer kümmert sich darum, welche Art von Dateiinhalt es gibt.

Es gibt jedoch einige andere Überlegungen bei der Entscheidung, was in einen .jsoder einen .jsxDateityp eingefügt werden soll. Da JSX kein Standard-JavaScript ist, könnte man argumentieren, dass alles, was nicht "einfaches" JavaScript ist, in seine eigenen Erweiterungen gehen sollte, z. B. .jsxfür JSX und .tsfür TypeScript.

Hier steht eine gute Diskussion zum Lesen zur Verfügung

— Henrik Andersson
quelle

6

Schöner Link! Für mich ist diese Diskussion auch etwas Interessantes!

— Felipe Augusto

1

Gut gesagt. JSX ist weder JS noch HTML. Wenn Sie ihm also eine eigene Erweiterung geben, können Sie angeben, was es ist - auch wenn die Verwendung .jsxnicht erforderlich ist

— STW

35

In den meisten Fällen wird nur der Transpiler / Bundler benötigt, der möglicherweise nicht für die Arbeit mit JSX-Dateien konfiguriert ist, sondern mit JS! Sie müssen also JS-Dateien anstelle von JSX verwenden.

Und da react nur eine Bibliothek für Javascript ist, macht es für Sie keinen Unterschied, zwischen JSX oder JS zu wählen. Sie sind komplett austauschbar!

In einigen Fällen wählen Benutzer / Entwickler aufgrund der Code-Hervorhebung möglicherweise auch JSX anstelle von JS, aber die meisten neueren Editoren zeigen die Reaktionssyntax auch in JS-Dateien korrekt an.

— marpme
quelle

27

JSX-Tags ( <Component/>) sind eindeutig kein Standard-Javascript und haben keine besondere Bedeutung, wenn Sie sie beispielsweise in ein nacktes <script>Tag einfügen. Daher sind alle React-Dateien, die sie enthalten, JSX und nicht JS.

Konventionell ist der Einstiegspunkt einer React-Anwendung normalerweise .js anstelle von .jsx, obwohl sie React-Komponenten enthält. Es könnte genauso gut .jsx sein. Alle anderen JSX-Dateien haben normalerweise die Erweiterung .jsx.

In jedem Fall besteht der Grund für die Mehrdeutigkeit darin, dass die Erweiterung letztendlich keine große Rolle spielt, da der Transpiler alle Arten von Dateien glücklich verarbeitet, solange es sich tatsächlich um JSX handelt.

Mein Rat wäre: Mach dir keine Sorgen.

— jlaitio
quelle

Even var elem = <div>Text</div>;ist kein Standard-HTML-Element. er nicht unterstützt appendChild, classListund wahrscheinlich auch andere HTML - Funktionen. Wenn Sie HTML-Tags direkt in Javascript verwenden möchten, ist es besser, das Vorlagenliteral (das Backtick `) zusammen mit innerHtmloder zu verwenden outerHtml.

— Strategie-Denker

7

Neben der erwähnten Tatsache, dass JSX-Tags kein Standard-Javascript sind, verwende ich die Erweiterung .jsx, weil Emmet damit immer noch im Editor funktioniert - Sie wissen, dieses nützliche Plugin, das HTML-Code erweitert, zum Beispiel ul> li in

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

— Gabriel Vasile
quelle

Es ist möglich, Emmet für .js-Dateien in Visual Studio Code zu verwenden, indem Sie Folgendes zu Ihrer settings.json hinzufügen: "emmet.includeLanguages": { "javascript": "javascriptreact" }aber ja, ich stimme zu, dass JSX-Code nach Möglichkeit die Erweiterung .jsx verwenden sollte.

— Thomas Higginbotham

6

Wie bereits erwähnt, JSXhandelt es sich nicht um eine Standard-Javascript-Erweiterung. Es ist besser, Ihren Einstiegspunkt der Anwendung basierend auf .jsund für die übrigen Komponenten zu benennen , die Sie verwenden können .jsx.

Ich habe einen wichtigen Grund, warum ich .JSXfür alle Dateinamen der Komponente verwende. Wenn wir in einem Großprojekt mit einer großen Menge an Code alle React-Komponenten mit der .jsxErweiterung festlegen , ist es tatsächlich einfacher, zu verschiedenen Javascript-Dateien im gesamten Projekt zu navigieren (z. B. Helfer, Middleware usw.), und Sie wissen, dass dies der Fall ist a React Component und nicht andere Typen der Javascript-Datei.

— Siavash
quelle

4

JSX ist kein Standard-JavaScript, basierend auf dem Airbnb-Styleguide 'eslint' könnte dieses Muster berücksichtigt werden

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

Als Warnung, wenn Sie Ihre Datei MyComponent.jsx benannt haben, wird sie übergeben, es sei denn, Sie bearbeiten die Eslint-Regel, können Sie den Styleguide hier überprüfen

— Majid Eltayeb
quelle