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 = "As you build your applications, you will want to break apart your code for better modularity and reusability. In Solid, the main way of doing that is by creating components.\n\nComponents are just functions like the `HelloWorld()` one we've been using so far. What makes them special is that they typically return JSX and can be called by JSX in other components.\n\nIn this example, let's add our `Nested` component to our app. We've defined it in another file, though you can put multiple components in the same file. First we must import it:\n\n```js\nimport Nested from \"./nested\";\n```\n\nThen we need to add the component to our JSX. Like before, we now have multiple elements we want to return, so we wrap them in a Fragment:\n\n```jsx\nfunction App() {\n  return (\n    <>\n      <h1>This is a Header</h1>\n      <Nested />\n    </>\n  );\n}\n```\n\nWhen the parent component first renders, it will execute the `Nested()` function and won't call it ever again. All updates are applied by Solid’s reactivity system which we will cover in the next couple of lessons.\n";
var introduction_components = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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