Skip to content

Commit 2d49f95

Browse files
chaancechaance
authored
Add basic example via vite (#7971)
1 parent e03308b commit 2d49f95

File tree

11 files changed

+830
-0
lines changed

11 files changed

+830
-0
lines changed

‎examples/basic/.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎examples/basic/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎examples/basic/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "basic",
3+
"private": true,
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "tsc && vite build",
7+
"serve": "vite preview"
8+
},
9+
"dependencies": {
10+
"history": "latest",
11+
"react": "^17.0.2",
12+
"react-dom": "^17.0.2",
13+
"react-router": "next",
14+
"react-router-dom": "next"
15+
},
16+
"devDependencies": {
17+
"@rollup/plugin-replace": "^2.2.1",
18+
"@types/node": "14.x",
19+
"@types/react": "^17.0.19",
20+
"@types/react-dom": "^17.0.9",
21+
"@vitejs/plugin-react-refresh": "^1.3.6",
22+
"typescript": "^4.3.5",
23+
"vite": "^2.5.0"
24+
}
25+
}

‎examples/basic/src/App.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import * as React from "react";
2+
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
3+
4+
function App() {
5+
return (
6+
<Router>
7+
<div>
8+
<ul>
9+
<li>
10+
<Link to="/">Home</Link>
11+
</li>
12+
<li>
13+
<Link to="/about">About</Link>
14+
</li>
15+
<li>
16+
<Link to="/dashboard">Dashboard</Link>
17+
</li>
18+
</ul>
19+
20+
<hr />
21+
22+
<Routes>
23+
<Route path="/">
24+
<Home />
25+
</Route>
26+
<Route path="/about">
27+
<About />
28+
</Route>
29+
<Route path="/dashboard">
30+
<Dashboard />
31+
</Route>
32+
</Routes>
33+
</div>
34+
</Router>
35+
);
36+
}
37+
38+
function Home() {
39+
return (
40+
<div>
41+
<h2>Home</h2>
42+
</div>
43+
);
44+
}
45+
46+
function About() {
47+
return (
48+
<div>
49+
<h2>About</h2>
50+
</div>
51+
);
52+
}
53+
54+
function Dashboard() {
55+
return (
56+
<div>
57+
<h2>Dashboard</h2>
58+
</div>
59+
);
60+
}
61+
62+
export default App;

‎examples/basic/src/favicon.svg

Lines changed: 15 additions & 0 deletions
Loading

‎examples/basic/src/index.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4+
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
code {
11+
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12+
monospace;
13+
}

‎examples/basic/src/main.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import "./index.css";
4+
import App from "./App";
5+
6+
ReactDOM.render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>,
10+
document.getElementById("root")
11+
);

‎examples/basic/src/vite-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/basic/tsconfig.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"target": "ESNext",
5+
"lib": ["DOM", "DOM.Iterable", "ESNext"],
6+
"allowJs": false,
7+
"skipLibCheck": false,
8+
"esModuleInterop": false,
9+
"allowSyntheticDefaultImports": true,
10+
"strict": true,
11+
"forceConsistentCasingInFileNames": true,
12+
"module": "ESNext",
13+
"moduleResolution": "Node",
14+
"resolveJsonModule": true,
15+
"isolatedModules": true,
16+
"noEmit": true,
17+
"jsx": "react",
18+
"paths": {
19+
"react-router": ["../../packages/react-router/index.tsx"],
20+
"react-router-dom": ["../../packages/react-router-dom/index.tsx"],
21+
}
22+
},
23+
"include": ["./src"]
24+
}

‎examples/basic/vite.config.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as path from "path";
2+
import { defineConfig } from "vite";
3+
import reactRefresh from "@vitejs/plugin-react-refresh";
4+
import rollupReplace from "@rollup/plugin-replace";
5+
6+
// https://vitejs.dev/config/
7+
export default defineConfig({
8+
plugins: [
9+
rollupReplace({
10+
preventAssignment: true,
11+
values: {
12+
__DEV__: JSON.stringify(true),
13+
"process.env.NODE_ENV": JSON.stringify("development")
14+
}
15+
}),
16+
reactRefresh()
17+
],
18+
resolve: {
19+
alias: {
20+
"react-router": path.resolve(
21+
__dirname,
22+
"../../packages/react-router/index.tsx"
23+
),
24+
"react-router-dom": path.resolve(
25+
__dirname,
26+
"../../packages/react-router-dom/index.tsx"
27+
)
28+
}
29+
}
30+
});

0 commit comments

Comments
 (0)