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 = "В Solid всего несколько методов жизненного цикла, которые контролируются нашей системой реактивности. Реактивная система создается и обновляется синхронно, поэтому всё планирование сводится к `Эффектам`, которые заполняют очередь обновления.\n\nДля удобства разработчиков мы выделили специальный `createEffect` который называется `onMount` который никогда не будет перезапущен. Это простой `Эффект`, применяя который, вы можете быть уверены, что он будет запущен единожды при начальной отрисовке:\n\nДавайте используем хук `onMount` чтобы получить несколько фотографий:\n\n```js\nonMount(async () => {\n\tconst res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);\n\tsetPhotos(await res.json());\n});\n```\n\nЖизненные циклы выполняются только в браузере, поэтому размещенный в `onMount` код не запускается на сервере во время SSR. Несмотря на то, что в этом примере мы выполняем просто загрузку данных, обычно мы используем `Ресурс` Solid для настоящей координации между сервером и браузером.\n";
var lifecycles_onmount = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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