var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\n\nfunction HelloWorld() {\n  const name = \"Solid\";\n  const svg = (<div>Replace me with an svg</div>)\n\n  return (\n    <>\n      <div>Hello {name}!</div>\n      {svg}\n    </>\n  )\n}\n\nrender(() => <HelloWorld />, document.getElementById('app'))\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\n\nfunction HelloWorld() {\n  const name = \"Solid\";\n  const svg = (\n    <svg height=\"300\" width=\"400\">\n      <defs>\n        <linearGradient id=\"gr1\" x1=\"0%\" y1=\"60%\" x2=\"100%\" y2=\"0%\">\n          <stop offset=\"5%\" style=\"stop-color:rgb(255,255,3);stop-opacity:1\" />\n          <stop offset=\"100%\" style=\"stop-color:rgb(255,0,0);stop-opacity:1\" />\n        </linearGradient>\n      </defs>\n      <ellipse cx=\"125\" cy=\"150\" rx=\"100\" ry=\"60\" fill=\"url(#gr1)\" />\n      Sorry but this browser does not support inline SVG.\n    </svg>\n  );\n\n  return (\n    <>\n      <div>Hello {name}!</div>\n      {svg}\n    </>\n  )\n}\n\nrender(() => <HelloWorld />, document.getElementById('app'))\n"
		}
	]
};
var markdown = "[JSX](https://ru.reactjs.org/docs/introducing-jsx.html) — это HTML-подобный синтаксис, который мы видели в примерах, и он является основой для создания компонентов в Solid.\nJSX добавляет динамические выражения, которые позволяют ссылаться на переменные и функции в вашем HTML с помощью синтаксиса `{}`.\n\nВ этом примере мы включаем строку `name` в наш HTML, используя `{name}` внутри div. Таким же образом мы включаем HTML-элемент, который был напрямую назначен переменной `svg`.\n\nВ отличие от некоторых других использующих JSX фреймворков, Solid старается максимально придерживаться стандартов HTML, позволяя просто копировать и вставлять код из ответов на Stack Overflow или из HTML-шаблонизаторов.\n\nМежду JSX и HTML есть 3 основных различия, которые не позволяют рассматривать JSX как расширение HTML:\n\n1. JSX не имеет пустых элементов. Это означает, что все элементы должны иметь закрывающий тег или быть самозакрывающимися. Помните об этом при копировании таких элементов, как `<input>` или `<br>`.\n2. JSX должен возвращать единственный элемент. Чтобы вернуть несколько элементов верхнего уровня, используйте Фрагменты:\n\n   ```jsx\n   <>\n   \t<h1>Title</h1>\n   \t<p>Some Text</p>\n   </>\n   ```\n\n3. JSX не поддерживает HTML-комментарии `<! --...-->`или специальные теги, такие как `<!DOCTYPE>`.\n\nОднако JSX поддерживает SVG. Попробуем скопировать немного SVG прямо в наш компонент:\n\n```jsx\n<svg height='300' width='400'>\n\t<defs>\n\t\t<linearGradient id='gr1' x1='0%' y1='60%' x2='100%' y2='0%'>\n\t\t\t<stop offset='5%' style='stop-color:rgb(255,255,3);stop-opacity:1' />\n\t\t\t<stop offset='100%' style='stop-color:rgb(255,0,0);stop-opacity:1' />\n\t\t</linearGradient>\n\t</defs>\n\t<ellipse cx='125' cy='150' rx='100' ry='60' fill='url(#gr1)' />\n\tSorry but this browser does not support inline SVG.\n</svg>\n```\n";
var introduction_jsx = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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