title: What is the right way to use Jquery in React?
body: <p>I am trying to work on a project which is using a Layout/Template which uses a lot of jQuery. </p>
  
  <p>I have learned to integrate the template with ReactJS Project, however, I am looking for a solution where I can completely replace the jQuery.</p>
  
  <p>One of my solution is to use jQuery functions inside <code>ComponentDidMount()</code> or <code>Render()</code> function of React.</p>
  
  <p>Is this approach correct? Is it the right way?</p>
  
  <p>I have attached a small example below:</p>
  
  <pre><code>import React, { Component } from 'react';
  import '../stylesheets/commonstyles.css';
  import '../stylesheets/bootstrap-sidebar.css';
  import '../stylesheets/sidebar1.css';
  import $ from 'jquery';
   class NavBar extends Component {
     constructor(props){
  
        super(props);
        this.openSidebar = this.openSidebar.bind(this);
  
     }
  
    openSidebar(){
  
        console.log('hello sidebar');
  
    }
    componentWillMount(){
  
      $(document).ready(function () {
          $('#sidebarCollapse').on('click', function () {
              $('#sidebar').toggleClass('active');
          });
          $('.search-btn').on("click", function () {
            $('.search').toggleClass("search-open");
              return false;
             });
  
      });
  
  }
  </code></pre>
  
  <p>This is my <code>Render</code> Function.</p>
  
  <pre><code>{/* &lt;!--- SIDEBAR -------&gt; */}
   &lt;div class="wrapper" style={{paddingTop:60}}&gt;
             {/* &lt;!-- Sidebar Holder --&gt; */ }
              &lt;nav id="sidebar"&gt;
                  &lt;div class="sidebar-header"&gt;
                      &lt;h3&gt;Dashboard&lt;/h3&gt;
                      &lt;strong&gt;BS&lt;/strong&gt;
                  &lt;/div&gt;
  
                  &lt;ul class="list-unstyled components"&gt;
                      &lt;li class="active"&gt;
                          &lt;a href="#homeSubmenu" /*data-toggle="collapse" */ aria-expanded="false"&gt;
                              &lt;i class="ti-home"&gt;&lt;/i&gt;
                              Home
                          &lt;/a&gt;
                          &lt;ul class="collapse list-unstyled" id="homeSubmenu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Home 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Home 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Home 3&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#" style={{color:"white"}}&gt;
                              &lt;i class="ti-align-justify" &gt;&lt;/i&gt;
                              About
                          &lt;/a&gt;
                          &lt;a href="#pageSubmenu" /*data-toggle="collapse" */ aria-expanded="false" style={{color:"white"}}&gt;
                              &lt;i class="ti-text"&gt;&lt;/i&gt;
                              Pages
                          &lt;/a&gt;
                          &lt;ul class="collapse list-unstyled" id="pageSubmenu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#" style={{color:"white"}}&gt;
                              &lt;i class="ti-paragraph"&gt;&lt;/i&gt;
                              Portfolio
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#" style={{color:"white"}}&gt;
                              &lt;i class="ti-control-play"&gt;&lt;/i&gt;
                              FAQ
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#" style={{color:"white"}}&gt;
                              &lt;i class="ti-share-alt"&gt;&lt;/i&gt;
                              Contact
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
  
              { /* &lt;!-- Page Content Holder --&gt; */ }
              &lt;div id="content"&gt;  
  
  
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>