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コンポーネントは、これまでに使用してきた `HelloWorld()` のような関数です。コンポーネントが特別なのは、通常 JSX を返し、他のコンポーネントの JSX から呼び出すことができるからです。\n\n今回の例では、`Nested` コンポーネントをアプリに追加してみましょう。このコンポーネントは別のファイルで定義しましたが、複数のコンポーネントを同じファイルに入れることができます。まず、コンポーネントをインポートする必要があります:\n\n```js\nimport Nested from \"./nested\";\n```\n\n次に、JSX にコンポーネントを追加する必要があります。先ほどと同様に、返したい要素が複数あるので、それらを Fragment にまとめます:\n\n```jsx\nfunction App() {\n  return (\n    <>\n      <h1>This is a Header</h1>\n      <Nested />\n    </>\n  );\n}\n```\n\n親コンポーネントが最初にレンダリングされたときに `Nested()` 関数が実行され、それ以降は呼び出されません。すべての更新は Solid のリアクティビティシステムによって適用されますが、これについては次のレッスンで説明します。\n";
var introduction_components = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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