title: How to use sideNav of materialize css with react?
body: <p>I'm developing an app with React, I want to use the sidenav component <a href="http://materializecss.com/side-nav.html" rel="noreferrer">http://materializecss.com/side-nav.html</a></p>
  
  <p>The problem is that I'm getting this error:</p>
  
  <pre><code>Sidebar.js:8 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2_jquery___default(...)(...).sideNav is not a function
      at HTMLDocument.&lt;anonymous&gt; (Sidebar.js:8)
      at mightThrow (jquery.js:3534)
      at process (jquery.js:3602)
  </code></pre>
  
  <p>I'm so confused with the way of import components, libraries. There are a lot of them and a lot of ways to configure it.</p>
  
  <p>What I've done is:</p>
  
  <ol>
  <li><p>Create the app with </p>
  
  <p>create-react-app</p></li>
  <li><p>Install materialize via npm</p>
  
  <p>npm install materialize-css@next</p></li>
  <li><p>Create the react app</p></li>
  </ol>
  
  <p>Here's the code I'm using:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta name="theme-color" content="#000000"&gt;
  
      &lt;link rel="manifest" href="%PUBLIC_URL%/manifest.json"&gt;
      &lt;link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"&gt;
  
      &lt;title&gt;React App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;noscript&gt;
        You need to enable JavaScript to run this app.
      &lt;/noscript&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/babel" src="js/materialize.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React from 'react'
  import {BrowserRouter, Route} from 'react-router-dom';
  import Sidebar from './Sidebar'
  
  const Dashboard = () =&gt; &lt;h2&gt;Dashboard&lt;/h2&gt;
  const Survey = () =&gt; &lt;h2&gt;Survey&lt;/h2&gt;
  const Landing = () =&gt; &lt;h2&gt;Landing&lt;/h2&gt;
  const Home = () =&gt; &lt;h2&gt;Home&lt;/h2&gt;
  
  const App = () =&gt; {
      return (
              &lt;div&gt;
                  &lt;BrowserRouter&gt;
                      &lt;div&gt;
                          &lt;Sidebar /&gt;
                          &lt;Route exact path="/" component={Home} /&gt;
                          &lt;Route path="/surveys" component={Dashboard} /&gt;
                      &lt;/div&gt;
                  &lt;/BrowserRouter&gt;
                  Hi There!
              &lt;/div&gt;
          )
  }
  
  export default App;
  </code></pre>
  
  <p>Sidebar.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import 'materialize-css/dist/css/materialize.min.css';
  import $ from 'jquery';
  
  class Sidebar extends Component {
      componentDidMount() {
          $(document).ready(function(){
              $('.sidenav').sideNav();
          });
      }
  
      render() {
          return (
              &lt;ul id="slide-out" className="sidenav"&gt; 
                  &lt;li&gt;&lt;a href="#!"&gt;&lt;i className="material-icons"&gt;cloud&lt;/i&gt;First Link With Icon&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#!"&gt;Second Link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          );
      }
  }
  
  export default Sidebar;
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "support-tools",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "jquery": "^3.3.1",
      "materialize-css": "^1.0.0-alpha.4",
      "nodemon": "^1.15.1",
      "react": "^16.2.0",
      "react-bootstrap": "^0.32.1",
      "react-bootstrap-sidebar": "0.0.1",
      "react-burger-menu": "^2.2.3",
      "react-dom": "^16.2.0",
      "react-materialize": "^1.1.2",
      "react-mdl": "^1.11.0",
      "react-redux": "^5.0.7",
      "react-router-dom": "^4.2.2",
      "react-scripts": "1.1.1",
      "react-sidebar": "^2.3.2",
      "react-sidenav": "^2.1.2",
      "redux": "^3.7.2"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    }
  }
  </code></pre>
  
  <p>I've tried use two versions of jQuery on index.js</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>But I can have the sidenav running. What could I do?</p>