var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\n\nfunction App() {\n  return \"SVG をここへ\";\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\n\nfunction App() {\n  return (\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\nrender(() => <App />, document.getElementById(\"app\"));"
		}
	]
};
var markdown = "JSX は、これらの例の中にある HTML のような構文で、Solid で宣言的なビューを作成する際の中核となるものです。JSX は、属性や挿入のための動的な表現を `{ }` の形式で追加します。これらの JSX ブロックは、最終的には JavaScript コードと HTMLTemplateElements の組み合わせにコンパイルされ、コードの実行時に複製されます。これにより、サイズとパフォーマンスの点で最適な作成コードを実現しています。\n\nJSX を使用する他のフレームワークとは異なり、Solid は可能な限り HTML 標準に近づけようとしており、Stack Overflow の回答やデザイナーが作成したテンプレートから簡単にコピー&ペーストできるようになっています。\n\nJSX と HTML の間には、JSX が HTML のスーパーセットと見なされないようにするような 3 つの主な違いがあります。\n1. JSX には void 要素がありません。つまり、すべての要素に閉じタグまたは自己終了が必要となります。`<input>` や `<br>` のようなものをコピーする際には、この点に注意してください。\n2. JSX は単一の要素を返さなければなりません。複数のトップレベル要素を表現するには、Fragment 要素を使用します。\n\n```jsx\n<>\n  <h1>Title</h1>\n  <p>Some Text</p>\n</>\n```\n3. JSX は HTML コメントや DocType のような特殊なタグをサポートしていません。\n\nしかし、JSX は SVG をサポートしています。それでは、SVG をコンポーネントに直接コピーしてみましょう。\n```jsx\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";
var introduction_jsx = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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