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