{"componentChunkName":"component---src-templates-docs-js","path":"/docs/cdn-links.html","result":{"data":{"markdownRemark":{"html":"<p>Як React, так і ReactDOM доступні через CDN.</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"gatsby-code-html\"><code class=\"gatsby-code-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">crossorigin</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>https://unpkg.com/react@16/umd/react.development.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">crossorigin</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>https://unpkg.com/react-dom@16/umd/react-dom.development.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>Зазначені вище версії призначені тільки при розробці програми, але не підходять для використання в продакшн-оточенні. Мініфіковані та оптимізовані для продакшн версії React перераховані нижче:</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"gatsby-code-html\"><code class=\"gatsby-code-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">crossorigin</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>https://unpkg.com/react@16/umd/react.production.min.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">crossorigin</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>https://unpkg.com/react-dom@16/umd/react-dom.production.min.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>Щоб завантажити конкретну версію <code class=\"gatsby-code-text\">react</code> та <code class=\"gatsby-code-text\">react-dom</code>, замініть <code class=\"gatsby-code-text\">16</code> на номер версії, яка вам потрібна.</p>\n<h3 id=\"why-the-crossorigin-attribute\"><a href=\"#why-the-crossorigin-attribute\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Для чого атрибут <code class=\"gatsby-code-text\">crossorigin</code>? </h3>\n<p>Якщо ви завантажуєте React з CDN, ми рекомендуємо вам скористатися атрибутом <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><code class=\"gatsby-code-text\">crossorigin</code></a>:</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"gatsby-code-html\"><code class=\"gatsby-code-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">crossorigin</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>...<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>Також бажано перевірити, що використаний сервіс CDN встановлює HTTP-заголовок <code class=\"gatsby-code-text\">Access-Control-Allow-Origin: *</code>:</p>\n<p>\n  <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/89baed0a6540f29e954065ce04661048/13ae7/cdn-cors-header.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n  \n  <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 350px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 66.66666666666666%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAABYlAAAWJQFJUiTwAAACG0lEQVQoz3VRyY6bQBD1/39CDjklUSZSTjnnYI0T22Bog9m84GYzi9mMAbPbecNMlMvkCXWXinpV71VPyrLMssy2bcuyPM9DHIZhFEX5iCAIECNT1/VrgOTjLyYgF0VhjDidTkmSOI5DDQO0NE11XUeeUnq9XsHEANd1+77vRkzQabvdHg4HVOAH+t3v97Hvffzex2vNBBekiqKoqipaYLJpmpCTF0UUJUVRXi5ZcA6dk4sxvh/ESXKGrTi2ndMEDdq25Xl+uVxyHMfzZDqdaop2slx1u9OpcblcPD+ghgmG5/vojtMPztS03siYvFqtBEHQNI1wZCWxc2lOj1aSpo//44XcNA3DMCCDKcsSYck20dYpUaVdXha3W9W0TZ4XVV0XZVlVVdt1t6pC/DaZEALl6/VaUZTFYsEu2YO6z65XcSMLogSd7IqHBSKIe/0IOdSwhI38j8wwS+wMwyFhsxG9wLdtx/W8Iwptxw8CbGi3113PV7Wtjiw8g4nXxwLCMMZ6wyg+nyPsNo7TBvq6oW37thu6Dm/bw2DbdjjruoGLCTyYpsGxM3nDKBK7U4kksvxqhjjPzo/Hbejyob0O3W0Y2ncWNvSNLv+Quc874ZuhflfJk7b+uhOeltOPe+GLwn369fODZ0zr0kdxP2IY8UKGOFHgF/NnaUNEgWOZ3wgMelgL/PG4zy6RpimUHrAPXadwK6va82wuyeofMEvBIDwkHrwAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    >\n      <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\"\n        alt=\"Access-Control-Allow-Origin: *\"\n        title=\"\"\n        src=\"/static/89baed0a6540f29e954065ce04661048/13ae7/cdn-cors-header.png\"\n        srcset=\"/static/89baed0a6540f29e954065ce04661048/65ed1/cdn-cors-header.png 210w,\n/static/89baed0a6540f29e954065ce04661048/13ae7/cdn-cors-header.png 350w\"\n        sizes=\"(max-width: 350px) 100vw, 350px\"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p>Така практика дозволить покращити <a href=\"/blog/2017/07/26/error-handling-in-react-16.html\">обробку помилок</a> в React 16 і новіших версіях.</p>","frontmatter":{"title":"Посилання на CDN","next":"release-channels.html","prev":"create-a-new-react-app.html"},"fields":{"path":"content/docs/cdn-links.md","slug":"docs/cdn-links.html"}}},"pageContext":{"slug":"docs/cdn-links.html"}},"staticQueryHashes":[]}