diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..8df6df7 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "semi": false, + "singleQuote": true, + "printWidth": 100 +} diff --git a/README.md b/README.md index 8a9c2b2..b482b30 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,8 @@ # フロントエンド入門ワークショップ React 編 +
+セットアップ + ## 前準備 ### 環境 @@ -268,3 +271,10 @@ Actions タブから deploy が走っていることを確認してください ![img_2.png](img_2.png) +
+ + +## TODO アプリを作ろう！ + +デプロイするところまで確認できたら、既存ファイルをもとに TODO アプリを作成していきます。 + diff --git a/index.html b/index.html index e4b78ea..8ea5b9b 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,10 @@ - + - Vite + React + TS + Super TODO
diff --git a/package.json b/package.json index 3f7b40c..da77a9d 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", + "prettier": "^3.2.5", "typescript": "^5.4.3", "vite": "^5.2.6" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b6d702b..ebcc010 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,6 +37,9 @@ devDependencies: eslint-plugin-react-refresh: specifier: ^0.4.6 version: 0.4.6(eslint@8.57.0) + prettier: + specifier: ^3.2.5 + version: 3.2.5 typescript: specifier: ^5.4.3 version: 5.4.3 @@ -1658,6 +1661,12 @@ packages: engines: {node: '>= 0.8.0'} dev: true + /prettier@3.2.5: + resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==} + engines: {node: '>=14'} + hasBin: true + dev: true + /punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.tsx b/src/App.tsx index afe48ac..9964020 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,33 +1,70 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' +import { FormEvent, useState } from 'react' + +type Task = { + id: string + name: string + done: boolean +} function App() { - const [count, setCount] = useState(0) + const [tasks, setTasks] = useState([]) + const [showAll, setShowAll] = useState(true) + const [input, setInput] = useState('') + + const views = showAll ? tasks : tasks.filter((t) => !t.done) + + function onCheck(task: Task) { + setTasks((tasks) => { + return tasks.map((t) => (t.id === task.id ? { ...t, done: !t.done } : t)) + }) + } + + function addTask(e: FormEvent) { + e.preventDefault() + setInput('') + setTasks((tasks) => { + return [...tasks, { id: crypto.randomUUID(), name: input, done: false }] + }) + } return ( <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

+

Super TODO

+ {tasks.length > 0 && ( + <> +

My Tasks

+ + +
+ {views.map((task) => ( +
+ onCheck(task)} /> + {task.done ? {task.name} : task.name} +
+ ))} + + )} +

Register Task

+
+ setInput(e.target.value)} /> + +
) } diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 6119ad9..0000000 --- a/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/main.tsx b/src/main.tsx index 3d7150d..e63eef4 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,7 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' -import './index.css' ReactDOM.createRoot(document.getElementById('root')!).render(