From afe776b879dc3bde823c2b3b1a96b3f2b1b2c441 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Fri, 29 Dec 2023 17:12:34 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E9=9B=9B=E5=BD=A2=E3=81=AE=E5=91=BC?= =?UTF-8?q?=E3=81=B3=E5=87=BA=E3=81=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- howto-use-react-keys/package.json | 15 +++++++++++++++ howto-use-react-keys/slides.md | 16 ++++++++++++++++ howto-use-react-keys/styles/index.ts | 2 ++ howto-use-react-keys/styles/mod.css | 0 package-lock.json | 12 +++++++++++- package.json | 3 ++- 6 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 howto-use-react-keys/package.json create mode 100644 howto-use-react-keys/slides.md create mode 100644 howto-use-react-keys/styles/index.ts create mode 100644 howto-use-react-keys/styles/mod.css diff --git a/howto-use-react-keys/package.json b/howto-use-react-keys/package.json new file mode 100644 index 0000000..e9e09fc --- /dev/null +++ b/howto-use-react-keys/package.json @@ -0,0 +1,15 @@ +{ + "name": "@slide/howto-use-react-keys", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "dev": "slidev", + "build": "slidev build", + "export": "slidev export" + }, + "keywords": [], + "author": "", + "license": "MIT" +} diff --git a/howto-use-react-keys/slides.md b/howto-use-react-keys/slides.md new file mode 100644 index 0000000..410e9f4 --- /dev/null +++ b/howto-use-react-keys/slides.md @@ -0,0 +1,16 @@ +--- +theme: default +titleTemplate: '%s - ken7253' +colorSchema: 'dark' +fonts: + sans: 'M PLUS 2' + mono: 'M PLUS 1 Code' +--- + +# slide title + +--- +src: "../reuse/me.md" +--- + +--- diff --git a/howto-use-react-keys/styles/index.ts b/howto-use-react-keys/styles/index.ts new file mode 100644 index 0000000..f1c9f2c --- /dev/null +++ b/howto-use-react-keys/styles/index.ts @@ -0,0 +1,2 @@ +import "./mod.css" +import "@slide/reuse/styles"; \ No newline at end of file diff --git a/howto-use-react-keys/styles/mod.css b/howto-use-react-keys/styles/mod.css new file mode 100644 index 0000000..e69de29 diff --git a/package-lock.json b/package-lock.json index 6f9fcaf..68a3fc2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "2023-03-26", "how-to-keep-learning", "introduction-functional-programming", - "how-to-tech-writing" + "how-to-tech-writing", + "howto-use-react-keys" ], "dependencies": { "@iconify-json/mdi": "^1.1.63", @@ -48,6 +49,11 @@ "version": "1.0.0", "license": "MIT" }, + "howto-use-react-keys": { + "version": "1.0.0", + "license": "MIT", + "devDependencies": {} + }, "introduction-functional-programming": { "name": "@slide/introduction-functional-programming", "version": "1.0.0", @@ -1713,6 +1719,10 @@ "resolved": "how-to-tech-writing", "link": true }, + "node_modules/@slide/howto-use-react-keys": { + "resolved": "howto-use-react-keys", + "link": true + }, "node_modules/@slide/introduction-functional-programming": { "resolved": "introduction-functional-programming", "link": true diff --git a/package.json b/package.json index 523990c..005b17d 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "2023-03-26", "how-to-keep-learning", "introduction-functional-programming", - "how-to-tech-writing" + "how-to-tech-writing", + "howto-use-react-keys" ], "devDependencies": { "@slidev/cli": "^0.46.1", From 17ed76f841e90f05287ad23e2e8e8a65434777a0 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Sat, 30 Dec 2023 00:17:55 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=E3=81=96=E3=81=A3=E3=81=8F=E3=82=8A?= =?UTF-8?q?=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../public/img/react-rendering-before.svg | 45 +++++++ .../public/img/react-rendering.svg | 40 ++++++ howto-use-react-keys/slides.md | 116 +++++++++++++++++- 3 files changed, 200 insertions(+), 1 deletion(-) create mode 100644 howto-use-react-keys/public/img/react-rendering-before.svg create mode 100644 howto-use-react-keys/public/img/react-rendering.svg diff --git a/howto-use-react-keys/public/img/react-rendering-before.svg b/howto-use-react-keys/public/img/react-rendering-before.svg new file mode 100644 index 0000000..803e11e --- /dev/null +++ b/howto-use-react-keys/public/img/react-rendering-before.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/howto-use-react-keys/public/img/react-rendering.svg b/howto-use-react-keys/public/img/react-rendering.svg new file mode 100644 index 0000000..604de91 --- /dev/null +++ b/howto-use-react-keys/public/img/react-rendering.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/howto-use-react-keys/slides.md b/howto-use-react-keys/slides.md index 410e9f4..c8d240f 100644 --- a/howto-use-react-keys/slides.md +++ b/howto-use-react-keys/slides.md @@ -7,10 +7,124 @@ fonts: mono: 'M PLUS 1 Code' --- -# slide title +# how to use "key" in React +Reactにおけるkeyの効果的な使い方について --- src: "../reuse/me.md" --- --- + +## Reactのkeyについて + +リストを `map()` とかでレンダリングするときに使う `key` について。 + +```tsx +const list = ['リンゴ', 'バナナ', 'ゴリラ']; + +return ( + +) +``` + +--- + +## 実際に起きた出来事 + +```tsx +import { CheckList } from "../CheckList"; // 複数のチェックボックスを管理するコンポーネント +type Process = "before" | "after"; // 進行状況 + +export const App = () => { + const [process, setProcess] = useState('before'); + + return ( + <> + { + process === 'before' + ? // input[type="checkbox"]が複数並んだコンポーネント + : + } +