So rendern Sie JSX in HTML

In diesem Tutorial erfahren Sie, wie Sie JSX in HTML rendern.

JS-Dateien einbinden

Zunächst müssen Sie die erforderlichen JS-Dateien einbinden. Die erforderlichen JS-Dateien sind:

1. Reagieren
2. DOM reagieren
3. Babel

Sie können alle diese Dateien herunterladen von cdnjs.com. Stellen Sie sicher, dass Sie die UMD-Version und nicht CJS einschließen.

• CJS: Gemeinsames JS
• UMD: Universelle Moduldefinition

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.10/babel.js"></script>

JSX rendern

Der folgende Code rendert den JSX-Code direkt in HTML.

<div id="app"></div>

<script type="text/babel">

	function MyApp() {
		return (
			<h1>Hello JSX</h1>
		)
	}

	ReactDOM.createRoot(
		document.getElementById("app")
	).render(<MyApp />)
</script>

Stellen Sie sicher, dass Sie als Typ des Skript-Tags „text/babel“ festlegen.

Rendern Sie JSX aus einer externen JS-Datei

Um JSX aus einer externen JS-Datei zu rendern, müssen Sie zunächst die JS-Datei mit einem Skript-Tag vom Typ „text/babel“ einbinden.

<script type="text/babel" src="js/MyApp.js"></script>

Dann sieht Ihre Datei „js/MyApp.js“ so aus.

// src/MyApp.js

function MyApp() {
	return (
		<h1>Hello JSX</h1>
	)
}

ReactDOM.createRoot(
	document.getElementById("app")
).render(<MyApp />)

Schauen Sie sich unsere weiteren Tutorials an Reagiere JS. Wenn Sie bei der Befolgung dieser Anleitung auf Probleme stoßen, lassen Sie es mich bitte wissen.