Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "whether jquery can be embedded in react". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope that this article "whether jquery can be embedded in react" can help you solve the problem.

Jquery can be embedded in react. Methods: 1, use "npm install jquery-save" to install jquery;2, modify webpack configuration file; 3, use "require (jquery.plugin path)" to reference jquery plug-in.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

Can jquery be embedded in react?

Jquery can be embedded in react

The first step is to install jquery in react

Npm install jquery-save

Mount the $variable under window, and you can use $directly in the project without referring to it.

/ / modify webpack configuration file: plugins: [new webpack.ProvidePlugin ({$: "jquery", jQuery: "jquery", "window.jQuery": "jquery"})]

Pose using the jquery plug-in

First reference the jquery plug-in with require (/ your/path/jquery.plugin)

Webpack supports ES6's import,requirejs,commonjs syntax, which can be used with CMD

Referenced in the way of AMD.

AMD is written:

Define (["jquery"], function ($) {... Var initialChart = function (data) {/ / plug-in logic}... $(function () {/ / page logic}). Return {initialChart:initialChart / / Export function}})

CMD writing method

Function orgOrgChart (data) {/ / plug-in logic} $(function () {/ / page logic}) module.exports.orgOrgChart = orgOrgChart / / export function

Finally, reference the exported function in react and call it in the lifecycle function.

Import {initialChart} from'.. /.. / es5Components/emp-orgChart.js' import {orgOrgChart} from'.. /.. / es5Components/emp-orgChart.js'. ComponentDidMount () {initialChart (this.state.data); orgOrgChart (this.state.data)}.... This is the end of the content about "can you embed jquery in react". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.