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\tonMount(async () => {\n\t\tconst res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);\n\t\tsetPhotos(await res.json());\n\t});\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 = "Solid では、すべてがリアクティブシステムによって生きたり死んだりするので、ライフサイクルがほとんどありません。リアクティブシステムは同期的に作成・更新されるため、唯一のスケジュールは、更新の最後にプッシュされる Effect になります。\n\n単純な作業をしている開発者はこのような考え方をしないことが多いので、少しでも簡単にするために、非追跡な（再実行されない） `createEffect` の呼び出しを `onMount` でエイリアス化しました。これは単なる Effect の呼び出しですが、最初のレンダリングがすべて完了した後、コンポーネントに対して一度だけ実行されることを確信して使用できます。\n\nそれでは、`onMount` フックを使って、写真を取得してみましょう:\n```js\nonMount(async () => {\n  const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);\n  setPhotos(await res.json());\n});\n```\n\nライフサイクルはブラウザでしか実行されないので、`onMount` にコードを置くことで、SSR 時にサーバー上で実行されないというメリットがあります。この例ではデータのフェッチを行っていますが、通常は真のサーバー/ブラウザ連携のために Solid の Resource を使用します。\n";
var lifecycles_onmount = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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