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 ist die HTML-artige Syntax, die wir in diesen Beispielen gesehen haben und die Grundlage in Solid, um Komponenten zu bauen.\nJSX fügt dynamische Ausdrücke hinzu, die es erlauben, Variablen und Funktionen innerhalb des HTMLs mit der `{ ]`-Syntax zu referenzieren.\nIn diesem Beispiel verwenden wir den String `name` in unserem HTML, indem wir `{name}` in einem div benutzen. Genauso binden wir ein HTML-Element ein, das direkt in die `svg`-Variable zugewiesen wurde.\n\nAnders als andere Frameworks, die JSX benutzen, versucht Solid, so nahe wie möglich an HTML-Standards zu bleiben, um einfaches Kopieren und Einfügen von Anworten auf Stack Overflow oder die Nutzung von Template-Buildern durch Designer zu ermöglichen.\n\nEs gibt 3 grundsätzliche Unterschiede zwischen JSX und HTML, die verhindern, dass es als Superset von HTML gesehen werden kann:\n1. JSX hat keine void-Elemente. Alle Elemente müssen ein schließendes Tag haben oder sich selbst schließen. Bedenke dies, wenn Du Elemente wie `<input>` oder `<br>` kopierst.\n2. JSX muss ein einzelnes Element zurückgeben. Um mehrere Elemente auf oberster Ebene zu repräsentieren, benutze man ein Fragment-Element:\n\n   ```jsx\n   <>\n     <h1>Title</h1>\n     <p>Some Text</p>\n   </>\n   ```\n3. JSX unterstützt keine HTML-Kommentare `<!--... -->` oder spezielle Tags wie `<!DOCTYPE>`.\n\nAber JSX unterstützt SVG. Probieren wir es aus, indem wir es direkt in unsere Komponente kopieren:\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 };
