├── 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 | logo 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 |