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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Einstieg in Solid",
  "children": [{
    "depth": 2,
    "value": "Solid ausprobieren",
    "children": []
  }, {
    "depth": 2,
    "value": "Solid lernen",
    "children": []
  }, {
    "depth": 2,
    "value": "Solids Philosophie",
    "children": [{
      "depth": 3,
      "value": "1. Deklarative Daten",
      "children": []
    }, {
      "depth": 3,
      "value": "2. Verschwindende Komponenten",
      "children": []
    }, {
      "depth": 3,
      "value": "3. Trennung von Lesen/Schreiben",
      "children": []
    }, {
      "depth": 3,
      "value": "4. Einfach ist besser als leicht",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Web Components",
    "children": []
  }, {
    "depth": 2,
    "value": "Server Rendering",
    "children": []
  }, {
    "depth": 2,
    "value": "Keine Kompilation?",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    h2: "h2",
    p: "p",
    pre: "pre",
    code: "code",
    span: "span",
    h3: "h3"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "einstieg-in-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#einstieg-in-solid",
        children: "#"
      }), "Einstieg in Solid"]
    }), "\n", jsxs(_components.h2, {
      id: "solid-ausprobieren",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-ausprobieren",
        children: "#"
      }), "Solid ausprobieren"]
    }), "\n", jsxs(_components.p, {
      children: ["Mit Abstand die einfachste Möglichkeit, in Solid einzusteigen, ist, es online auszuprobieren. Unser REPL auf ", jsx(_components.a, {
        href: "https://playground.solidjs.com",
        children: "https://playground.solidjs.com"
      }), " ist der perfekte Weg, um Ideen auszuprobieren. Ähnlich gut ist ", jsx(_components.a, {
        href: "https://codesandbox.io/",
        children: "https://codesandbox.io/"
      }), ", wo du jedes ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md",
        children: "unserer Beispiele"
      }), " anpassen kannst."]
    }), "\n", jsxs(_components.p, {
      children: ["Alternativ kann man auch unsere einfachen ", jsx(_components.a, {
        href: "https://vitejs.dev/",
        children: "Vite"
      }), "-Vorlagen nutzen, indem man folgende Anweisungen ins Terminal eingibt:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npx degit solidjs/templates/js my-app\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# oder yarn oder pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# oder yarn oder pnpm"
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Oder für TypeScript:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npx degit solidjs/templates/ts my-app\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# oder yarn oder pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# oder yarn oder pnpm"
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "solid-lernen",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-lernen",
        children: "#"
      }), "Solid lernen"]
    }), "\n", jsx(_components.p, {
      children: "Bei Solid geht es ganz um kleine zusammenpassende Teile, die als Bausteine für Anwendungen dienen. Diese Teile sind hauptsächlich Funktionen, die oberflächlich viele übergeordnete APIs bilden. Glücklicherweise muss man nicht viel darüber wissen, um mit Solid zu starten."
    }), "\n", jsx(_components.p, {
      children: "Die beiden wichtigsten Bausteine, die zur Verfügung stehen, sind Komponenten und reaktive Primitiven."
    }), "\n", jsx(_components.p, {
      children: "Komponenten sind Funktionen, die ein Props-Objekt nehmen und JSX-Elemente zurückgeben einschließlich nativer DOM-Elemente und anderer Komponenten. Sie können als JSX-Elemente in PascalCase geschrieben werden:"
    }), "\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: "MyComponent"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "Hello {props.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n}\n\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComponent"
        }), " name=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Solid\""
        }), " />;\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Komponenten sind insofern leichtgewichtig, als sie nicht selbst Zustand verwalten und keine eigenen Instanzen erzeugen müssen. Stattdessen funktionieren sie als Fabrik-Funktionen für DOM-Elemente und reaktive Primitiven."
    }), "\n", jsx(_components.p, {
      children: "Solids feingranulare Reaktivität baut auf 3 einfachen Primitiven auf: Signale, Memos und Effekte. Zusammen formen sie eine Maschine zur automatischen Verfolgung und Synchronisation, die sicherstellt, dass die Ausgabe aktuell bleibt. Reaktive Berechnungen nehmen dabei die Form von in Funktionen gekapselten Ausdrücken, die synchron ausgeführt werden, an."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [first, setFirst] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"JSON\""
        }), ");\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [last, setLast] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Bourne\""
        }), ");\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsxs(_components.span, {
          className: "hljs-string",
          children: ["`", jsx(_components.span, {
            className: "hljs-subst",
            children: "${first()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${last()}"
          }), "`"]
        }), "));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Es gibt noch mehr über ", jsx(_components.a, {
        href: "/guides/reactivity",
        children: "Solids Reaktivität"
      }), " und ", jsx(_components.a, {
        href: "/guides/rendering",
        children: "Solids Rendering"
      }), " zu lernen."]
    }), "\n", jsxs(_components.h2, {
      id: "solids-philosophie",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solids-philosophie",
        children: "#"
      }), "Solids Philosophie"]
    }), "\n", jsx(_components.p, {
      children: "Das Design von Solid basiert auf Ansichten über bestimmte Prinzipien und Werten, die uns helfen, Webseiten und Anwendungen auf die beste Art zu bauen. Es ist einfacher, zu lernen, Solid zu nutzen, wenn man die Philosophie dahinter kennt."
    }), "\n", jsxs(_components.h3, {
      id: "1-deklarative-daten",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-deklarative-daten",
        children: "#"
      }), "1. Deklarative Daten"]
    }), "\n", jsx(_components.p, {
      children: "Deklarative Daten ist die Praxis, die Beschreibung des Datenverhaltens an dessen Deklaration zu hängen. Das erlaubt eine einfache Zusammenstellung aller Aspekte des Datenverhaltens am gleichen Platz."
    }), "\n", jsxs(_components.h3, {
      id: "2-verschwindende-komponenten",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-verschwindende-komponenten",
        children: "#"
      }), "2. Verschwindende Komponenten"]
    }), "\n", jsx(_components.p, {
      children: "Es ist schwer genug, Komponenten zu strukturieren, ohne Aktualisierungen zu bedenken. Solids Aktualisierungslogik ist unabhängig von den Komponenten. Komponenten-Funktionen werden nur einmal aufgerufen und hören dann auf, zu existieren. Komponenten existieren, um den Code zu organisieren und mehr nicht."
    }), "\n", jsxs(_components.h3, {
      id: "3-trennung-von-lesenschreiben",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-trennung-von-lesenschreiben",
        children: "#"
      }), "3. Trennung von Lesen/Schreiben"]
    }), "\n", jsx(_components.p, {
      children: "Präzise Kontrolle und Vorhersagbarkeit sind die Grundlage für bessere Systeme. Wir brauchen keine völlige Unveränderlichkeit, um unidirektionalen Datenfluss zu erzwingen, sondern nur die Fähigkeit, eine bewusste Entscheidung zu treffen, welche Nutzer schreiben können und welche nicht."
    }), "\n", jsxs(_components.h3, {
      id: "4-einfach-ist-besser-als-leicht",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-einfach-ist-besser-als-leicht",
        children: "#"
      }), "4. Einfach ist besser als leicht"]
    }), "\n", jsx(_components.p, {
      children: "Eine schwere Lektion für feingranulare Reaktivität. Explizite und konsistente Konventionen sind selbst dann wertvoll, wenn sie etwas mehr Aufwand erfordern. Das Ziel ist es, minimale Werkzeuge zur Verfügung zu stellen, die zu einer Grundlage werden, auf der man aufbauen kann."
    }), "\n", jsxs(_components.h2, {
      id: "web-components",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#web-components",
        children: "#"
      }), "Web Components"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid wurde mit dem Wunsch geschaffen, Web Components als Bürger erster Klasse zu behandeln. Mit der Zeit unterlag das Design einer Evolution und die Ziele wurden angepasst. Dennoch ist Solid ein guter Weg, um Web Components zu erstellen. ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid-element",
        children: "Solid Element"
      }), " erlaubt es, Solid-Komponenten zu schreiben und als kleine und performante Web Components zu verpacken. Innerhalb von Solid-Anwendungen ist Solid Element in der Lage, Solids Context API zu verwenden und Solids Portal-Komponente unterstützt mit Shadow DOM isolierte Styles."]
    }), "\n", jsxs(_components.h2, {
      id: "server-rendering",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#server-rendering",
        children: "#"
      }), "Server Rendering"]
    }), "\n", jsx(_components.p, {
      children: "Solid hat eine dynamische Serverseitige Render-Lösung die eine wirklich isomorphische Entwicklungserfahrung ermöglicht. Durch die Nutzung unserer Resource-Primitive sind asnychrone Daten-Abfragen einfach gemacht und, noch wichtiger, automatisch zwischen Client und Browser serialisiert und synchronisiert."
    }), "\n", jsxs(_components.p, {
      children: ["Da Solid asynchrones Rendern in Datenströme unterstützt, kann man seinen Code einmal schreiben und auch auf dem Server ausführen. Das heisst, das Fähigkeiten wie ", jsx(_components.a, {
        href: "https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense",
        children: "render-as-you-fetch"
      }), " und Code-splitting in Solid einfach funktionieren."]
    }), "\n", jsxs(_components.p, {
      children: ["Mehr Informationen bietet das ", jsx(_components.a, {
        href: "/guides/server#server-side-rendering",
        children: "Server Handbuch"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "keine-kompilation",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#keine-kompilation",
        children: "#"
      }), "Keine Kompilation?"]
    }), "\n", jsx(_components.p, {
      children: "Du magst kein JSX? Dich stören etwas mehr manuelle Arbeit beim verpacken von Ausdrücken, schlechtere Performance und größere Bundle-Größen nicht? Man kann alternativ auch Solid-Anwendungen mit Tagged Template Literalen oder HyperScript in nicht-kompilierten Umgebungen verwenden."
    }), "\n", jsxs(_components.p, {
      children: ["Das kann man direkt im Browser mit ", jsx(_components.a, {
        href: "https://www.skypack.dev/",
        children: "Skypack"
      }), " laufen lassen:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-html",
        children: [jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n    ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), " ", jsx(_components.span, {
            className: "hljs-attr",
            children: "type"
          }), "=", jsx(_components.span, {
            className: "hljs-string",
            children: "\"module\""
          }), ">"]
        }), jsxs(_components.span, {
          className: "javascript",
          children: ["\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " {\n        createSignal,\n        onCleanup,\n      } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " { render } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/web\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " html ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/html\""
          }), ";\n\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "App"
          }), " = (", jsx(_components.span, {
            className: "hljs-params"
          }), ") => {\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " [count, setCount] = ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "createSignal"
          }), "(", jsx(_components.span, {
            className: "hljs-number",
            children: "0"
          }), "),\n          timer = ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "setInterval"
          }), "(", jsx(_components.span, {
            className: "hljs-function",
            children: "() =>"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "setCount"
          }), "(", jsx(_components.span, {
            className: "hljs-title function_",
            children: "count"
          }), "() + ", jsx(_components.span, {
            className: "hljs-number",
            children: "1"
          }), "), ", jsx(_components.span, {
            className: "hljs-number",
            children: "1000"
          }), ");\n        ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "onCleanup"
          }), "(", jsx(_components.span, {
            className: "hljs-function",
            children: "() =>"
          }), " ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "clearInterval"
          }), "(timer));\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "return"
          }), " html`", jsx(_components.span, {
            className: "xml",
            children: jsxs(_components.span, {
              className: "hljs-tag",
              children: ["<", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            })
          }), jsx(_components.span, {
            className: "hljs-subst",
            children: "${count}"
          }), jsxs(_components.span, {
            className: "xml",
            children: [jsxs(_components.span, {
              className: "hljs-tag",
              children: ["</", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            }), "`"]
          }), ";\n      };\n      ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "render"
          }), "(", jsx(_components.span, {
            className: "hljs-title class_",
            children: "App"
          }), ", ", jsx(_components.span, {
            className: "hljs-variable language_",
            children: "document"
          }), ".", jsx(_components.span, {
            className: "hljs-property",
            children: "body"
          }), ");\n    "]
        }), jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Man bedenke, dass man immer noch die dazugehörige DOM Expression Library benötigt, damit das mit TypeScript funktioniert. Man kann Tagged Template Literals mit ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/lit-dom-expressions",
        children: "Lit DOM Expressions"
      }), " oder HyperScript mit ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/hyper-dom-expressions",
        children: "Hyper DOM Expressions"
      }), " benutzen."]
    })]
  });
}
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=getting-started-fd94c26f.js.map
