title: Jquery and revslider not working in react.js
body: <p>I am new on react.js and just started working on react.</p>
  
  <ol>
  <li><p>During conversion of static HTML to react.js, jquery is only executing after refreshing the page explicitly due to which react speed is getting slow and the same thing is happening with jquery revslider.
  Have tried to write jquery in componentDidMount but still need to refresh page explicit to run jquery.  </p></li>
  <li><p>Even for third party jquery, facing the same problem need to refresh the page.</p></li>
  </ol>
  
  <p>Full code:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;/script&gt;
  &lt;script src="assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="./js/revslider.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3           /jquery.flexslider-min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    // Can also be used with $(window).load(function() 
    $(document).ready(function() {
      $('.flexslider').flexslider({
        animation: "slide"
      });
    });
    &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>revslider.js</p>
  
  <pre><code>var revapi2,
  tpj=jQuery;     
  tpj(document).ready(function() {
  if(tpj("#rev_slider_2_1").revolution === undefined){
      revslider_showDoubleJqueryError("#rev_slider_2_1");
  }else{
       revapi2 = tpj("#rev_slider_2_1").show().revolution({
       sliderType:"standard",
       jsFileLocation:"js/",
       sliderLayout:"fullwidth",
       dottedOverlay:"none",
       delay:3000,
       navigation: {
           keyboardNavigation:"off",
           keyboard_direction: "horizontal",
           mouseScrollNavigation:"off",
           mouseScrollReverse:"default",
           onHoverStop:"off",
       touch:{
           touchenabled:"on",
           touchOnDesktop:"off",
           swipe_threshold: 75,
           swipe_min_touches: 50,
           swipe_direction: "horizontal",
           drag_block_vertical: false
       }
       },
       visibilityLevels:[1240,1024,778,480],
       gridwidth:1920,
       gridheight:1080,
       lazyType:"single",
       parallax: {
           type:"mouse",
           origo:"slidercenter",
           speed:2000,
           levels:[2,3,4,5,6,7,12,16,10,50,47,48,49,50,51,55],
           disable_onmobile:"on"
       },
       shadow:0,
       spinner:"off",
       stopLoop:"off",
       stopAfterLoops:-1,
       stopAtSlide:-1,
       shuffle:"off",
       autoHeight:"off",
       hideThumbsOnMobile:"off",
       hideSliderAtLimit:0,
       hideCaptionAtLimit:0,
       hideAllCaptionAtLilmit:0,
       debugMode:false,
       fallbacks: {
           simplifyAll:"off",
           nextSlideOnWindowFocus:"off",
           disableFocusListener:false,
           panZoomDisableOnMobile:"on",
       }
     });
    }
  }); 
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>class App extends Component {
      componentDidMount(){
          sliderArrow();
          menu();
      }
      render() {
          return (
              &lt;Aux&gt;
                  &lt;Header /&gt;
                  &lt;Head /&gt;
                  &lt;DigitalEvolution /&gt;
                  &lt;OurServiceLine /&gt;
                  &lt;SomeConcepts /&gt;
                  &lt;Last /&gt;
                  &lt;Footer /&gt;
              &lt;/Aux&gt;
         );
     }
  }
  export default App;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>ReactDOM.render(
  &lt;BrowserRouter&gt;
    &lt;Switch&gt;
      &lt;Route exact path='/'  component={App} /&gt;
      &lt;Route exact path='/index.html' component={App}/&gt;
      &lt;Route exact path='/Digital-Strategies.html' component={Digital} /&gt;
      &lt;Route exact path='/Service-Lines.html' component={ServiceLines} /&gt;
      &lt;Route exact path='/Operations-Transformation.html'component=               {Operations}/&gt;
      &lt;Route exact path='/Why-us.html' component={WhyUs}/&gt;
      &lt;Route exact path='/Mission.html' component={Mission}/&gt;
      &lt;Route exact path='/Our-group.html' component={OurGroup}/&gt;
      &lt;Route exact path='/Team.html' component={Team}/&gt;
      &lt;Route exact path='/Projects.html' component={Projects}/&gt;
      &lt;Route exact path ='/Research-Development.html' component = {Research}/&gt;
      &lt;Route exact path='/News.html' component={News}/&gt;
      &lt;Route exact path='/Locations.html' component={Locations}/&gt;
    &lt;/Switch&gt;
  &lt;/BrowserRouter&gt;,document.getElementById('root'));
  </code></pre>