React Without A Build System

index.html

    <!-- Required dependencies -->
    <script crossorigin type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.1/prop-types.min.js"></script>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- Optional dependencies -->
    <script crossorigin type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script crossorigin type="text/javascript"
            crossorigin src="//cdnjs.cloudflare.com/ajax/libs/react-popper/0.10.4/umd/react-popper.min.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/dist/react-transition-group.min.js"
            charset="utf-8"></script>
    <!-- Reactstrap -->
    <script crossorigin src="https://unpkg.com/[email protected]/dist/reactstrap.full.min.js"></script>
  
    <link rel="stylesheet" href="https://toert.github.io/Isolated-Bootstrap/versions/4.1.0/iso_bootstrap4.1.0min.css">



        <div id="root" class="bootstrap"></div>


    <script type="text/babel" data-presets="es2016,react" charset="utf-8">

        class BundleForm extends React.Component {
            constructor(props) {
                super(props);

                this.state = {
                    coupon_bundles_is_batch: false,
                    coupon_bundles_code: '',
                    coupon_bundles_batch_name: '',
                    coupon_bundles_created_on: '',
                    coupon_bundles_updated_on: '',
                    coupons: [],
                };
            }

            toggleBatch() {
                this.setState({coupon_bundles_is_batch: !this.state.coupon_bundles_is_batch});
            }

            handleChange(key, event) {
                const data = {};
                data[key] = event.target.value;
                this.setState(data);
            }

            render() {
                const coupon_bundles_code = this.state.coupon_bundles_code;
                const coupon_bundles_is_batch = this.state.coupon_bundles_is_batch;
                const coupons = this.state.coupons;

                return (
                    <Reactstrap.Form>
                        <Reactstrap.FormGroup check row className="clearfix">
                            <Reactstrap.Label for="generate_batch" sm={12} check>
                                <Reactstrap.Input type="checkbox" value="1"
                                                  name="coupon_bundles_is_batch"
                                                  onChange={() => this.toggleBatch()}
                                                  id="generate_batch"
                                                  placeholder="with a placeholder"/>{' '}
                                Generate Batch (More Than One Bundle)
                            </Reactstrap.Label>
                        </Reactstrap.FormGroup>
                        {(coupon_bundles_is_batch) ? (
                            <Reactstrap.FormGroup row>
                                <Reactstrap.Col sm={6}>
                                    <Reactstrap.Label for="batchName">Batch Name</Reactstrap.Label>
                                    <Reactstrap.Input type="email" name="coupon_bundles_batch_name" id="batchName"/>
                                    <Reactstrap.FormText color="muted">
                                        This is for looking up groups of coupons
                                    </Reactstrap.FormText>
                                </Reactstrap.Col>
                                <Reactstrap.Col sm={6}>
                                    <Reactstrap.Label for="promocodeLength">Promo Code Length</Reactstrap.Label>
                                    <Reactstrap.Input type="select" name="promocode_length" id="promocodeLength">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </Reactstrap.Input>
                                    <Reactstrap.FormText color="muted">
                                        How many letters/numbers each promo code will be
                                    </Reactstrap.FormText>
                                </Reactstrap.Col>
                            </Reactstrap.FormGroup>
                        ) : (null)}
                        <Reactstrap.FormGroup row>
                            <Reactstrap.Col sm={6}>
                                <Reactstrap.Label for="bundleCode">Bundle Code</Reactstrap.Label>
                                <Reactstrap.Input type="text" name="coupon_bundles_code" id="bundleCode"
                                                  value={coupon_bundles_code}
                                                  onChange={(event) => this.handleChange('coupon_bundles_code', event)} />
                                <Reactstrap.FormText color="muted">
                                    The promotional code users will type in and be in the QR Code
                                </Reactstrap.FormText>
                                <div>{this.state.coupon_bundles_code}</div>
                            </Reactstrap.Col>
                        </Reactstrap.FormGroup>
                        <Reactstrap.Button color="primary">Add Coupon</Reactstrap.Button>
                    </Reactstrap.Form>
                );
            }
        };

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