var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal, onMount, For } from \"solid-js\";\nimport \"./styles.css\";\n\nfunction App() {\n  const [photos, setPhotos] = createSignal([]);\n\n  return <>\n    <h1>Photo album</h1>\n\n    <div class=\"photos\">\n      <For each={photos()} fallback={<p>Loading...</p>}>{ photo =>\n        <figure>\n          <img src={photo.thumbnailUrl} alt={photo.title} />\n          <figcaption>{photo.title}</figcaption>\n        </figure>\n      }</For>\n    </div>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "styles",
			type: "css",
			content: ".photos {\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  grid-gap: 8px;\n}\n\nfigure, img {\n  width: 100%;\n  margin: 0;\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal, onMount, For } from \"solid-js\";\nimport \"./styles.css\";\n\nfunction App() {\n  const [photos, setPhotos] = createSignal([]);\n\n  onMount(async () => {\n    const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);\n    setPhotos(await res.json());\n  });\n\n  return <>\n    <h1>Photo album</h1>\n\n    <div class=\"photos\">\n      <For each={photos()} fallback={<p>Loading...</p>}>{ photo =>\n        <figure>\n          <img src={photo.thumbnailUrl} alt={photo.title} />\n          <figcaption>{photo.title}</figcaption>\n        </figure>\n      }</For>\n    </div>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "styles",
			type: "css",
			content: ".photos {\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  grid-gap: 8px;\n}\n\nfigure, img {\n  width: 100%;\n  margin: 0;\n}"
		}
	]
};
var markdown = "Es gibt nur wenige Lifecycle-Methoden in Solid, da alles innerhalb des reaktiven Systems lebt und stirbt. Das reaktive System wird synchron erzeugt und aktualisiert, so dass die einzigen Zwischenschritte in Effekten bestehen, die ans Ende der Aktualisierung geschoben werden.\n\nWir haben festgestellt, dass Entwickler bei einfachen Aufgaben oft nicht auf diese Weise denken, und um ihnen die Dinge etwas einfacher zhu machen, haben wir einen nicht-verfolgten `createEffect`-Aufruf mit `onMount` verfügbar gemacht. Es ist nur ein Effekt-Aufruf, aber Du kannst ihn in der Sicherheit einsetzen, dass er nur ein Mal pro Komponente laufen wird, sobald diese initial gerendert wurde.\n\nLass uns `onMount` benutzen, um ein paar Photos zu holen:\n```js\nonMount(async () => {\n  const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);\n  setPhotos(await res.json());\n});\n```\n\nLifecycle-Methoden laufen nur im Browser, daher hat man den Vorteil, dass er nicht während des serverseitigen Rendering läuft. Obwohl wir in diesem Beispiel Daten vom Server laden, machen wir das normalerweise mit Resource für echte Server-/Browser-Koordination.\n";
var lifecycles_onmount = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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