React-Dates datepicker

JavaScript
1

I would like to have a datepicker exactly like the airbnb react-dates sample:

AirBnB / React Dates Instructions/Setup

AirBnB / React Dates Demo

I know basic html, css and how to include js, etc, but I have no idea how to use react-dates, npm and I do not understand how to make this work. All I want is the datepicker and whatever else is needed to add this to a html page. I have a mac and tried to run the commands in terminal, following the instructions, installed node.js, npm and still can not get anything to function or style correctly. What do I do after running those commands? Do I need webpack or json? Do I need so many things or can I just add some links in my html to reference the scripts needed? I would like to have the easiest solution with both of the SingleDatePicker and DateRangePicker options. Here is the code from this airbnb react-dates demo (I think), please let me know what I need to do to be able to use this as my datepicker. Thanks in advance!

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Storybook</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        html,
        body {
            overflow: hidden;
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <style>
        :not(.sb-show-main) > .sb-main,
        :not(.sb-show-nopreview) > .sb-nopreview,
        :not(.sb-show-errordisplay) > .sb-errordisplay {
            display: none;
        }
        
        .sb-wrapper {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px;
            font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
            -webkit-font-smoothing: antialiased;
        }
        
        .sb-heading {
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 0.2px;
            margin: 10px 0;
        }
        
        .sb-nopreview {
            display: flex;
            align-content: center;
            justify-content: center;
        }
        
        .sb-nopreview_main {
            margin: auto;
            padding: 30px;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.03);
        }
        
        .sb-nopreview_heading {
            text-align: center;
        }
        
        .sb-errordisplay {
            background-color: rgb(187, 49, 49);
            color: #FFF;
        }
        
        .sb-errordisplay_code {
            font-size: 14px;
            width: 100vw;
            overflow: auto;
        }
    </style>
    <script>
        /* globals window */
        /* eslint-disable no-underscore-dangle */
        try {
            if (window.parent !== window) {
                window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
                window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
            }
        } catch (e) {
            // eslint-disable-next-line no-console
            console.warn('unable to connect to parent frame for connecting dev tools');
        }
    </script>
</head>

<body>
    <form action="" id="" method="post">
        <div style="margin-top:8px;margin-bottom:8px">
            <div style="margin-bottom:8px">
                <div>Choose a Date</div>
            </div>
            <input type="text" aria-label="Check In" id="startDate" name="startDate" value="" placeholder="Check In" autoComplete="off" />
        </div>
    </form>
    <div id="root"></div>
    <script type="module" src="https://airbnb.io/react-dates/runtime~main.9699bd35053e0f844757.bundle.js"></script>
    <script type="module" src="https://airbnb.io/react-dates/vendors~main.e03af433a66acd177aef.bundle.js"></script>
    <script type="module" src="https://airbnb.io/react-dates/main.27c4fa85bdf1c9feec39.bundle.js"></script>
</body>

</html>