fix a lot a typo or errors + add slides/steps unit tests

sfeir-open-source · May 27, 2024 · 6d505a0 · 6d505a0
1 parent 466a673
commit 6d505a0
Show file tree

Hide file tree

Showing 76 changed files with 2,091 additions and 100 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v16.14.0
+v18
diff --git 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
diff --git 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 <!-- .element: class="center" -->
+
+##==##
+
+# 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
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Introduction
 

diff --git a/docs/markdown/01-intro/10-app-discovery.md b/docs/markdown/01-intro/10-app-discovery.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # App discovery
 

diff --git 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
-
-<!-- .element: class="important" -->
diff --git a/docs/markdown/01-intro/20-what-is-react.md b/docs/markdown/01-intro/20-what-is-react.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # What is React?
 

diff --git a/docs/markdown/01-intro/30-virtual-dom.md b/docs/markdown/01-intro/30-virtual-dom.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Virtual DOM
 

diff --git a/docs/markdown/01-intro/40-jsx.md b/docs/markdown/01-intro/40-jsx.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # JSX
 

diff --git a/docs/markdown/02-nodes-elements-components/00-TITLE.md b/docs/markdown/02-nodes-elements-components/00-TITLE.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # 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
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Component tree
 

diff --git a/docs/markdown/02-nodes-elements-components/21-props.md b/docs/markdown/02-nodes-elements-components/21-props.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Props
 

diff --git a/docs/markdown/02-nodes-elements-components/23-children.md b/docs/markdown/02-nodes-elements-components/23-children.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # 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
@@ -12,3 +12,9 @@
 <br>
 
 ### 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
@@ -1,3 +1,3 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Conditionals
diff --git a/docs/markdown/02-nodes-elements-components/40-lists.md b/docs/markdown/02-nodes-elements-components/40-lists.md
@@ -1,3 +1,3 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # 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
@@ -2,6 +2,4 @@
 
 # Lists
 
-<div style="height:300px; width:60%; margin: 50px auto;">
-    <img class="full-height" src="./assets/images/keys.png">
-</div>
+![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
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # States & Events
 

diff --git a/docs/markdown/03-states-and-events/10-states.md b/docs/markdown/03-states-and-events/10-states.md
@@ -1,3 +1,3 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # 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
@@ -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
@@ -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
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Lifecycle & DOM
 

diff --git a/docs/markdown/04-lifecycle-et-dom/10-lifecycle.md b/docs/markdown/04-lifecycle-et-dom/10-lifecycle.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Lifecycle
 

diff --git a/docs/markdown/04-lifecycle-et-dom/20-refs.md b/docs/markdown/04-lifecycle-et-dom/20-refs.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # 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
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # 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
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # 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
@@ -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
@@ -1,3 +1,3 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # 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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Formulaires
 

diff --git a/docs/markdown/07-formulaires/10-vanilla.md b/docs/markdown/07-formulaires/10-vanilla.md
@@ -1,3 +1,3 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Basis
diff --git a/docs/markdown/07-formulaires/20-uncontrolled.md b/docs/markdown/07-formulaires/20-uncontrolled.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # 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
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # React Hook Form
 
@@ -50,7 +50,7 @@ function MyForm({ initialValue = {}, onSubmit }: MyFormProps) {
         defaultValues:initialValue });
     return <form onSubmit={handleSubmit(onSubmit)}>
         <input {...register("firstname")} />;
-        <input {...register("lastname"), { required: true }} />;
+        <input {...register("lastname", { required: true })} />;
         {errors.lastnameRequired && <span>Lastname field is required</span>}
         <button type="submit">Save</button>
     </form>
