var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\n\nfunction App() {\n  return (\n    <h1>This is a Header</h1>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "nested",
			content: "export default () => <p>This is a Paragraph</p>"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport Nested from \"./nested\";\n\nfunction App() {\n  return (\n    <>\n      <h1>This is a Header</h1>\n      <Nested />\n    </>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "nested",
			content: "export default () => <p>This is a Paragraph</p>"
		}
	]
};
var markdown = "Wenn Du Deine Anwendung baust, wirst Du Deinen Code aufteilen, damit dieser modularer und besser wiederverwendbar ist. In Solid ist der hauptsächliche Weg, dies zu tun, Komponenten zu erstellen.\n\nKomponenten sind einfache Funktionen wie die bereits gezeigte `HelloWorld()`. Was sie besonders macht, ist, dass sie typischerweise JSX zurückgeben und durch JSX in anderen Komponenten aufgerufen werden können.\n\nLass uns unsere `Nested`-Komponente in diesem Beispiel zu unserer Anwendung hinzufügen. Wir haben sie in einer anderen Datei definiert, auch wenn man mehrere Komponenten in der gleichen Datei haben kann. Zuerst müssen wir sie importieren:\n\n```js\nimport Nested from \"./nested\";\n```\n\nDann müssen wir die Komponente zu unserem JSX hinzufügen. Wie zuvor haben wir nun mehrere Elemente, die wir zurückgeben, also schachteln wir sie in ein Fragment:\n\n```jsx\nfunction App() {\n  return (\n    <>\n      <h1>This is a Header</h1>\n      <Nested />\n    </>\n  );\n}\n```\n\nWenn die darüberliegende Komponente zum ersten Mal gerendert wird, wird die `Nested()`-Funktion ausgeführt und dann nicht mehr von ihr aufgerufen. Alle Aktualisierungen werden durch Solids reaktives System ausgeführt, das in den nächsten Lektionen behandelt wird.\n";
var introduction_components = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { introduction_components as default, lesson, markdown, solved };
