react 怎么引入jquery

React 是一个用于构建用户界面的 JavaScript 库，而 jQuery 是一个流行的 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作，尽管 React 本身并不依赖于 jQuery，但在某些场景下，我们可能需要在 React 项目中引入和使用 jQuery，下面是如何在 React 项目中引入和使用 jQuery 的详细教程。

1、安装 jQuery

我们需要在项目中安装 jQuery，可以使用 npm 或 yarn 进行安装，在项目根目录下运行以下命令：

使用 npm
npm install jquery save
使用 yarn
yarn add jquery 

2、创建一个新的 JavaScript 文件

接下来，我们需要在项目中创建一个新文件，custom.js，并在其中引入 jQuery，在这个文件中，我们将编写一些使用 jQuery 的代码。

3、引入自定义的 JavaScript 文件

现在，我们需要在需要使用 jQuery 的 React 组件中引入刚刚创建的 custom.js 文件，可以在组件的 componentDidMount 生命周期方法中引入，或者在组件的构造函数中引入，这里我们以 componentDidMount 为例：

import React, { Component } from 'react';
import $ from 'jquery'; // 引入 jQuery
class MyComponent extends Component {
  componentDidMount() {
    // 在这里引入 custom.js
    $(document).ready(function() {
      // 在这里编写使用 jQuery 的代码
    });
  }
  render() {
    return (
      <div>
        {/* ... */}
      </div>
    );
  }
}
export default MyComponent; 

4、使用 jQuery

在 $(document).ready 函数中，我们可以编写使用 jQuery 的代码，我们可以使用 jQuery UI 的日期选择器插件为一个输入框添加日期选择功能：

import React, { Component } from 'react';
import $ from 'jquery'; // 引入 jQuery
import 'jqueryui/dist/jqueryui.min.css'; // 引入 jQuery UI CSS 文件
import 'jqueryui/dist/jqueryui.min.js'; // 引入 jQuery UI JavaScript 文件
class MyComponent extends Component {
  componentDidMount() {
    $(document).ready(function() {
      // 为输入框添加日期选择功能
      $('input').datepicker();
    });
  }
  render() {
    return (
      <div>
        <input type="text" /> {/* 现在这个输入框具有日期选择功能 */}
      </div>
    );
  }
}
export default MyComponent; 

注意：在使用第三方库时，需要确保正确引入了相应的 CSS 和 JavaScript 文件，在上面的例子中，我们引入了 jqueryui 这个第三方库，如果需要使用其他第三方库，请参考其官方文档进行引入。

5、React、jQuery 和第三方库之间的冲突解决

在使用 React、jQuery 和第三方库时，可能会出现命名空间冲突的问题，为了解决这个问题，我们可以使用 $（或 jQuery）作为命名空间别名来避免冲突，在上面的例子中，我们已经将 $（即 jQuery）作为命名空间别名引入：

import $ from 'jquery'; // $ 现在代表的是原生的 JavaScript "$"，而不是 React、jQuery、第三方库中的任何命名空间别名。 

通过这种方式，我们可以确保在使用 $（或 jQuery）时，不会与 React、jQuery、第三方库中的任何命名空间发生冲突，我们还可以在需要的时候使用其他命名空间别名，

const $ = require('jquery'); // 现在 $、jQuery、React、第三方库中的任何命名空间都不会发生冲突。 

在本教程中，我们学习了如何在 React 项目中引入和使用 jQuery，首先安装了