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