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/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
new file mode 100644
index 0000000..50fe3cc
--- /dev/null
+++ b/howto-use-react-keys/slides.md
@@ -0,0 +1,172 @@
+---
+theme: default
+titleTemplate: '%s - ken7253'
+colorSchema: dark
+fonts:
+ sans: M PLUS 2
+ mono: M PLUS 1 Code
+title: how to use "key" in React
+---
+
+# how to use "key" in React
+Reactにおけるkeyの効果的な使い方について
+
+---
+src: "../reuse/me.md"
+---
+
+---
+
+## Reactのkeyについて
+
+リストを`map()`とかでレンダリングするときに使う`key`について。
+
+```tsx
+const list = ['リンゴ', 'バナナ', 'ゴリラ'];
+
+return (
+
+ {
+ list.map((v) => - {v}
)
+ }
+
+)
+```
+
+
+
+---
+
+## 実際に起きた出来事
+
+```tsx
+import { CheckList } from "../CheckList"; // 複数のチェックボックスを管理するコンポーネント
+type Process = "before" | "after"; // 進行状況
+
+export const App = () => {
+ const [process, setProcess] = useState('before');
+
+ return (
+ <>
+ {
+ process === 'before'
+ ? // input[type="checkbox"]が複数並んだコンポーネント
+ :
+ }
+