2 136

Was ist JSX? Und wie funktioniert React eigentlich mit HTML?
Wie bekomme ich nun HTML in meine Seite?

JSX oder auch laut die Javascript Syntax Extension vereinfacht das Erstellen von React Components.
Mit JSX können wir HTML einfach übergeben.

Wenn Du mit dem ersten React-Tutorial Deine erste React-App erstellt hast, dann kannst Du jetzt in Deiner App.js den folgenden Code einfügen:

import React from 'react';

export default function App() {
    const message = <h1>Hi, ich bin Deine erste React-Headline!</h1>;
    return ( message );
}

Du findest die App.js im Unterordner src Deiner React App.

Jede React App.js beginnt mit dem React import in Zeile 1.

Danach folgt die default function App, die den Inhalt der Seite ausgibt.

Wenn Du die React App startest

solltest Du in Deinem Browser folgende Ausgabe haben:

Das ist JSX!

JSX interpretiert den HTML Code und übergibt ihn als Javascript an React.

In der Vergangenheit wurden JSX Dateien noch mit der Endung .jsx erstellt. Inzwischen ist es nur noch .js was zwar von React selbst empfohlen wird, die Endungs jsx wird aber weiterhin unterstützt und ist auch noch sinnvoll.

Development Tools wie bspw. VSCode erkennen anhand der Dateiendung, dass es sich um eine JSX Datei handelt und bieten ganz andere Optionen für diesen Dateitypen an wie beispielsweise ein optimiertes Syntax Highlighting oder eine Autovervollständigung.

Als nächstes passen wir unsere index.js an.

Auch diese Datei findest Du im src Ordner.

import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(
    document.getElementById('root')
).render(
    <h1>Hi, ich bin Deine zweite React-Headline!</h1>
);

Wir importieren den ReactDOM und rendern damit jetzt den HTML-Code.

mit document.getElementById(‚root‘) wird der HTML Container mit der ID root ausgewählt und darin der HTML Code vom JSX hineingerendert.

Wo befindet sich denn dieser Container?
In der index.html, die im Ordner public abgelegt ist.

Bisherige React Tutorials:

1: Wie installiere ich React?

Folgende React Tutorials:

3: React Tutorial 3 – Was ist eine Komponente?

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.