How can I incorporate Chosen into my React project

问题:

I want to use a jquery plugin Chosen in my project. I installed jQuery and Chosen via npm:

npm i jquery chosen-js -S

Both libraries are now in my node_modules folder. Unfortunately I keep getting an error: ReferenceError: jQuery is not defined when the app tries to compile.

Here is where I make a call to the Chosen library:

import React from "react";
import ReactDom from "react-dom";
import $ from "jquery";
import "chosen-js/chosen.css";
import "chosen-js/chosen.jquery.js";

class App extends React.Component {
  componentDidMount() {
    $(this.refs.list).chosen();
  }

  render() {
    return (
      <select ref="list">
        <option>vanilla</option>
        <option>chocolate</option>
        <option>strawberry</option>
      </select>
    );
  }
}

ReactDom.render(, document.getElementById("app"));

Here's a pic of the error:

回答1:

don't change sources, better write in your component

window.jQuery = require('jquery');

before chosen-js imports

回答2:

I answered your question on Udemy as well. If you do really wanna take your react career seriously, you need to eventually quit using jQuery.

I have made very complex select components, ones that even use data from APIs, using react-select. I would suggest using React Select for all your selection needs, it's a powerhouse component and will change your life.

If you still find it imperative to use chosen.js, then edit 'chosen-js/chosen.jquery.js' and add import statements or require statements like

import jQuery from 'jquery' // or
const jQuery = require('jquery');

so that the reference error goes away. However, if you consider a serious front end career you need to understand that jQuery is dead, and serious apps will not use both react and jquery for the simple question of bloating and redundancy