How to use React, jQuery and MaterializeCSS in the same project?

1

I’m fairly new to Materialize, and I thought I could use it to develop a project with ReactJS. Unfortunately, looks like jQuery is not really liked by React. I tried to write some dummy code, which is just supposed to show a date input provided by Materialize:

import React, { Component } from 'react';
import $ from 'jquery';
import 'materialize-css';

class App extends Component {
   componentDidMount() {
     $(document).ready(function() {
       $('.datepicker').datepicker({
         disableWeekends: true
    });
  })
}
render() {
  return (
    <div className="App">
      <div className="input-field">
        <input type="text" id="date" className="datepicker" />
        <label for="date">Choose a date you need me for...</label>
      </div>
    </div>
  );
 }
}
export default App;

This last snippet of code doesn’t work, I get

TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).datepicker is not a function

I’m not a huge fan of jQuery, so I can drop it if I need to, but is there a way I can still use its methods (which I need access to for Materialize)?

2

jQuery can work with React, pretty easily at that:

https://www.pluralsight.com/guides/how-to-use-jquery-inside-a-react-component

But it gets awesomely tricky once jQuery starts doing any kind of complex logic, involving lots of lifecycle method fiddling, and you can forget about rendering react components from jquery code. You really don’t want to mix jQuery and modern frameworks if you can at all help it. Try looking for a pure react port, FSM knows there have to be hundreds of React+Material libraries out there .

3

Are you using this? https://www.npmjs.com/package/react-materialize

4

Unfortunately I’m not really confident about my knowledge, so using things too complicated would only confuse me. I think I’ll just use react-materialize!

5

I’ll try this, the doc looks very clear! Thank you!