@@ -77,7 +77,7 @@ function MyForm({ initialValue = {}, onSubmit }: MyFormProps) {
     const onSubmit: SubmitHandler<Inputs> = onSubmit;
     return <form onSubmit={handleSubmit(onSubmit)}>
         <input {...register("firstname")} />;
-        <input {...register("lastname"), { required: true }} />;
+        <input {...register("lastname", { required: true })} />;
         {errors.lastnameRequired && <span>Lastname field is required</span>}
         <button type="submit">Save</button>
     </form>

diff --git a/docs/markdown/07-formulaires/40-formik.md b/docs/markdown/07-formulaires/40-formik.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Formik
 

diff --git a/docs/markdown/08-states/00-TITLE.md b/docs/markdown/08-states/00-TITLE.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # 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
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # useReducer
 
@@ -30,7 +30,7 @@ function Button() => {
 type ButtonReducerState = { clickCount: number };
 
 function Button() => {
-  const [state, dispatch] = useReducer<ButtonReducerState>(reducer, { clickCount: 0 });
+  const [state, dispatch] = useReducer(reducer, { clickCount: 0 });
 
   return <button onClick={() => dispatch('CLICK')}>
         clicked {state.clickCount} times

diff --git a/docs/markdown/08-states/15-lab-use-reduce-hook.md b/docs/markdown/08-states/15-lab-use-reduce-hook.md
@@ -15,3 +15,6 @@
 Notes:
 
 - LIVE CODING
+- Debug: show useReduce state with React Context DevTools
+  - Chrome: https://chromewebstore.google.com/detail/react-context-devtool/oddhnidmicpefilikhgeagedibnefkcf
+  - Firefox: https://addons.mozilla.org/fr/firefox/addon/react-context-devtool/
diff --git a/docs/markdown/08-states/20-redux.md b/docs/markdown/08-states/20-redux.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Redux
 

diff --git a/docs/markdown/08-states/21-redux-toolkit.md b/docs/markdown/08-states/21-redux-toolkit.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Redux Toolkit
 
@@ -50,7 +50,7 @@ interface TodosReducerState {
 
 export const todosSlice = createSlice({
   name: 'todos',
-  initialState: { todos: [] },
+  initialState: { todos: [] } as TodosReducerState,
   reducers: {
     add: (state, action: PayloadAction<string>) => {
       state.todos.push({ text: action.payload });
@@ -106,7 +106,7 @@ export const navigateTo = createAction<string>('navigateTo');
 ```typescript [7,13|8,12|9-11|7-13]
 export const todosSlice = createSlice({
   name: 'todos',
-  initialState: { todos: [] },
+  initialState: { todos: [] } as TodosReducerState,
   reducers: {
     /* ... */
   },

diff --git a/docs/markdown/08-states/22-react-redux.md b/docs/markdown/08-states/22-react-redux.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # React-Redux
 

diff --git a/docs/markdown/08-states/25-lab-redux.md b/docs/markdown/08-states/25-lab-redux.md
@@ -19,3 +19,6 @@
 Notes:
 
 - LIVE CODING
+- Debug: show state with Redux DevTools
+  - Chrome: https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
+  - Firefox: https://addons.mozilla.org/fr/firefox/addon/reduxdevtools/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search
diff --git a/docs/markdown/08-states/30-redux-and-async.md b/docs/markdown/08-states/30-redux-and-async.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Redux & Async
 

diff --git a/docs/markdown/08-states/31-redux-thunk.md b/docs/markdown/08-states/31-redux-thunk.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Redux Thunk
 
@@ -69,7 +69,7 @@ const fetchTodosById = createAsyncThunk('todos/fetchById',
 ```typescript [7,13|8,12|9-11|7-13]
 export const todosSlice = createSlice({
   name: 'todos',
-  initialState: { todos: [] },
+  initialState: { todos: [] } as TodosReducerState,
   reducers: {
     /* ... */
   },

diff --git a/docs/markdown/08-states/32-redux-saga.md b/docs/markdown/08-states/32-redux-saga.md
@@ -1,6 +1,6 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
-# Redux Thunk
+# Redux Saga
 
 ##==##
 

diff --git a/docs/markdown/08-states/35-lab-redux-thunk.md b/docs/markdown/08-states/35-lab-redux-thunk.md
@@ -18,3 +18,5 @@
 Notes:
 
 - LIVE CODING
+- Debug: show query DevTools
+  - https://tanstack.com/query/latest/docs/framework/react/devtools
diff --git a/docs/markdown/08-states/40-react-query.md b/docs/markdown/08-states/40-react-query.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # @tanstack/react-query
 

diff --git a/docs/markdown/09-components-library-and-testing/00-TITLE.md b/docs/markdown/09-components-library-and-testing/00-TITLE.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="transition bg-pink" -->
+<!-- .slide: class="transition" -->
 
 # Bibliothèques de composants et testing
-Original file line number
+Diff line change
@@ Expand Up / @@ -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
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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

		<!-- .element: class="important" -->