ReactJS - .JS vs .JSX

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?

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

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.

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.

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>

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.

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