diff --git a/.nvmrc b/.nvmrc
index e2838c8..0828ab7 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v16.14.0
\ No newline at end of file
+v18
\ No newline at end of file
diff --git a/README.md b/README.md
index e328474..5f5b40f 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,8 @@ npm run client -- exo01
npm run client -- exo01-solution
```
+> Steps require at least you have node v18 installed
+
### Start the slide
```bash
diff --git a/docs/assets/images/keys.png b/docs/assets/images/keys.png
new file mode 100644
index 0000000..4fb6db3
Binary files /dev/null and b/docs/assets/images/keys.png differ
diff --git a/docs/markdown/00-school/02-repository.md b/docs/markdown/00-school/02-repository.md
index d8226a6..9d6c0b9 100644
--- a/docs/markdown/00-school/02-repository.md
+++ b/docs/markdown/00-school/02-repository.md
@@ -1,3 +1,11 @@
# Repository
https://github.com/sfeir-open-source/sfeir-school-react
+
+##==##
+
+# Requirements
+
+- Node v18
+- npm
+- A IDE: VSCode or WebStorm recommanded
diff --git a/docs/markdown/01-intro/00-TITLE.md b/docs/markdown/01-intro/00-TITLE.md
index b02ade8..12eba0f 100644
--- a/docs/markdown/01-intro/00-TITLE.md
+++ b/docs/markdown/01-intro/00-TITLE.md
@@ -1,4 +1,4 @@
-
+
# Introduction
diff --git a/docs/markdown/01-intro/10-app-discovery.md b/docs/markdown/01-intro/10-app-discovery.md
index f065e2c..7a29a53 100644
--- a/docs/markdown/01-intro/10-app-discovery.md
+++ b/docs/markdown/01-intro/10-app-discovery.md
@@ -1,4 +1,4 @@
-
+
# App discovery
diff --git a/docs/markdown/01-intro/12-advance-bootstraping-next.md b/docs/markdown/01-intro/12-advance-bootstraping-next.md
index 02c434f..50b0a25 100644
--- a/docs/markdown/01-intro/12-advance-bootstraping-next.md
+++ b/docs/markdown/01-intro/12-advance-bootstraping-next.md
@@ -12,5 +12,3 @@ npx create-next-app
Server side rendering let you generate a client-side rendering application or universal application into HTML, then
make it interactive by executing the client side Javascript
-
-
diff --git a/docs/markdown/01-intro/20-what-is-react.md b/docs/markdown/01-intro/20-what-is-react.md
index a049ef6..dc1bcc9 100644
--- a/docs/markdown/01-intro/20-what-is-react.md
+++ b/docs/markdown/01-intro/20-what-is-react.md
@@ -1,4 +1,4 @@
-
+
# What is React?
diff --git a/docs/markdown/01-intro/30-virtual-dom.md b/docs/markdown/01-intro/30-virtual-dom.md
index 34bdbf3..255290d 100644
--- a/docs/markdown/01-intro/30-virtual-dom.md
+++ b/docs/markdown/01-intro/30-virtual-dom.md
@@ -1,4 +1,4 @@
-
+
# Virtual DOM
diff --git a/docs/markdown/01-intro/40-jsx.md b/docs/markdown/01-intro/40-jsx.md
index 63ce9fb..79cdc90 100644
--- a/docs/markdown/01-intro/40-jsx.md
+++ b/docs/markdown/01-intro/40-jsx.md
@@ -1,4 +1,4 @@
-
+
# JSX
diff --git a/docs/markdown/02-nodes-elements-components/00-TITLE.md b/docs/markdown/02-nodes-elements-components/00-TITLE.md
index 7cf335b..b8d4700 100644
--- a/docs/markdown/02-nodes-elements-components/00-TITLE.md
+++ b/docs/markdown/02-nodes-elements-components/00-TITLE.md
@@ -1,4 +1,4 @@
-
+
# Nodes, Elements and components
diff --git a/docs/markdown/02-nodes-elements-components/20-component-tree.md b/docs/markdown/02-nodes-elements-components/20-component-tree.md
index 3edc3c9..f916d0e 100644
--- a/docs/markdown/02-nodes-elements-components/20-component-tree.md
+++ b/docs/markdown/02-nodes-elements-components/20-component-tree.md
@@ -1,4 +1,4 @@
-
+
# Component tree
diff --git a/docs/markdown/02-nodes-elements-components/21-props.md b/docs/markdown/02-nodes-elements-components/21-props.md
index ada313d..942af29 100644
--- a/docs/markdown/02-nodes-elements-components/21-props.md
+++ b/docs/markdown/02-nodes-elements-components/21-props.md
@@ -1,4 +1,4 @@
-
+
# Props
diff --git a/docs/markdown/02-nodes-elements-components/23-children.md b/docs/markdown/02-nodes-elements-components/23-children.md
index d3f650c..4fbe262 100644
--- a/docs/markdown/02-nodes-elements-components/23-children.md
+++ b/docs/markdown/02-nodes-elements-components/23-children.md
@@ -1,4 +1,4 @@
-
+
# Children and Composition
diff --git a/docs/markdown/02-nodes-elements-components/25-lab-composition.md b/docs/markdown/02-nodes-elements-components/25-lab-composition.md
index 5ad27d8..ec0e59b 100644
--- a/docs/markdown/02-nodes-elements-components/25-lab-composition.md
+++ b/docs/markdown/02-nodes-elements-components/25-lab-composition.md
@@ -12,3 +12,9 @@
### npm run 02-composition
+
+Notes:
+
+- Debug: Show component tree with React DevTools
+ - Chrome: https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
+ - Firefox: https://addons.mozilla.org/fr/firefox/addon/react-devtools/
diff --git a/docs/markdown/02-nodes-elements-components/30-conditionnal-display.md b/docs/markdown/02-nodes-elements-components/30-conditionnal-display.md
index 1a7cb94..656aca4 100644
--- a/docs/markdown/02-nodes-elements-components/30-conditionnal-display.md
+++ b/docs/markdown/02-nodes-elements-components/30-conditionnal-display.md
@@ -1,3 +1,3 @@
-
+
# Conditionals
diff --git a/docs/markdown/02-nodes-elements-components/40-lists.md b/docs/markdown/02-nodes-elements-components/40-lists.md
index 8e08abb..c160f3b 100644
--- a/docs/markdown/02-nodes-elements-components/40-lists.md
+++ b/docs/markdown/02-nodes-elements-components/40-lists.md
@@ -1,3 +1,3 @@
-
+
# Lists
diff --git a/docs/markdown/02-nodes-elements-components/43-list-key-schema.md b/docs/markdown/02-nodes-elements-components/43-list-key-schema.md
index ba7ed69..28d578e 100644
--- a/docs/markdown/02-nodes-elements-components/43-list-key-schema.md
+++ b/docs/markdown/02-nodes-elements-components/43-list-key-schema.md
@@ -2,6 +2,4 @@
# Lists
-
-
![](./assets/images/keys.png)
-
+![full-center h-300](assets/images/keys.png)
diff --git a/docs/markdown/03-states-and-events/00-TITLE.md b/docs/markdown/03-states-and-events/00-TITLE.md
index 7a85b58..f38a169 100644
--- a/docs/markdown/03-states-and-events/00-TITLE.md
+++ b/docs/markdown/03-states-and-events/00-TITLE.md
@@ -1,4 +1,4 @@
-
+
# States & Events
diff --git a/docs/markdown/03-states-and-events/10-states.md b/docs/markdown/03-states-and-events/10-states.md
index 853cdd9..59ecc91 100644
--- a/docs/markdown/03-states-and-events/10-states.md
+++ b/docs/markdown/03-states-and-events/10-states.md
@@ -1,3 +1,3 @@
-
+
# States
diff --git a/docs/markdown/03-states-and-events/35-lab-state-clicks.md b/docs/markdown/03-states-and-events/35-lab-state-clicks.md
index 94f5a03..81f3591 100644
--- a/docs/markdown/03-states-and-events/35-lab-state-clicks.md
+++ b/docs/markdown/03-states-and-events/35-lab-state-clicks.md
@@ -18,3 +18,7 @@
Notes:
- LIVE CODING
+
+- Debug: Show state display and state manipulations in React DevTools
+ - Chrome: https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
+ - Firefox: https://addons.mozilla.org/fr/firefox/addon/react-devtools/
diff --git a/docs/markdown/03-states-and-events/55-lab-list-and-fetch.md b/docs/markdown/03-states-and-events/55-lab-list-and-fetch.md
index dc43cfa..0dddbbd 100644
--- a/docs/markdown/03-states-and-events/55-lab-list-and-fetch.md
+++ b/docs/markdown/03-states-and-events/55-lab-list-and-fetch.md
@@ -17,3 +17,7 @@
Notes:
- LIVE CODING
+
+- Debug: Show state updated with fetch in React DevTools
+ - Chrome: https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
+ - Firefox: https://addons.mozilla.org/fr/firefox/addon/react-devtools/
diff --git a/docs/markdown/04-lifecycle-et-dom/00-TITLE.md b/docs/markdown/04-lifecycle-et-dom/00-TITLE.md
index 858d862..042529c 100644
--- a/docs/markdown/04-lifecycle-et-dom/00-TITLE.md
+++ b/docs/markdown/04-lifecycle-et-dom/00-TITLE.md
@@ -1,4 +1,4 @@
-
+
# Lifecycle & DOM
diff --git a/docs/markdown/04-lifecycle-et-dom/10-lifecycle.md b/docs/markdown/04-lifecycle-et-dom/10-lifecycle.md
index 42a3d16..62ab9f3 100644
--- a/docs/markdown/04-lifecycle-et-dom/10-lifecycle.md
+++ b/docs/markdown/04-lifecycle-et-dom/10-lifecycle.md
@@ -1,4 +1,4 @@
-
+
# Lifecycle
diff --git a/docs/markdown/04-lifecycle-et-dom/20-refs.md b/docs/markdown/04-lifecycle-et-dom/20-refs.md
index 11cda9c..e36906f 100644
--- a/docs/markdown/04-lifecycle-et-dom/20-refs.md
+++ b/docs/markdown/04-lifecycle-et-dom/20-refs.md
@@ -1,4 +1,4 @@
-
+
# Refs
diff --git a/docs/markdown/05-custom-hooks-and-hoc/00-TITLE.md b/docs/markdown/05-custom-hooks-and-hoc/00-TITLE.md
index 4419d9a..c31d725 100644
--- a/docs/markdown/05-custom-hooks-and-hoc/00-TITLE.md
+++ b/docs/markdown/05-custom-hooks-and-hoc/00-TITLE.md
@@ -1,4 +1,4 @@
-
+
# Hooks custom et HOC
diff --git a/docs/markdown/05-custom-hooks-and-hoc/10-custom-hooks.md b/docs/markdown/05-custom-hooks-and-hoc/10-custom-hooks.md
index b0d175c..44d7df2 100644
--- a/docs/markdown/05-custom-hooks-and-hoc/10-custom-hooks.md
+++ b/docs/markdown/05-custom-hooks-and-hoc/10-custom-hooks.md
@@ -1,4 +1,4 @@
-
+
# Custom Hooks
diff --git a/docs/markdown/05-custom-hooks-and-hoc/15-lab-custom-hooks.md b/docs/markdown/05-custom-hooks-and-hoc/15-lab-custom-hooks.md
index 5e38abd..ac4e24a 100644
--- a/docs/markdown/05-custom-hooks-and-hoc/15-lab-custom-hooks.md
+++ b/docs/markdown/05-custom-hooks-and-hoc/15-lab-custom-hooks.md
@@ -19,3 +19,7 @@
Notes:
- LIVE CODING
+
+- Debug: Show how custom hook is shown in React DevTools
+ - Chrome: https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
+ - Firefox: https://addons.mozilla.org/fr/firefox/addon/react-devtools/
diff --git a/docs/markdown/05-custom-hooks-and-hoc/20-HOC.md b/docs/markdown/05-custom-hooks-and-hoc/20-HOC.md
index 6f293a2..e39de70 100644
--- a/docs/markdown/05-custom-hooks-and-hoc/20-HOC.md
+++ b/docs/markdown/05-custom-hooks-and-hoc/20-HOC.md
@@ -1,3 +1,3 @@
-
+
# High Order Component
diff --git a/docs/markdown/05-custom-hooks-and-hoc/25-lab-hoc.md b/docs/markdown/05-custom-hooks-and-hoc/25-lab-hoc.md
index 04d2da0..4f09ffe 100644
--- a/docs/markdown/05-custom-hooks-and-hoc/25-lab-hoc.md
+++ b/docs/markdown/05-custom-hooks-and-hoc/25-lab-hoc.md
@@ -17,3 +17,7 @@
Notes:
- LIVE CODING
+
+- Debug: Show HOC in React DevTools
+ - Chrome: https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
+ - Firefox: https://addons.mozilla.org/fr/firefox/addon/react-devtools/
diff --git a/docs/markdown/06-routing-context-suspense/15-lab-routing.md b/docs/markdown/06-routing-context-suspense/15-lab-routing.md
index d8f7b09..bf76e40 100644
--- a/docs/markdown/06-routing-context-suspense/15-lab-routing.md
+++ b/docs/markdown/06-routing-context-suspense/15-lab-routing.md
@@ -19,3 +19,7 @@
Notes:
- LIVE CODING
+
+- Debug: Show router in React DevTools
+ - Chrome: https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
+ - Firefox: https://addons.mozilla.org/fr/firefox/addon/react-devtools/
diff --git a/docs/markdown/06-routing-context-suspense/25-lab-context.md b/docs/markdown/06-routing-context-suspense/25-lab-context.md
index 6036d60..833df94 100644
--- a/docs/markdown/06-routing-context-suspense/25-lab-context.md
+++ b/docs/markdown/06-routing-context-suspense/25-lab-context.md
@@ -21,3 +21,7 @@
Notes:
- LIVE CODING
+
+- Debug: Show context in React DevTools
+ - Chrome: https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
+ - Firefox: https://addons.mozilla.org/fr/firefox/addon/react-devtools/
diff --git a/docs/markdown/07-formulaires/00-TITLE.md b/docs/markdown/07-formulaires/00-TITLE.md
index eb00090..4cefe1b 100644
--- a/docs/markdown/07-formulaires/00-TITLE.md
+++ b/docs/markdown/07-formulaires/00-TITLE.md
@@ -1,4 +1,4 @@
-
+
# Formulaires
diff --git a/docs/markdown/07-formulaires/10-vanilla.md b/docs/markdown/07-formulaires/10-vanilla.md
index 10e98ef..418825e 100644
--- a/docs/markdown/07-formulaires/10-vanilla.md
+++ b/docs/markdown/07-formulaires/10-vanilla.md
@@ -1,3 +1,3 @@
-
+
# Basis
diff --git a/docs/markdown/07-formulaires/20-uncontrolled.md b/docs/markdown/07-formulaires/20-uncontrolled.md
index fe99198..6ef6b44 100644
--- a/docs/markdown/07-formulaires/20-uncontrolled.md
+++ b/docs/markdown/07-formulaires/20-uncontrolled.md
@@ -1,4 +1,4 @@
-
+
# Uncontrolled VS Controlled
diff --git a/docs/markdown/07-formulaires/30-react-hook-form.md b/docs/markdown/07-formulaires/30-react-hook-form.md
index 4eb0c0b..9e5de45 100644
--- a/docs/markdown/07-formulaires/30-react-hook-form.md
+++ b/docs/markdown/07-formulaires/30-react-hook-form.md
@@ -1,4 +1,4 @@
-
+
# React Hook Form
@@ -50,7 +50,7 @@ function MyForm({ initialValue = {}, onSubmit }: MyFormProps) {
defaultValues:initialValue });
return
@@ -77,7 +77,7 @@ function MyForm({ initialValue = {}, onSubmit }: MyFormProps) {
const onSubmit: SubmitHandler = onSubmit;
return
diff --git a/docs/markdown/07-formulaires/40-formik.md b/docs/markdown/07-formulaires/40-formik.md
index b7d0bf3..d7345eb 100644
--- a/docs/markdown/07-formulaires/40-formik.md
+++ b/docs/markdown/07-formulaires/40-formik.md
@@ -1,4 +1,4 @@
-
+
# Formik
diff --git a/docs/markdown/08-states/00-TITLE.md b/docs/markdown/08-states/00-TITLE.md
index 41c068d..e3b1563 100644
--- a/docs/markdown/08-states/00-TITLE.md
+++ b/docs/markdown/08-states/00-TITLE.md
@@ -1,4 +1,4 @@
-
+
# Gestion d’états
diff --git a/docs/markdown/08-states/10-use-reduce-hook.md b/docs/markdown/08-states/10-use-reduce-hook.md
index c88ab92..aa7ec32 100644
--- a/docs/markdown/08-states/10-use-reduce-hook.md
+++ b/docs/markdown/08-states/10-use-reduce-hook.md
@@ -1,4 +1,4 @@
-
+
# useReducer
@@ -30,7 +30,7 @@ function Button() => {
type ButtonReducerState = { clickCount: number };
function Button() => {
- const [state, dispatch] = useReducer(reducer, { clickCount: 0 });
+ const [state, dispatch] = useReducer(reducer, { clickCount: 0 });
return