How to tie YAN to reactjs?

Question

Yandex

Yandex issues such a code for its advertising. How to properly tie it to reactjs?

<!-- Yandex.RTB XXXXX -->
<div id="yandex_rtb_XXXXXX"></div>
<script type="text/javascript">
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "XXXXXX",
                renderTo: "yandex_rtb_XXXXXXX",
                horizontalAlign: false,
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

Answer 1

just paste it into the html, below the div where react is rendered, because react only "diffs" the entry-node you specified.
if you want to add in the react itself, from under the component, then you can do this

appendYaMetrix() {
  const yaDiv = document.createElement('div')
  yaDiv.setAttribute('id', 'yandex_rtb_XXXXXX')
  document.body.appendChild(yaDiv)

  const yaScript = document.createElement('script')
  yaScript.setAttribute('type', 'text/javascript')
  yaScript.innerHTML = `(function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "XXXXXX",
                renderTo: "yandex_rtb_XXXXXXX",
                horizontalAlign: false,
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");`

    document.head.appendChild(yaScript)
}

componentDidMount() {
  this.appendYaMetrix()
}