Skip to content

Instantly share code, notes, and snippets.

@joseph-montanez
Created February 13, 2020 13:20
Show Gist options
  • Save joseph-montanez/489d91167a7c627da79b8417efdc358a to your computer and use it in GitHub Desktop.
Save joseph-montanez/489d91167a7c627da79b8417efdc358a to your computer and use it in GitHub Desktop.
React Without A Build System
<!-- 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/react-transition-group@2.9.0/dist/react-transition-group.min.js"
charset="utf-8"></script>
<!-- Reactstrap -->
<script crossorigin src="https://unpkg.com/reactstrap@8.4.1/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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment