如何使用 React 和 Babel 从 React-Select CDN 导入？(1)

📌 相关文章

📜 如何使用 React 和 Babel 从 React-Select CDN 导入？(1)

📅 最后修改于: 2023-12-03 15:08:23.925000 🧑 作者: Mango

如何使用 React 和 Babel 从 React-Select CDN 导入？

React-select 是一个优秀的 React 组件，用于创建美观而易于使用的选择框。在本文中，我们将学习如何使用 React 和 Babel 从 CDN 导入 React-select 组件。

步骤 1：准备工作

我们需要在项目中添加 React 和 Babel，以使我们能够运行 React-select 组件。如果您已经在项目中安装了这些依赖项，可以跳过此步骤。

要使用 React-select，您需要安装 React 和 ReactDOM，可以通过以下命令行操作安装：

npm install react react-dom

还需要安装 Babel 来转换 JSX，您可以使用以下命令安装：

npm install babel-loader @babel/core @babel/preset-react --save-dev

步骤 2：在 HTML 文件中引入 React 和 React-select

在您的 HTML 文件中，您需要添加 React 库和 React-select 库的 CDN。可以通过以下方式完成：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React and React-select from CDN</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/react-select@4.3.0/dist/react-select.min.js"></script>
  </body>
</html>

步骤 3：创建 React-select 组件

在您的项目中创建一个新文件，例如 select.js。输入以下代码：

import React, { Component } from 'react';
import Select from 'react-select';

class SelectBox extends Component {
  render() {
    const options = [
      { value: 'a', label: 'Apple' },
      { value: 'b', label: 'Banana' },
      { value: 'c', label: 'Cherry' },
      { value: 'd', label: 'Date' },
    ];

    return (
      <div>
        <Select options={options} />
      </div>
    );
  }
}

export default SelectBox;

步骤 4：创建 Webpack 开发环境

要使用 Babel 运行 React-select，您需要创建一个 Webpack 开发环境。

在您的项目中创建一个新文件，例如 webpack.config.js。输入以下代码：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/dist/',
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.join(__dirname, 'public/'),
    port: 3000,
    publicPath: 'http://localhost:3000/dist/',
    hotOnly: true,
  },
};

以下是关于 webpack 配置的一些解释：

entry：您的应用程序的入口点。
module.rules：Web Mpack 编译器在处理文件时应该遵循的规则列表。
test：我们想要为这些文件执行的正则表达式。
exclude：告诉 Webpack 忽略这些文件。
use：告诉 Webpack 使用哪个 loader，这里用的是 babel-loader。
options.presets：传递给 babel-loader 的预设（preset）选项，例如将 React 转换为 JavaScript。

现在，要使用此配置文件创建 Webpack 开发环境，您需要运行以下命令：

npm run webpack-dev-server --mode development

步骤 5：在应用程序中使用 React-select 组件

最后，在您的应用程序中使用 SelectBox 组件。在您的 HTML 文件中添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React and React-select from CDN</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/react-select@4.3.0/dist/react-select.min.js"></script>

    <script src="dist/bundle.js"></script>
  </body>
</html>

在应用程序中，您可以使用以下代码来渲染 SelectBox 组件：

import React from 'react';
import ReactDOM from 'react-dom';
import SelectBox from './select';

ReactDOM.render(<SelectBox />, document.getElementById('root'));

运行应用程序

现在，当您运行您的应用程序时，您将看到一个 React-select 组件。此时，您已经知道了如何使用 React 和 Babel 从 React-select CDN 导入 React-select。