import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    ol: "ol",
    li: "li",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["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 ", jsx(_components.code, {
        children: "{ }"
      }), "-Syntax zu referenzieren.\nIn diesem Beispiel verwenden wir den String ", jsx(_components.code, {
        children: "name"
      }), " in unserem HTML, indem wir ", jsx(_components.code, {
        children: "{name}"
      }), " in einem div benutzen. Genauso binden wir ein HTML-Element ein, das direkt in die ", jsx(_components.code, {
        children: "svg"
      }), "-Variable zugewiesen wurde."]
    }), "\n", jsx(_components.p, {
      children: "Anders 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", jsx(_components.p, {
      children: "Es gibt 3 grundsätzliche Unterschiede zwischen JSX und HTML, die verhindern, dass es als Superset von HTML gesehen werden kann:"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["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 ", jsx(_components.code, {
            children: "<input>"
          }), " oder ", jsx(_components.code, {
            children: "<br>"
          }), " kopierst."]
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "JSX muss ein einzelnes Element zurückgeben. Um mehrere Elemente auf oberster Ebene zu repräsentieren, benutze man ein Fragment-Element:"
        }), "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-jsx",
            children: ["<>\n  ", jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), "Title", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              })]
            }), "\n  ", jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "p"
                }), ">"]
              }), "Some Text", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "p"
                }), ">"]
              })]
            }), "\n</>\n"]
          })
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["JSX unterstützt keine HTML-Kommentare ", jsx(_components.code, {
            children: "<!--... -->"
          }), " oder spezielle Tags wie ", jsx(_components.code, {
            children: "<!DOCTYPE>"
          }), "."]
        }), "\n"]
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Aber JSX unterstützt SVG. Probieren wir es aus, indem wir es direkt in unsere Komponente kopieren:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<svg height=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"300\""
        }), " width=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"400\""
        }), ">\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "defs"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "linearGradient"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "id"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"gr1\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "x1"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"0%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "y1"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"60%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "x2"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"100%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "y2"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"0%\""
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "stop"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "offset"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"5%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"stop-color:rgb(255,255,3);stop-opacity:1\""
            }), " />"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "stop"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "offset"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"100%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"stop-color:rgb(255,0,0);stop-opacity:1\""
            }), " />"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "linearGradient"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "defs"
            }), ">"]
          })]
        }), "\n  ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ellipse"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "cx"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"125\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "cy"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"150\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "rx"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"100\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "ry"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"60\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "fill"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"url(#gr1)\""
            }), " />"]
          })
        }), "\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Sorry"
        }), " but ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "this"
        }), " browser does not support inline ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "SVG"
        }), ".\n</svg>\n"]
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-040938c2.js.map
