├── public
├── favicon.ico
├── logo192.png
├── logo512.png
├── robots.txt
├── blob-waving.gif
├── blob-sighing.gif
├── blob-thinking.gif
├── app.css
└── manifest.json
├── src
├── App.tsx
├── index.tsx
├── components
│ ├── NotFound.tsx
│ ├── Result.tsx
│ └── Html.tsx
├── pages
│ ├── index.tsx
│ └── thinking.tsx
├── assets
│ └── app.css
└── AppRoutes.tsx
├── .prettierrc
├── .vscode
├── extensions.json
├── cspell.json
└── settings.json
├── .gitignore
├── tsconfig.json
├── package.json
├── server.tsx
├── README.md
└── pnpm-lock.yaml
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxam2017/react-18-ssr/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxam2017/react-18-ssr/HEAD/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxam2017/react-18-ssr/HEAD/public/logo512.png
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/blob-waving.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxam2017/react-18-ssr/HEAD/public/blob-waving.gif
--------------------------------------------------------------------------------
/public/blob-sighing.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxam2017/react-18-ssr/HEAD/public/blob-sighing.gif
--------------------------------------------------------------------------------
/public/blob-thinking.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxam2017/react-18-ssr/HEAD/public/blob-thinking.gif
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import AppRoutes from './AppRoutes';
2 |
3 | export default function App() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "useTabs": false,
3 | "tabWidth": 2,
4 | "singleQuote": true,
5 | "trailingComma": "all",
6 | "printWidth": 110
7 | }
8 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // @recommended extensions
3 | "recommendations": ["esbenp.prettier-vscode", "streetsidesoftware.code-spell-checker"]
4 | }
5 |
--------------------------------------------------------------------------------
/.vscode/cspell.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2",
3 | "ignorePaths": [],
4 | "dictionaryDefinitions": [],
5 | "dictionaries": [],
6 | "words": ["Nuxt", "Pipeable"],
7 | "ignoreWords": [],
8 | "import": []
9 | }
10 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App';
4 |
5 | ReactDOM.hydrateRoot(
6 | document.getElementById('root') as HTMLElement,
7 |
8 |
9 | ,
10 | );
11 |
--------------------------------------------------------------------------------
/src/components/NotFound.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import Result from './Result';
3 |
4 | export default function NotFound() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import Result from '../components/Result';
3 |
4 | function Hello() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
12 | export default Hello;
13 |
--------------------------------------------------------------------------------
/src/pages/thinking.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import Result from '../components/Result';
3 |
4 | function Thinking() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
12 | export default Thinking;
13 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "[typescriptreact]": {
3 | "editor.insertSpaces": true,
4 | "editor.tabSize": 2,
5 | "editor.defaultFormatter": "esbenp.prettier-vscode",
6 | "editor.formatOnSave": true
7 | },
8 | "[typescript]": {
9 | "editor.insertSpaces": true,
10 | "editor.tabSize": 2,
11 | "editor.defaultFormatter": "esbenp.prettier-vscode",
12 | "editor.formatOnSave": true
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/public/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | min-height: 100vh;
6 | margin: 0;
7 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
8 | -webkit-font-smoothing: antialiased;
9 | -moz-osx-font-smoothing: grayscale;
10 | }
11 |
12 | @keyframes fade-in {
13 | from {
14 | opacity: 0;
15 | }
16 |
17 | to {
18 | opacity: 1;
19 | }
20 | }
--------------------------------------------------------------------------------
/src/assets/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | min-height: 100vh;
6 | margin: 0;
7 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
8 | -webkit-font-smoothing: antialiased;
9 | -moz-osx-font-smoothing: grayscale;
10 | }
11 |
12 | @keyframes fade-in {
13 | from {
14 | opacity: 0;
15 | }
16 |
17 | to {
18 | opacity: 1;
19 | }
20 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
25 | /.parcel-cache
26 | /.parcel
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "commonjs",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src", "server.tsx"]
20 | }
21 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/Result.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | const Styles = {
4 | Container: {
5 | position: 'relative',
6 | },
7 | Message: {
8 | position: 'absolute',
9 | top: 0,
10 | right: 0,
11 | transform: 'translateX(100%)',
12 | background: '#334155',
13 | color: 'white',
14 | padding: '6px 16px',
15 | borderRadius: 16,
16 | whiteSpace: 'nowrap',
17 | animation: 'fade-in 500ms',
18 | },
19 | } as const;
20 |
21 | interface ResultProps {
22 | image: string;
23 | text: string;
24 | }
25 |
26 | function Result({ image, text }: ResultProps) {
27 | const [visible, setVisible] = useState(false);
28 |
29 | const handleHover = () => setVisible(true);
30 | const handleLeave = () => setVisible(false);
31 |
32 | return (
33 |
34 |

35 | {visible &&
{text}
}
36 |
37 | );
38 | }
39 |
40 | export default Result;
41 |
--------------------------------------------------------------------------------
/src/components/Html.tsx:
--------------------------------------------------------------------------------
1 | import { PropsWithChildren } from 'react';
2 |
3 | type HtmlProps = PropsWithChildren<{ title: string }>;
4 |
5 | export default function Html({ children, title }: HtmlProps) {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | {title}
18 |
19 |
20 |