var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\n\nfunction App() {\n  return (\n    <h1>This is a Header</h1>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "nested",
			content: "export default () => <p>This is a Paragraph</p>"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport Nested from \"./nested\";\n\nfunction App() {\n  return (\n    <>\n      <h1>This is a Header</h1>\n      <Nested />\n    </>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "nested",
			content: "export default () => <p>This is a Paragraph</p>"
		}
	]
};
var markdown = "アプリケーションを構築する際には、モジュール性や再利用性を高めるためにコードを分割する必要があります。Solid では、主にコンポーネントを作成することでこれを実現しています。\n\nコンポーネントは、これまでのチュートリアルで使用してきたような単なる関数です。コンポーネントは親の JSX 内でタグとして表すことができ、最初のレンダリング時に実行されます。その後、コンポーネントが呼び出されることはありません。すべての更新は、Solid のリアクティブシステムによって行われます。これについては、これからのレッスンで説明します。\n\n今回の例では、`Nested` コンポーネントをアプリに追加してみましょう。このコンポーネントは別のファイルで定義しましたが、複数のコンポーネントを同じファイルに入れることができます。まず、コンポーネントをインポートする必要があります。\n\n```js\nimport Nested from \"./nested\";\n```\n\nそして、それを JSX に追加する必要があります。この例では、返したい要素が 2 つあるので、それらを Fragment にまとめることができます。\n\n```jsx\nfunction App() {\n  return (\n    <>\n      <h1>This is a Header</h1>\n      <Nested />\n    </>\n  );\n}\n```\n";
var introduction_components = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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