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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Einleitung",
  "children": []
}, {
  "depth": 1,
  "value": "Was ist Solid?",
  "children": []
}, {
  "depth": 1,
  "value": "Anatomie einer Solid-Anwendung",
  "children": []
}, {
  "depth": 1,
  "value": "Dieses Lernprogramm benutzen",
  "children": []
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    em: "em",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "einleitung",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#einleitung",
        children: "#"
      }), "Einleitung"]
    }), "\n", jsx(_components.p, {
      children: "Willkommen zum Solid-Lernprogramm! Dieses Programm führt Dich an Solids Hauptfunktionen heran. Du kannst auch die API und Anleitung verwenden, um mehr über Solids Funktionsweise zu erfahren."
    }), "\n", jsxs(_components.h1, {
      id: "was-ist-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#was-ist-solid",
        children: "#"
      }), "Was ist Solid?"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid ist ein JavaScript-Framework, um interaktive Webanwendungen zu erstellen.\nMit Solid kannst Du deine HTML- und JavaScript-Kenntnisse nutzen, um Komponenten zu erstellen, die innerhalb Deiner App wiederverwendet werden können.\nSolid bietet die Werkzeuge, um Deine Komponenten mit ", jsx(_components.em, {
        children: "Reaktivität"
      }), " zu verbessern: deklarativer JavaScript-Code, der die Benutzerobefläche mit den Daten verbindet, die es nutzt und erzeugt."]
    }), "\n", jsxs(_components.h1, {
      id: "anatomie-einer-solid-anwendung",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#anatomie-einer-solid-anwendung",
        children: "#"
      }), "Anatomie einer Solid-Anwendung"]
    }), "\n", jsxs(_components.p, {
      children: ["Eine Solid-Anwendung besteht aus Funktionen, die wir Komponenten nennen. Schau Dir die ", jsx(_components.code, {
        children: "HelloWorld"
      }), "-Funktion auf der rechten Seite an: sie gibt direkt ein ", jsx(_components.code, {
        children: "div"
      }), " zurück! Dieser Mix von HTML und JavaScript nennt sich JSX. Solid bringt einen Compiler mit, der diese Tags später in DOM-Nodes umwandelt."]
    }), "\n", jsxs(_components.p, {
      children: ["JSX erlaubt uns, die meisten HTML-Elemente in unserer Anwendung zu verwenden, aber es lässt uns auch neue Elemente erstellen. Sobald wir unsere ", jsx(_components.code, {
        children: "HelloWorld"
      }), "-Funktion deklariert haben, können wir sie als ", jsx(_components.code, {
        children: "<HelloWorld>"
      }), "-Tag überall in unserer Anwendung benutzen."]
    }), "\n", jsxs(_components.p, {
      children: ["Der Einstiegspunkt für jede Solid-Anwendung ist die ", jsx(_components.code, {
        children: "render"
      }), "-Funktion. Sie nimmt 2 Parameter, eine Funktion, in der unser Anwendungscode steckt und ein existierendes DOM-Element im HTML, um diese darin einzubinden:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "HelloWorld"
            }), " />"]
          })
        }), ", ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getElementById"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'app'"
        }), "))\n"]
      })
    }), "\n", jsxs(_components.h1, {
      id: "dieses-lernprogramm-benutzen",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#dieses-lernprogramm-benutzen",
        children: "#"
      }), "Dieses Lernprogramm benutzen"]
    }), "\n", jsx(_components.p, {
      children: "Jede Lektion in diesem Lernprogramm präsentiert eine Solid-Funktion und ein Szenario, um sie auszuprobieren. Man kann zu jeder Zeit den Lösen-Knopf drücken, um sich die Lösung anzeigen zu lassen oder auf Zurücksetzen klicken, um neu zu starten. Der Code-Editor selbst hat eine Konsole und einen Ausgabe-Reiter, in dem man den kompilierten Ausgabe-Code ansehen kann, der aus dem Code erzeugt wird. Schau nach, wenn Du neugierig bist, wie Solid Code generiert."
    }), "\n", jsx(_components.p, {
      children: "Viel Spass!"
    })]
  });
}
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-a505e9fd.js.map
