How to integrate the Twitter widget into Reactjs?

Question

I want to add the Twitter widget into React, but I don't know where to start or how to do it. I am very new to React JS.

Here is the HTML version of the code:

<div class="Twitter">   <a class="twitter-timeline" href="https://twitter.com/<%= @artist.twitter %>" data-widget-id="424584924285239296" data-screen-name='<%= @artist.twitter %>'>Tweets by @<%= @artist.twitter %></a>   <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> 

And here is what I have so far:

React.DOM.div   className: 'Twitter'   children: [     React.DOM.a       className: 'twitter-timeline'       href: "https://twitter.com/" + artist.twitter       'data-widget-id': "424584924285239296"        'data-screen-name': artist.twitter       children: 'Tweets by ' + artist.twitter     React.DOM.script       children: ...   ] 

I was planning to add the script where the dots (...) are, but that doesn't work. Thank you for your help.

Answer 1

First load Widget JS in your index.html(before your React scripts). Then in your component, simply do the following. The widget JS will rescan the DOM.

componentDidMount: function() {   twttr.widgets.load() } 

See: https://dev.twitter.com/web/javascript/initialization