var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nfunction Counter() {\n  return <div>Count: 0</div>;\n}\n\nrender(() => <Counter />, document.getElementById('app'));"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n\n  setInterval(() => setCount(count() + 1), 1000);\n\n  return <div>Count: {count()}</div>;\n}\n\nrender(() => <Counter />, document.getElementById('app'));"
		}
	]
};
var markdown = "_Signals_ are the cornerstone of reactivity in Solid. They contain values that change over time; when you change a signal's value, it automatically updates anything that uses it.\n\nTo create a signal, let's import `createSignal` from `solid-js` and call it from our Counter component like this:\n```jsx\nconst [count, setCount] = createSignal(0);\n```\n\nThe argument passed to the create call is the initial value, and the return value is an array with two functions, a getter and a setter. By [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), we can name these functions whatever we like. In this case, we name the getter `count` and the setter `setCount`.\n\nIt is important to notice that the first returned value is a getter (a function returning the current value) and not the value itself. This is because the framework needs to keep track of where that signal is read so it can update things accordingly.\n\nIn this lesson, we'll use JavaScript's `setInterval` function to create a periodically incrementing counter. We can update our `count` signal every second by adding this code to our Counter component:\n\n```jsx\nsetInterval(() => setCount(count() + 1), 1000);\n```\n\nEach tick, we read the previous count, add 1, and set the new value.\n\n> Solid's signals also accept a function form where you can use the previous value to set the next value.\n> ```jsx\n> setCount(c => c + 1);\n> ```\n\nFinally, we need to read the signal in our JSX code:\n\n```jsx\nreturn <div>Count: {count()}</div>;\n```\n";
var introduction_signals = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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