HipsterBrown · September 3, 2020 17:06
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>React-Aria Example</title>
  <script src="./index.tsx"></script>
 </head>
 <body>
  <div id="app"></div>
 </body>
 </html>
diff --git a/index.tsx b/index.tsx
 import React, { useRef } from "react";
 import { render } from "react-dom";
 import { useButton } from "@react-aria/button";

 const ExampleButton: React.FC = () => {
  const ref = useRef();
  const { buttonProps } = useButton({}, ref);

  return (
    <div {...buttonProps} ref={ref}>
      Click me
    </div>
  );
 };

 document.addEventListener("DOMContentLoaded", () => {
  render(<ExampleButton />, document.getElementById("app"));
 });
diff --git a/package.json b/package.json
 {
  "name": "react-aria-example",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "start": "parcel index.html"
  },
  "author": "Nick Hehr",
  "license": "MIT",
  "devDependencies": {
    "@types/react": "^16.9.49",
    "@types/react-dom": "^16.9.8",
    "parcel-bundler": "^1.12.4",
    "typescript": "^4.0.2"
  },
  "dependencies": {
    "@react-aria/button": "^3.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
 }
diff --git a/tsconfig.json b/tsconfig.json
 {
  "compilerOptions": {
    "jsx": "react"
  }
 }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>React-Aria Example</title>
	<script src="./index.tsx"></script>
	</head>
	<body>
	<div id="app"></div>
	</body>
	</html>
	import React, { useRef } from "react";
	import { render } from "react-dom";
	import { useButton } from "@react-aria/button";

	const ExampleButton: React.FC = () => {
	const ref = useRef();
	const { buttonProps } = useButton({}, ref);

	return (
	<div {...buttonProps} ref={ref}>
	Click me
	</div>
	);
	};

	document.addEventListener("DOMContentLoaded", () => {
	render(<ExampleButton />, document.getElementById("app"));
	});