commit
30062e5d99
|
|
@ -0,0 +1,6 @@
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
build
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
## hooks-react-starter
|
||||||
|
|
||||||
|
Use this template:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx degit https://github.com/midwayjs/hooks/examples/react ./hooks-app
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `npm install` to install the dependencies
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
- `npm run dev`: Starts the development server
|
||||||
|
- `npm run build`: Builds the application for production
|
||||||
|
- `npm run start`: Runs the application in production mode
|
||||||
|
|
||||||
|
## File Structure
|
||||||
|
|
||||||
|
- `src`: source code, include backend and frontend
|
||||||
|
- `api`: backend code
|
||||||
|
- `others`: frontend code
|
||||||
|
- `public`: static files
|
||||||
|
- `midway.config.ts`: project config
|
||||||
|
- `index.html`: entry file
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/index.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
import { defineConfig } from '@midwayjs/hooks-kit';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
vite: {
|
||||||
|
plugins: [react()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "hooks-react-starter",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"start": "hooks start",
|
||||||
|
"dev": "hooks dev",
|
||||||
|
"build": "hooks build"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@midwayjs/hooks": "^3.0.0",
|
||||||
|
"@midwayjs/hooks-kit": "^3.0.0",
|
||||||
|
"@midwayjs/koa": "^3.3.0",
|
||||||
|
"@midwayjs/rpc": "^3.0.0",
|
||||||
|
"ahooks": "^3.3.0",
|
||||||
|
"isomorphic-unfetch": "^3.1.0",
|
||||||
|
"react": "^17.0.2",
|
||||||
|
"react-dom": "^17.0.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@midwayjs/mock": "^3.3.0",
|
||||||
|
"@types/react": "^17.0.44",
|
||||||
|
"@types/react-dom": "^17.0.15",
|
||||||
|
"@vitejs/plugin-react": "^1.3.0",
|
||||||
|
"typescript": "^4.6.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
|
|
@ -0,0 +1,73 @@
|
||||||
|
import { Api, Get, Params, Query, useContext } from '@midwayjs/hooks';
|
||||||
|
import type { Context } from '@midwayjs/koa';
|
||||||
|
|
||||||
|
const books = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: 'The Lord of the Rings',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: 'The Hobbit',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: 'The Catcher in the Rye',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: 'Gone with the Wind',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: 'To Kill a Mockingbird',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
title: 'Pride and Prejudice',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
title: 'The Great Gatsby',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
title: 'The Scarlet Letter',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
title: 'The Grapes of Wrath',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
title: 'The Great Gatsby',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const getBookByParams = Api(
|
||||||
|
Get('/book/:id'),
|
||||||
|
Params<{ id: string }>(),
|
||||||
|
async () => {
|
||||||
|
const ctx = useContext<Context>();
|
||||||
|
const { id } = ctx.params;
|
||||||
|
const book = books.find((b) => b.id === Number(id));
|
||||||
|
if (!book) {
|
||||||
|
ctx.throw(400, 'book not found');
|
||||||
|
}
|
||||||
|
return book;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export const getBookByQuery = Api(
|
||||||
|
Get('/book'),
|
||||||
|
Query<{ id: string }>(),
|
||||||
|
async () => {
|
||||||
|
const ctx = useContext<Context>();
|
||||||
|
const { id } = ctx.query;
|
||||||
|
const book = books.find((b) => b.id === Number(id));
|
||||||
|
if (!book) {
|
||||||
|
ctx.throw(400, 'book not found');
|
||||||
|
}
|
||||||
|
return book;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { createConfiguration, hooks } from '@midwayjs/hooks';
|
||||||
|
import * as Koa from '@midwayjs/koa';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* setup midway server
|
||||||
|
*/
|
||||||
|
export default createConfiguration({
|
||||||
|
imports: [Koa, hooks()],
|
||||||
|
importConfigs: [{ default: { keys: 'session_keys' } }],
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { Api, Get } from '@midwayjs/hooks';
|
||||||
|
|
||||||
|
export const getDate = Api(Get(), async () => {
|
||||||
|
return new Date().toString();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { Api, Post } from '@midwayjs/hooks';
|
||||||
|
import fetch from 'isomorphic-unfetch';
|
||||||
|
|
||||||
|
export default Api(Post(), async (repo: string) => {
|
||||||
|
const response = await fetch(`https://api.github.com/repos/${repo}`);
|
||||||
|
const json = await response.json();
|
||||||
|
return {
|
||||||
|
stars: json.stargazers_count,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Avenir', Helvetica, Arial, -apple-system, BlinkMacSystemFont,
|
||||||
|
'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
|
||||||
|
'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
|
monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app {
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 6rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lambda {
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 4px 8px;
|
||||||
|
background-color: #e3e3e3;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 8px;
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
|
monospace;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import { useRequest } from 'ahooks';
|
||||||
|
import { getDate } from './api/date';
|
||||||
|
import fetchGithubStars from './api/star';
|
||||||
|
import { getBookByParams, getBookByQuery } from './api/book';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const { data: date } = useRequest(() => getDate());
|
||||||
|
const { data: repo, loading } = useRequest(() =>
|
||||||
|
fetchGithubStars('midwayjs/midway')
|
||||||
|
);
|
||||||
|
const { data: book } = useRequest(() =>
|
||||||
|
getBookByParams({ params: { id: '1' } })
|
||||||
|
);
|
||||||
|
const { data: book2 } = useRequest(() =>
|
||||||
|
getBookByQuery({ query: { id: '2' } })
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="app">
|
||||||
|
<img src="/logo.png" className="logo" />
|
||||||
|
<h2>Hello Midway Hooks</h2>
|
||||||
|
<p style={{ textAlign: 'center' }}>
|
||||||
|
Edit <code>src/api/*.ts</code> and watch it change.
|
||||||
|
<br />
|
||||||
|
You can also open Devtools to see the request details.
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<span className="lambda">λ GET</span>
|
||||||
|
<span className="lambda">getDate()</span>
|
||||||
|
<span>Server Date: {date}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="lambda">λ POST</span>
|
||||||
|
<span className="lambda">fetchStars('midwayjs/midway')</span>
|
||||||
|
<span>Github Stars: {loading ? 'Fetching...' : repo.stars}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="lambda">λ GET</span>
|
||||||
|
<span className="lambda">
|
||||||
|
{`getBookByParams({ params: { id: '1' } })`}
|
||||||
|
</span>
|
||||||
|
<span>Book title: {book?.title}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="lambda">λ GET</span>
|
||||||
|
<span className="lambda">
|
||||||
|
{`getBookByQuery({ query: { id: '2' } })`}
|
||||||
|
</span>
|
||||||
|
<span>Book title: {book2?.title}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render(<App />, document.getElementById('root'));
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||||
|
"allowJs": false,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": false,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react",
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"emitDecoratorMetadata": true,
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"outDir": "./dist"
|
||||||
|
},
|
||||||
|
"include": ["./src", "dist/host.js"],
|
||||||
|
"ts-node": {
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "commonjs"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue