How do I add airbnb react-dates to my HTML page?

Question

I would like to have the airbnb react-dates SingleDatePicker or DateRangePicker appear on my html page. What do I need to add to my html page to get this to function correctly? Which files do I need from the airbnb react-dates?

I am a designer with basic html and css knowledge and in the last few days, I went from zero percent javascript knowledge and never hearing of react, to learning about the basics and installing node.js/npm, using terminal for my first time ever, connecting to the server and being so close, but I still do not understand.

I just want to add a simple datepicker, something I can do in html/css/js in a few minutes, but this react thing is extremely confusing to me. Do I need to run the commands in terminal or can I just add some code to my html, with the airbnb react-dates files? I have tried many dozens of recommendations, asked questions on here and other sites, all without any success. Thank you for your help!

<!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>

Note: I am only including the html, because I do not know the other scripts needed from the airbnb react-dates link to get this to work.

Checkout the following guide from the official react site: https://reactjs.org/docs/add-react-to-a-website.html — MaartenDev, Sep 22 '19 at 17:42
Thanks for the help, MaartenDev! I saw that a few days ago, now after I understand a bit more, it seems to be the easiest solution... if I can get it to work, lol. I revisited that link and was able to get the like button to appear and function, but I do not know how to replace the like button with the DateRangePicker or SingleDatePicker component that I need. Any suggestions? — user1234, Sep 22 '19 at 20:42

score 0 · Answer 1 · answered Sep 27 '21 at 20:49

^{Moving solution from the question to its own answer}

I was able to get this to work using the 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);

How do I add airbnb react-dates to my HTML page?

1 Answers1