I am trying to work on a project which is using a Layout/Template which uses a lot of jQuery.

I have learned to integrate the template with ReactJS Project, however, I am looking for a solution where I can completely replace the jQuery.

One of my solution is to use jQuery functions inside ComponentDidMount() or Render() function of React.

Is this approach correct? Is it the right way?

I have attached a small example below:

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;

           });



    });



}

This is my Render Function.

{/* <!--- SIDEBAR -------> */}

 <div class=wrapper style={{paddingTop:60}}>

           {/* <!-- Sidebar Holder --> */ }

            <nav id=sidebar>

                <div class=sidebar-header>

                    <h3>Dashboard</h3>

                    <strong>BS</strong>

                </div>



                <ul class=list-unstyled components>

                    <li class=active>

                        <a href=#homeSubmenu /*data-toggle=collapse */ aria-expanded=false>

                            <i class=ti-home></i>

                            Home

                        </a>

                        <ul class=collapse list-unstyled id=homeSubmenu>

                            <li><a href=#>Home 1</a></li>

                            <li><a href=#>Home 2</a></li>

                            <li><a href=#>Home 3</a></li>

                        </ul>

                    </li>

                    <li>

                        <a href=# style={{color:white}}>

                            <i class=ti-align-justify ></i>

                            About

                        </a>

                        <a href=#pageSubmenu /*data-toggle=collapse */ aria-expanded=false style={{color:white}}>

                            <i class=ti-text></i>

                            Pages

                        </a>

                        <ul class=collapse list-unstyled id=pageSubmenu>

                            <li><a href=#>Page 1</a></li>

                            <li><a href=#>Page 2</a></li>

                            <li><a href=#>Page 3</a></li>

                        </ul>

                    </li>

                    <li>

                        <a href=# style={{color:white}}>

                            <i class=ti-paragraph></i>

                            Portfolio

                        </a>

                    </li>

                    <li>

                        <a href=# style={{color:white}}>

                            <i class=ti-control-play></i>

                            FAQ

                        </a>

                    </li>

                    <li>

                        <a href=# style={{color:white}}>

                            <i class=ti-share-alt></i>

                            Contact

                        </a>

                    </li>

                </ul>

            </nav>



            { /* <!-- Page Content Holder --> */ }

            <div id=content>  





            </div>

        </div>