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 と呼ばれます。\n\nEffect は `solid-js` から `createEffect` をインポートすることで作成できます。実行を監視する関数を受け取ります。実行中に読み取られたすべての Signal を自動的にサブスクライブし、それらの Signal の値が変更されるたびに再実行します。\n\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 内のすべての式が、依存する Signal が変化するたびに再実行される、個別にラップされた Effect である可能性があることを想像する必要があります。これが、Solid でのすべてのレンダリングの仕組みです。Solid の視点では、「すべてのレンダリングは、リアクティブシステムの副作用に過ぎない」のです。\n\n開発者が `createEffect` で作成した Effect は、レンダリングが完了した後に実行され、主に DOM と相互作用するレンダリング後の更新をスケジュールするために使用されます。\n";
var introduction_effects = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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