App.tsx

import { useEffect, useState } from 'react';

import reactLogo from './assets/react.svg';
import './styles/App.css';
import viteLogo from '/vite.svg';

export default function App() {
	const [count, setCount] = useState(0);
	const [data, setData] = useState('');

	useEffect(() => {
		fetch(`${import.meta.env.VITE_API_SERVER}/api/hello`)
			.then(response => response.json())
			.then(data => setData(JSON.stringify(data)));
	}, []);

	return (
		<>
			<div>
				<a href="https://vite.dev" target="_blank">
					<img src={viteLogo} className="logo" alt="Vite logo" />
				</a>
				<a href="https://react.dev" target="_blank">
					<img src={reactLogo} className="logo react" alt="React logo" />
				</a>
			</div>
			<h1>Vite + React</h1>
			<div className="card">
				<button onClick={() => setCount(count => count + 1)}>count is {count}</button>
				<p>
					Edit <code>src/App.tsx</code> and save to test HMR
				</p>
				<p>
					/api/hello: <code>{data}</code>
				</p>
			</div>
			<p className="read-the-docs">Click on the Vite and React logos to learn more</p>
		</>
	);
}