Skip to content

Instantly share code, notes, and snippets.

@derrickturk

derrickturk/demo.tsx

Created February 10, 2021 18:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save derrickturk/5712ee7a42f25c7f6293f436bde235e6 to your computer and use it in GitHub Desktop.
Save derrickturk/5712ee7a42f25c7f6293f436bde235e6 to your computer and use it in GitHub Desktop.
Download ZIP
React Hooks demo with TypesScript and no funny module-loader business
Raw
demo.tsx
function Counter()
{
const [count, setCount] = React.useState(0);
return (
<div>
<p>Count = {count}</p>
<button onClick={() => setCount(count + 1)}>
Click me! Click me! Do it now, you son of a bitch!
</button>
</div>
);
}
const container = document.getElementById('counter-container')!;
ReactDOM.render(<Counter />, container);
Raw
global.d.ts
import * as _React from 'react';
import * as _ReactDOM from 'react-dom';
declare global {
const React: typeof _React;
const ReactDOM: typeof _ReactDOM;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tarp Disaster?</title>
</head>
<body>
<h1>react demo</h1>
<div id="counter-container"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script type="text/javascript" src="demo.js"></script>
</body>
</html>
Raw
tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "ES6",
"strict": true,
"removeComments": false,
"sourceMap": true,
"moduleResolution": "node",
"jsx": "react"
},
"files": [
"demo.tsx",
"global.d.ts"
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment