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",
    em: "em",
    code: "code",
    pre: "pre",
    span: "span",
    a: "a",
    blockquote: "blockquote"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: [jsx(_components.em, {
        children: "Signale"
      }), " sind der Grundpfeiler der Reaktivität in Solid. Sie enthalten einen Wert, der sich mit der Zeit ändert; wenn er geändert wird, wird automatisch alles aktualisiert, was das Signal benutzt."]
    }), "\n", jsxs(_components.p, {
      children: ["Um ein Signal zu erstellen, importiere man ", jsx(_components.code, {
        children: "createSignal"
      }), " aus ", jsx(_components.code, {
        children: "solid-js"
      }), " und ruft es wie folgt in unserer Counter-Komponente auf:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [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"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Das Funktionsargument im create-Aufruf ist der initiale Wert und die Rückgabe ist ein Array mit zwei Funktionen, einem Getter und einem Setter. Mit ", jsx(_components.a, {
        href: "https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment",
        children: "Destrukturierung"
      }), " können wir diese Funktionen nach Belieben benennen. In diesem Fall, nennen wir den Getter ", jsx(_components.code, {
        children: "count"
      }), " und den Setter ", jsx(_components.code, {
        children: "setCount"
      }), "."]
    }), "\n", jsx(_components.p, {
      children: "Es ist wichtig, darauf zu achten, dass der erste zurückgegebene Wert ein Getter ist (eine Funktion, die den Wert zurückgibt) und nicht der Wert selbst. Das ist der Fall, weil das Framework verfolgen muss, wo das Signal gelesen wird, so dass es alle Aktualisierungen entsprechend weiterreichen kann."
    }), "\n", jsxs(_components.p, {
      children: ["In dieser Lektion werden wir JavaScripts ", jsx(_components.code, {
        children: "setInterval"
      }), "-Funktion benutzen, um einen fortlaufend hochzählenden Zähler zu erstellen. Wir können unser ", jsx(_components.code, {
        children: "count"
      }), "-Signal jede Sekunde aktualisieren, indem wir den folgenden Code unserer Counter-Komponente hinzufügen:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [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"]
      })
    }), "\n", jsx(_components.p, {
      children: "Jeden Tick lesen wir den vorherigen Zählerstand, addieren 1 und setzen den neuen Wert."
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsx(_components.p, {
        children: "Solids Signale akzeptieren auch die Funktions-Form, bei der man den vorherigen Wert erhält und den nächsten zurückgibt."
      }), "\n", jsx(_components.pre, {
        children: jsxs(_components.code, {
          className: "hljs language-jsx",
          children: [jsx(_components.span, {
            className: "hljs-title function_",
            children: "setCount"
          }), "(", jsxs(_components.span, {
            className: "hljs-function",
            children: [jsx(_components.span, {
              className: "hljs-params",
              children: "c"
            }), " =>"]
          }), " c + ", jsx(_components.span, {
            className: "hljs-number",
            children: "1"
          }), ");\n"]
        })
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Zuguterletzt müssen wir das Signal in unserem JSX lesen:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [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"
            }), ">"]
          }), "Count: {count()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\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-379f2fe9.js.map
