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",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "Wenn Du Deine Anwendung baust, wirst Du Deinen Code aufteilen, damit dieser modularer und besser wiederverwendbar ist. In Solid ist der hauptsächliche Weg, dies zu tun, Komponenten zu erstellen."
    }), "\n", jsxs(_components.p, {
      children: ["Komponenten sind einfache Funktionen wie die bereits gezeigte ", jsx(_components.code, {
        children: "HelloWorld()"
      }), ". Was sie besonders macht, ist, dass sie typischerweise JSX zurückgeben und durch JSX in anderen Komponenten aufgerufen werden können."]
    }), "\n", jsxs(_components.p, {
      children: ["Lass uns unsere ", jsx(_components.code, {
        children: "Nested"
      }), "-Komponente in diesem Beispiel zu unserer Anwendung hinzufügen. Wir haben sie in einer anderen Datei definiert, auch wenn man mehrere Komponenten in der gleichen Datei haben kann. Zuerst müssen wir sie importieren:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Nested"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"./nested\""
        }), ";\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Dann müssen wir die Komponente zu unserem JSX hinzufügen. Wie zuvor haben wir nun mehrere Elemente, die wir zurückgeben, also schachteln wir sie in ein Fragment:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "App"
        }), "(", jsx(_components.span, {
          className: "hljs-params"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "h1"
            }), ">"]
          }), "This is a Header", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "h1"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Nested"
            }), " />"]
          }), "\n    ", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\n  );\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Wenn die darüberliegende Komponente zum ersten Mal gerendert wird, wird die ", jsx(_components.code, {
        children: "Nested()"
      }), "-Funktion ausgeführt und dann nicht mehr von ihr aufgerufen. Alle Aktualisierungen werden durch Solids reaktives System ausgeführt, das in den nächsten Lektionen behandelt wird."]
    })]
  });
}
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-b8025c0d.js.map
