title: How to load local JavaScript file in React.js?
body: <p>I have animated svg that is to be embedded in React file.The svg is displayed properly but animation doesn't occur, because the required js file is unable to load</p>
  
  <p>Following are the required js files needed for svg animation</p>
  
  <ol>
  <li>dxicons.js</li>
  </ol>
  
  <pre><code>var _0xfee4=["\x69\x6D\x61\x67\x65\x73\x2F","\x6C\x6F\x61\x64","\x6C\x65\x6E\x67\x74\x68","\x63\x6F\x6E\x74\x61\x69\x6E\x73","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x2E\x73\x76\x67","\x61\x70\x70\x65\x6E\x64","\x65\x61\x63\x68","\x2E\x77\x65\x61\x74\x68\x65\x72\x69\x63\x6F\x6E","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x61\x74\x74\x72","\x70\x6C\x61\x79","\x6E\x6F\x64\x65","\x23","\x73\x65\x6C\x65\x63\x74","\x73\x74\x79\x6C\x65","\x73\x74\x6F\x70","\x63\x6C\x69\x63\x6B","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x63\x75\x72\x73\x6F\x72","\x70\x6F\x69\x6E\x74\x65\x72","\x6D\x6F\x75\x73\x65\x65\x6E\x74\x65\x72","\x35\x30\x25\x20\x35\x30\x25","\x65\x61\x73\x65\x4F\x75\x74","\x74\x6F","\x72\x65\x73\x74\x61\x72\x74","\x6D\x6F\x75\x73\x65\x6C\x65\x61\x76\x65","\x76\x69\x73\x69\x62\x6C\x65","\x77\x61\x79\x70\x6F\x69\x6E\x74\x2D","","\x72\x65\x70\x6C\x61\x63\x65","\x6B\x65\x79","\x39\x30\x25","\x70\x61\x75\x73\x65","\x68\x69\x64\x64\x65\x6E"];var imagesPath=_0xfee4[0];var delayBetweenIcons=0.1;var useRollover=true;var hoverScale=1.05;var speed=1;var playOnStart=true;var iconLinks=[];var tls=[];var tlsIdle=[];var tlsRollover=[];var tlsReverse=[];var tlsActive=[];var iconNames=[];var iconStyles=[];var thisIcons=[];var allIconsF=[];window[_0xfee4[9]](_0xfee4[1],function(){$(_0xfee4[8])[_0xfee4[7]](function(_0x4ac6x11,_0x4ac6x12){var _0x4ac6x13=Snap(_0x4ac6x12);for(var _0x4ac6x14=0;_0x4ac6x14&lt;iconNames[_0xfee4[2]];_0x4ac6x14++){tlsActive[_0x4ac6x14]=false;if(_0x4ac6x12[_0xfee4[4]][_0xfee4[3]](iconNames[_0x4ac6x14])){var _0x4ac6x15=iconNames[_0x4ac6x14];Snap[_0xfee4[1]](imagesPath+_0x4ac6x15+_0xfee4[5],function(_0x4ac6x16){var _0x4ac6x17=_0x4ac6x13[_0xfee4[6]](_0x4ac6x16);determineIcon(_0x4ac6x11,_0x4ac6x15,_0x4ac6x17,_0x4ac6x12);});};};})});function makeVisible(_0x4ac6x17,_0x4ac6x19){_0x4ac6x17[_0xfee4[10]]({visibility:_0x4ac6x19})}var currentWaypoints=0;function playWhenVisible(_0x4ac6x1c){currentWaypoints++;setTimeout(function(){tls[_0x4ac6x1c][_0xfee4[11]]();currentWaypoints=0;},delayBetweenIcons*1000*currentWaypoints);}function determineIcon(_0x4ac6x11,_0x4ac6x15,_0x4ac6x16,_0x4ac6x12){allIconsF[_0x4ac6x11]=_0x4ac6x16;setTimeout(function(){var _0x4ac6x1e=_0x4ac6x16[_0xfee4[14]](_0xfee4[13]+_0x4ac6x15)[_0xfee4[12]];thisIcons[_0x4ac6x11]=_0x4ac6x1e;iconStyles[_0x4ac6x11]=_0x4ac6x1e[_0xfee4[15]];window[_0x4ac6x15](_0x4ac6x11,_0x4ac6x16,_0x4ac6x1e);tls[_0x4ac6x11][_0xfee4[16]]();tlsRollover[_0x4ac6x11][_0xfee4[16]]();if(useRollover&amp;&amp;iconLinks[_0x4ac6x11]){_0x4ac6x1e[_0xfee4[9]](_0xfee4[17],function(){if(tlsActive[_0x4ac6x11]){window[_0xfee4[19]][_0xfee4[18]]=iconLinks[_0x4ac6x11]}});iconStyles[_0x4ac6x11][_0xfee4[20]]=_0xfee4[21];_0x4ac6x1e[_0xfee4[9]](_0xfee4[22],function(){if(tlsActive[_0x4ac6x11]){TweenLite[_0xfee4[25]](_0x4ac6x1e,0.5,{scale:hoverScale,transformOrigin:_0xfee4[23],ease:Elastic[_0xfee4[24]]});if(tlsRollover[_0x4ac6x11]){tlsRollover[_0x4ac6x11][_0xfee4[26]]()};}});_0x4ac6x1e[_0xfee4[9]](_0xfee4[27],function(){if(tlsActive[_0x4ac6x11]){TweenLite[_0xfee4[25]](_0x4ac6x1e,0.5,{scale:1,transformOrigin:_0xfee4[23],ease:Elastic[_0xfee4[24]]});if(tlsRollover[_0x4ac6x11]){tlsRollover[_0x4ac6x11][_0xfee4[26]]()};}});};setTimeout(function(){makeVisible(_0x4ac6x16,_0xfee4[28])},30);var _0x4ac6x1f= new Waypoint({element:_0x4ac6x12,handler:function(_0x4ac6x20){var _0x4ac6x21=parseInt(this[_0xfee4[32]][_0xfee4[31]](_0xfee4[29],_0xfee4[30]));playWhenVisible(_0x4ac6x21);},offset:_0xfee4[33]});},delayBetweenIcons*1000*_0x4ac6x11);}function animationComplete(_0x4ac6x11,_0x4ac6x23){tlsActive[_0x4ac6x11]=_0x4ac6x23;if(_0x4ac6x23){if(tlsIdle[_0x4ac6x11]){tlsIdle[_0x4ac6x11][_0xfee4[11]]()}}else {if(tlsIdle[_0x4ac6x11]){tlsIdle[_0x4ac6x11][_0xfee4[34]]()}};}function restartIcons(_0x4ac6x25){for(var _0x4ac6x26=0;_0x4ac6x26&lt;_0x4ac6x25[_0xfee4[2]];_0x4ac6x26++){makeVisible(allIconsF[_0x4ac6x25[_0x4ac6x26]],_0xfee4[35]);resetLines(_0x4ac6x25[_0x4ac6x26]);};(function _0x4ac6x27(_0x4ac6x14){setTimeout(function(){makeVisible(allIconsF[_0x4ac6x25[_0x4ac6x25[_0xfee4[2]]-_0x4ac6x14]],_0xfee4[28]);tls[_0x4ac6x25[_0x4ac6x25[_0xfee4[2]]-_0x4ac6x14]][_0xfee4[26]]();if(--_0x4ac6x14){_0x4ac6x27(_0x4ac6x14)};},delayBetweenIcons*1000)})(_0x4ac6x25[_0xfee4[2]]);}
  </code></pre>
  
  <ol start="2">
  <li>dxweathericons.js</li>
  </ol>
  
  <pre><code>var socialMediaIconNames = [
      "clearNightIcon"
  ];
  
  //var socialMediaIconNames = ["chrome"];
  iconNames = iconNames.concat(socialMediaIconNames);
  var easeVar = Quad;
  var linesToReset = [];
  
  //animate each of the icons
  window['clearNightIcon'] = function(index, f, thisIcon)
  {
      var tl = new TimelineLite({onStart:animationComplete, onStartParams:[index, true], onReverseComplete:animationComplete, onReverseCompleteParams:[index, false]})
          .from(f.select("#moon").node, 1, {scale:0,transformOrigin:"50% 50%", ease:Elastic.easeOut})
          .timeScale(speed);
  
      animateStars(f, 6, tl, .4);
  
  
  
      tls[index] = tl;
      var tlRollover = new TimelineLite();
      tlsRollover[index] = tlRollover;
  }
  
  function animateStars(f, starCount, thisTl, startingTime)
  {
      var timeBetween = .2;
      for (var i = 1; i &lt; starCount + 1; i++) {
          thisTl.from(f.select("#star" + i).node, 1.5, {alpha:0, repeatDelay:1, repeat:-1, ease:Linear.easeNone, yoyo:true}, startingTime + timeBetween * i)
      };
  
  }
  
  </code></pre>
  
  <p>More two files are required, but, those are too big to paste. These shown files has animation. Any suggestions higly appreciable. Thanks in advance</p>