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 };
