Skip to content

Instantly share code, notes, and snippets.

@jotto

jotto/react-15-and-no-script.html

Created June 29, 2017 06:53
Show Gist options
  • Save jotto/06107597902486a8f8ed455af01ae0e1 to your computer and use it in GitHub Desktop.
Save jotto/06107597902486a8f8ed455af01ae0e1 to your computer and use it in GitHub Desktop.
Download ZIP
How to make React 15 work with noscript tags and SSR
Raw
react-15-and-no-script.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ReactJS 15.5.0 working example for noscript tags and SSR: 2017-06-28</title>
</head>
<body>
<div id='root'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom-server.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js'></script>
<script type='text/babel'>
// react can't do noscript children with content see the following:
// - https://github.com/facebook/react/issues/7607
// - https://github.com/facebook/react/issues/1252
// also, somewhat unrelated but affects this snippet:
// - 15.4.{1,2} will throw an "Invariant Violation" WARNING (won't cause problems)
// when using ReactDOM and ReactDOMServer
// see: https://github.com/facebook/react/issues/8487 (hence using 15.5.0)
const Noscript = props => {
const staticMarkup = ReactDOMServer.renderToStaticMarkup(props.children);
return <noscript dangerouslySetInnerHTML={{ __html: staticMarkup }} />;
};
const App = () => {
return (
<div>
<Noscript>
<iframe
src="http://example.com"
height="0"
width="0"
style={{ display: "none", visibility: "hidden" }}
/>
</Noscript>
</div>
);
};
window.el = <App />;
window.rendered = ReactDOM.render(window.el, document.getElementById("root"));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment