如何将 airbnb react-dates 添加到我的 HTML 页面？答案

【问题标题】：How do I add airbnb react-dates to my HTML page?如何将 airbnb react-dates 添加到我的 HTML 页面？
【发布时间】：2019-09-22 17:39:53
【问题描述】：

我想让airbnb react-dates SingleDatePicker 或 DateRangePicker 出现在我的 html 页面上。我需要向my html page 添加什么才能使其正常运行？我需要 airbnb react-dates 中的哪些文件？

我是一名具有基本 html 和 css 知识的设计师，在过去的几天里，我从 0% 的 javascript 知识和从未听说过 react 开始学习基础知识并安装 node.js/npm，使用终端为我的第一次连接服务器，离得这么近，但我还是不明白。

我只想添加一个简单的日期选择器，我可以在几分钟内在 html/css/js 中完成一些事情，但是这个 react 的东西让我非常困惑。我是否需要在终端中运行命令，或者我可以使用 airbnb react-dates 文件向我的 html 添加一些代码吗？我已经尝试了许多建议，在这里和其他网站上提出了问题，但都没有成功。感谢您的帮助！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Please help me with airbnb react-dates!</title>
</head>
<body>
    <div id="root">
        I would like to have the <a href="https://github.com/airbnb/react-dates/">airbnb react-dates</a> SingleDatePicker or DateRangePicker here.
    </div>
</body>
</html>

注意：我只包含 html，因为我不知道 airbnb react-dates 链接中需要其他脚本才能使其正常工作。

【问题讨论】：

从官方 react 网站查看以下指南：reactjs.org/docs/add-react-to-a-website.html
感谢您的帮助，MaartenDev！几天前我看到了，现在在我了解更多之后，这似乎是最简单的解决方案......如果我能让它工作，大声笑。我重新访问了该链接，并且能够让点赞按钮出现并起作用，但我不知道如何用我需要的 DateRangePicker 或 SingleDatePicker 组件替换点赞按钮。有什么建议吗？

标签： javascript html reactjs react-dates

【解决方案1】：

^{将解决方案从问题转移到自己的答案}

我可以使用like button example 来实现它

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>
    
    <!-- We will put our React component inside this div. -->
    
    <div id="datepicker"></div>
    
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="datepicker.js"></script>

  </body>

    
</html>

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#datepicker');
ReactDOM.render(e(LikeButton), domContainer);

【讨论】：