{"componentChunkName":"component---src-templates-docs-js","path":"/docs/cdn-links.html","result":{"data":{"markdownRemark":{"html":"<p>Both React and ReactDOM are available over a 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@18/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@18/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>The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:</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@18/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@18/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>To load a specific version of <code class=\"gatsby-code-text\">react</code> and <code class=\"gatsby-code-text\">react-dom</code>, replace <code class=\"gatsby-code-text\">18</code> with the version number.</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>Why the <code class=\"gatsby-code-text\">crossorigin</code> Attribute? </h3>\n<p>If you serve React from a CDN, we recommend to keep the <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> attribute set:</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>We also recommend to verify that the CDN you are using sets the <code class=\"gatsby-code-text\">Access-Control-Allow-Origin: *</code> HTTP header:</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,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAABYlAAAWJQFJUiTwAAACJUlEQVQoz42R2W7bMBBF/f/f0L4GQVOgP5AARRwjUayVkrVaOymZokSK1ho7sgoraZ8KtOdpZoAL3Ll31bYtpdRbgBBSSuFCXddVVUVR9LEOw4AQ+rjPv1n1fc85T9MUIYQx5pxjjLMsY4xxziGEeZ5nWda2XVVVeZ4TQs7n82lhxTnf7XaO47ium+f5PM+Xy2X+P1bzPDdNo6qqaZqO46QwtSyLH4/l1X9W15yQMk6gH4SUsihODkUBUYayzPH2V3Hf95IkCYIgSZKiKOuntaVbaQjdvR9Gcdt1lDKMC86PlLGmbRljlDFckKt4GAZZlkVR1HXdtExN0gRP2Ngbzw2HcfyH7a7rBEGQZdl1XaADVdTs0rJLO9jHlDLG6n7oC1I2TVtWVdO0p9Ppw8WnbVEUZVkGABiG8fzyvH3Zhl5YH48qMIydBSGSFc0PIkUFQRgRQvwgBPruKh7HUdeBpqmB7/v+HgDN9ZyCEIQyjHGSphChqqoQyq6B4cJ23ChOkhRee15KPhSEHnCJcXU4kDiGRVFN0/SntGW4TAuXy/S+sBrGEcFEfr03tEcTPHr2C5B/KuKDZWzqMngf8/6Ydjx5G8r38/iXwE5ja2s/wOuNo955+ndDurXVO0v5tnn4aqu3+vZmff8li5/6tpimuR/6ruubph3Ht8+fNU0Vxa1lWbquS6LoOk6SprbjQpR1XecHYZpCw7T8IAzCyLSd9ebZ2we/ANftv/w2e804AAAAAElFTkSuQmCC'); 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>This enables a better <a href=\"/blog/2017/07/26/error-handling-in-react-16.html\">error handling experience</a> in React 16 and later.</p>","frontmatter":{"title":"CDN Links","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":[]}