Why adding a <script> tag at runtime doesn't load the javascript file? (with react.js)
Rendering the script tag to the page with react isn't the right solution - I coudln't get it to work with JSX, I assume the same applies here. Not sure why, but just add it the plain old javascript way:
var script = document.createElement("script"); script.src = "//myapp.disqus.com/embed.js"; script.async = true; document.body.appendChild(script);
Put that in the componentWillMount of your root component.
I just added Disqus to my React app yesterday. I used the 'react-disqus-thread' module and had it up and running in no time.
Here it is on github: https://github.com/mzabriskie/react-disqus-thread
And npm: https://www.npmjs.com/package/react-disqus-thread
The component takes the following props:
- shortname - This is 'myapp' in //myapp.disqus.com/embed.js
- identifier - a unique blogId that can identify your blog post if the url changes
- title
- url - if you do not provide this, the module will detect the url and provide it.
Which browser you tested ? If you use async="true" in your script tag, it won't block. But that's only supported by a couple of browsers yet .