react_typescript_vite_quickstart_counter_app.ts

1import React, { useState } from 'react'
2import ReactDOM from 'react-dom/client'
3
4/**
5 * Main Application Component
6 */
7const App: React.FC = () => {
8  const [count, setCount] = useState<number>(0)
9
10  return (
11    <div style={{ textAlign: 'center', marginTop: '50px' }}>
12      <h1>React + TypeScript Quickstart</h1>
13      <div className="card">
14        <button onClick={() => setCount((count) => count + 1)}>
15          count is {count}
16        </button>
17        <p>
18          Edit <code>src/App.tsx</code> and save to test HMR
19        </p>
20      </div>
21    </div>
22  )
23}
24
25// Render the application to the DOM
26const rootElement = document.getElementById('root')
27if (rootElement) {
28  ReactDOM.createRoot(rootElement).render(
29    <React.StrictMode>
30      <App />
31    </React.StrictMode>,
32  )
33}