Skip to content

Instantly share code, notes, and snippets.

@CAYdenberg

CAYdenberg/index.html

Created November 1, 2018 20:14
Show Gist options
  • Save CAYdenberg/46a0d23c1afbb3e910f30b6dd0290006 to your computer and use it in GitHub Desktop.
Save CAYdenberg/46a0d23c1afbb3e910f30b6dd0290006 to your computer and use it in GitHub Desktop.
Download ZIP
Using React in a script tag (simple working example)
Raw
index.html
<!doctype html>
<html>
<body>
<input type="date" id="date-input" />
<div id="date-picker"></div>
<script type="text/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script type="text/javascript" src="/index.js"></script>
</body>
</html>
Raw
index.js
function setDateInput(date) {
document.getElementById('date-input').value = moment(date).format('YYYY-MM-DD')
}
ReactDOM.render(
<button
type="button"
className="button"
onClick={() => setDateInput(new Date())}
>
Today
</button>
,
document.getElementById('date-picker')
)
Raw
package.json
{
"name": "react-dropin",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "npx babel --watch src --out-dir . --presets react-app/prod"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-react-app": "^3.1.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment