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: "Solid bringt eine Context-API mit, um Daten weiterzugeben, ohne sie durch Props zu leiten. Das ist nützlich, um Signale und Stores zu teilen. Context zu benutzen hat den Vorteil, dass dieser als Teil des reaktiven Systems erzeugt und von diesem verfolgt wird."
    }), "\n", jsxs(_components.p, {
      children: ["Für den Anfang erzeugen wir ein Context-Objekt. Dieses Objekt enthält eine ", jsx(_components.code, {
        children: "Provider"
      }), "-Komponente, die verwendet wird, um unsere Daten einzubringen. Allerdings ist es Gang und gäbe, die ", jsx(_components.code, {
        children: "Provider"
      }), "-Komponente und deren ", jsx(_components.code, {
        children: "useContext"
      }), "-Konsumenten in eine andere Komponente zu schachteln, die bereits für den spezifischen Kontext konfiguriert ist."]
    }), "\n", jsxs(_components.p, {
      children: ["Und das ist genau das, was wir in dieser Anleitung haben. Du kannst die Definition für einen einfachen Zähler-Store in der Datei ", jsx(_components.code, {
        children: "counter.tsx"
      }), " sehen."]
    }), "\n", jsxs(_components.p, {
      children: ["Um Context zu benutzen, packen wir unsere Komponente ein, um es global verfügbar zu machen. Wir nutzen dazu unseren verschachtelten ", jsx(_components.code, {
        children: "CounterProvider"
      }), ". In diesem Fall geben wir ihm einen ursprünglichen Zählerstand von 1."]
    }), "\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: "() =>"
        }), " (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "CounterProvider"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "count"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{1}"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "CounterProvider"
            }), ">"]
          })]
        }), "\n), ", 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.p, {
      children: ["Als nächstes müssen wir den Counter-Context in unserer ", jsx(_components.code, {
        children: "nested.tsx"
      }), " konsumieren. Das tun wir, indem wir den bereits verpackten ", jsx(_components.code, {
        children: "useCounter"
      }), "-Konsumenten nutzen."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, { increment, decrement }] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "useCounter"
        }), "();\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: "div"
            }), ">"]
          }), "{count()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onClick"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{increment}"
            }), ">"]
          }), "+", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onClick"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{decrement}"
            }), ">"]
          }), "-", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), ">"]
          }), "\n  ", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\n);\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-3dc2685a.js.map
