var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, createEffect } from 'solid-js';\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n\n  return <button>Click Me</button>;\n}\n\nrender(() => <Counter />, document.getElementById('app'))\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, createEffect } from 'solid-js';\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n  createEffect(() => {\n    console.log(\"The count is now\", count());\n  });\n\n  return <button onClick={() => setCount(count() + 1)}>Click Me</button>;\n}\n\nrender(() => <Counter />, document.getElementById('app'));\n"
		}
	]
};
var markdown = "Signal は追跡可能な値ですが、それは方程式の半分に過ぎません。それを補完するのが、追跡可能な値によって更新されるオブザーバーです。Effect はそのようなオブザーバーのひとつで、Signal に依存する副作用を実行します。\n\nEffect は `solid-js` から `createEffect` をインポートして関数を与えることで作成できます。Effect は、関数の実行中に読み込まれたあらゆる Signal を自動的にサブスクライブし、それらのいずれかが変更されると再実行します。\n\nそれでは、`count` が変化するたびに再実行される Effect を作成してみましょう:\n\n```jsx\ncreateEffect(() => {\n  console.log(\"The count is now\", count());\n});\n```\n\n`Count` Signal を更新するために、ボタンにクリックハンドラーをアタッチします。\n\n```jsx\n<button onClick={() => setCount(count() + 1)}>Click Me</button>\n```\n\nこれで、ボタンをクリックするとコンソールに書き込まれます。これは比較的簡単な例ですが、Solid の仕組みを理解するには、JSX 内のすべての式が独立した Effect であり、依存する Signal が変化するたびに再実行されることを想像してください。これが、Solid でのすべてのレンダリングの仕組みです。Solid の視点では、「すべてのレンダリングは、リアクティブシステムの副作用に過ぎない」のです。\n\n> 開発者が `createEffect` で作成した Effect は、レンダリングが完了した後に実行され、主に DOM と相互作用する更新をスケジューリングするために使用されます。早めに DOM を変更したい場合は [`createRenderEffect`](https://www.solidjs.com/docs/latest/api#createrendereffect) を使用してください。\n";
var introduction_effects = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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