Skip to content

Commit 7c7a02e

Browse files
davidmyersdevdavidmyersdev
committed
Add example React app
1 parent 25ca1b5 commit 7c7a02e

File tree

14 files changed

+74
-32
lines changed

14 files changed

+74
-32
lines changed

‎examples/react/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Example (React)</title>
7+
</head>
8+
<body>
9+
<div id="react-app"></div>
10+
<script type="module" src="/src/main.ts"></script>
11+
</body>
12+
</html>

‎examples/react/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"private": true,
3+
"type": "module",
4+
"scripts": {
5+
"build": "vite build",
6+
"dev": "vite"
7+
},
8+
"devDependencies": {
9+
"@tanstack/react-query": "^4.29.12",
10+
"@tanstack/react-query-devtools": "^4.29.12",
11+
"@types/node": "^18.7.23",
12+
"@types/react": "^18.2.21",
13+
"@types/react-dom": "^18.2.7",
14+
"@vitejs/plugin-react": "^4.0.0",
15+
"react": "^18.2.0",
16+
"react-dom": "^18.2.0",
17+
"typescript": "^5.0.0",
18+
"vite": "^4.0.0",
19+
"vite-plugin-node-polyfills": "workspace:*"
20+
}
21+
}

‎test/src/react.tsx renamed to ‎examples/react/src/app.tsx

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,22 @@ function App() {
1010

1111
return (
1212
<div className='App'>
13-
<h1>React + Vite</h1>
14-
<h2>On CodeSandbox!</h2>
15-
<div className='card'>
13+
<h1>Example (React)</h1>
14+
<p>The following app includes React Query DevTools (see below) to assert that this plugin does not conflict with it.</p>
15+
<p>Here is a dynamic counter to test that React works as expected.</p>
16+
<p>
1617
<button onClick={() => setCount((count) => count + 1)}>
1718
count is {count}
1819
</button>
19-
<p>
20-
Edit <code>src/App.tsx</code> and save to test HMR.
21-
</p>
22-
23-
<p>
24-
Tip: you can use the inspector button next to address bar to click on
25-
components in the preview and open the code in the editor!
26-
</p>
27-
</div>
28-
<p className='read-the-docs'>
29-
Click on the Vite and React logos to learn more
20+
</p>
21+
<p>
22+
The following text is encoded and decoded with Buffer: {Buffer.from('Hello!').toString()}
3023
</p>
3124
</div>
3225
)
3326
}
3427

35-
export const react = () => {
28+
export const app = () => {
3629
ReactDOM.createRoot(document.getElementById('react-app') as HTMLElement).render(
3730
<React.StrictMode>
3831
<QueryClientProvider client={queryClient}>

‎examples/react/src/env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎examples/react/src/main.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { app } from './app'
2+
3+
app()

‎examples/react/tsconfig.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"compilerOptions": {
3+
"jsx": "react-jsx",
4+
"module": "ESNext",
5+
"moduleResolution": "Bundler"
6+
}
7+
}

‎examples/react/vite.config.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import react from '@vitejs/plugin-react'
2+
import { defineConfig } from 'vite'
3+
import { nodePolyfills } from 'vite-plugin-node-polyfills'
4+
5+
// https://vitejs.dev/config/
6+
export default defineConfig({
7+
plugins: [
8+
nodePolyfills(),
9+
react(),
10+
],
11+
})

‎package.json

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -50,20 +50,15 @@
5050
},
5151
"packageManager": "[email protected]",
5252
"devDependencies": {
53-
"@tanstack/react-query": "^4.29.12",
54-
"@tanstack/react-query-devtools": "^4.29.12",
55-
"@types/node": "^18.7.23",
56-
"@vitejs/plugin-react": "^4.0.0",
53+
"@types/node": "^18.17.15",
5754
"@vitejs/plugin-vue": "^4.2.3",
58-
"esbuild": "^0.16.16",
55+
"esbuild": "^0.18.20",
5956
"npm-run-all": "^4.1.5",
6057
"ohmyfetch": "^0.4.20",
61-
"react": "^18.2.0",
62-
"react-dom": "^18.2.0",
63-
"rollup": "^3.8.1",
58+
"rollup": "^3.29.1",
6459
"typescript": "4.8.3",
65-
"vite": "^4.0.4",
66-
"vite-node": "^0.34.1",
60+
"vite": "^4.4.9",
61+
"vite-node": "^0.34.4",
6762
"vite-plugin-externalize-deps": "^0.1.5",
6863
"vite-plugin-inspect": "^0.6.0",
6964
"vite-plugin-node-polyfills": "workspace:*",

‎pnpm-workspace.yaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
workspaces:
22
- '.'
3+
- './examples/*'

‎test/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Example</title>
6+
<title>Example (Vue)</title>
77
</head>
88
<body>
9-
<div id="react-app"></div>
109
<div id="vue-app"></div>
1110
<script type="module" src="/src/main.ts"></script>
1211
</body>

0 commit comments

Comments
 (0)