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 -
- -
+![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
; - ; + ; {errors.lastnameRequired && Lastname field is required}
@@ -77,7 +77,7 @@ function MyForm({ initialValue = {}, onSubmit }: MyFormProps) { const onSubmit: SubmitHandler = onSubmit; return
; - ; + ; {errors.lastnameRequired && Lastname field is required}
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