Einführung
Wenn Du dich mit React.JS beschäftigst, wirst Du schnell verschiedene Dateien und Endungen vorfinden. In React unterscheiden sich grundsätzlich die Dateierweiterungen “.js”, “.jsx” und “.tsx” durch die Art und Weise, wie sie den Code darstellen und welche Sprachfunktionen sie unterstützen. Am Ende wird jedes Mal valides Javascript kompiliert. Laienhaft kann man sagen, dass nur die Art der Programmierung in der IDE (zB. Visual Studio Code) anders ist.
Erklärung
.js Dateien
“.js” steht für JavaScript-Dateien, die den Standard-Code von JavaScript enthalten. Sie können in React verwendet werden, um eine Anwendung zu erstellen, aber es gibt keine speziellen React-spezifischen Funktionen in “.js”-Dateien. “.js” ist also schlicht und ergreifend JavaScript, also:
const Foo = () => {
return React.createElement("div", null, "Hallo Welt!");
};
.ts Dateien
Hier handelt es sich um TypeScript. Dateien mit der Endung “.ts” sind also in TypeScript, Microsofts typsichere Art JavaScript zu entwickeln und “konkrete” Typen hinzuzufügen.
const Foo: FunctionalComponent = () => {
return React.createElement("div", null, "Hello World!");
};
.jsx Dateien
Das Akronym bzw. die Endung “.jsx” steht für JavaScript-XML-Dateien, die JSX-Syntax unterstützen. JSX ist eine Erweiterung von JavaScript, die es ermöglicht, HTML-ähnlichen Code in JavaScript-Dateien zu schreiben, um die Erstellung von UI-Komponenten in React zu vereinfachen. “.jsx”-Dateien können React-Komponenten definieren und JSX-Syntax verwenden, um die Struktur und das Aussehen der Komponenten zu beschreiben.
“.jsx” ist also auch JavaScript, aber mit aktiviertem JSX, der Spracherweiterung von React. Dadurch kann vermehrt Markup direkt in den Code geschrieben werden, der dann zu einfachem JavaScript kompiliert wird, wobei das JSX durch direkte API-Aufrufe an React.createElement oder die gewünschte API ersetzt wird.
const Foo = () => {
return <div>Hello World!</div>;
};
.tsx Dateien
Und am Ende gibt es noch diese Dateiendung. Mit dem Wissen der oberen Erläuterungen, kannst Du dir bereits herleiten, wofür “.tsx” steht. Es steht für TypeScript-XML-Dateien, die eine Erweiterung von “.jsx”-Dateien sind und TypeScript-Syntax unterstützen. TypeScript ist ja bekanntlich eine Programmiersprache, die auf JavaScript aufbaut und statische Typisierung unterstützt. “.tsx”-Dateien ermöglichen es, React-Komponenten mit der zusätzlichen Sicherheit und Lesbarkeit von TypeScript zu definieren. “.tsx” ist also ähnlich wie jsx, außer dass es sich um TypeScript mit der JSX-Spracherweiterung handelt.
const Foo: FunctionalComponent = () => {
return <div>Hello World!</div>;
};
Du möchtest React lernen?
Zusammenfassung
Alle oben genannten Dateien und Spracherweiterungen erzeugen am Ende valides Javascript. Insgesamt kann man also sagen, dass “.js”-Dateien in React verwendet werden können, um Standard-JavaScript-Code zu schreiben, während “.jsx”-Dateien und “.tsx”-Dateien es ermöglichen, React-Komponenten zu definieren und die Erstellung von UI-Komponenten mit JSX-Syntax zu vereinfachen. “.tsx”-Dateien bieten zusätzlich die Sicherheit und Lesbarkeit von TypeScript.
Doch dennoch hat die Endung nichts mit der Erweiterung zu tun, wenn die entsprechende Erweiterung nicht installiert ist oder durch den Precompiler bzw. Bundler fehlerhaft konfiguriert wurde. Die Endung also alleine macht noch keine Erweiterung.
