Slides for 'React Hooks Advanced' lesson

package.json

@@ -7,7 +7,7 @@
     "start": "webpack serve --mode development --hot",
     "build": "npx webpack --mode production",
     "calc": "npx ts-node scripts/calc",
-    "slides": "reveal-md",
+    "slides": "reveal-md ./presentations",
     "lint": "npx eslint --ext .js,.jsx,.ts,.tsx --fix ./",
     "loki:update": "npm run build-storybook && npx loki update --requireReference --reactUri file:./storybook-static",
     "loki:approve": "npx loki approve",

presentations/module2/9_ReactHooksAdvanced/ReactHooksAdvanced.md

@@ -0,0 +1,178 @@
+---
+title: Advanced React Hooks
+description: Advanced React Hooks
+---
+
+# OTUS
+
+## ReactJS
+
+<!--v-->
+
+### Меня хорошо слышно и видно?
+
+![Не забыл?](https://www.meme-arsenal.com/memes/1bc94af1680d8ec9c2053b076d5f7990.jpg)
+
+### Не забыл включить запись?
+
+<!--v-->
+
+## Advanced React Hooks
+
+<!--v-->
+
+## О вебинаре
+
+<ul>
+    <li>Дополнительные хуки - useReducer, useDebugValue, useCustomHook</li>
+    <li>Еще раз про тестирование</li>
+    <li>Пример хуков из учебного проекта</li>
+</ul>
+
+<!--v-->
+
+## useReducer
+
+```
+const [state, dispatch] = useReducer(reducer, initValue, initFunction);
+reducer = (prevState, action) => newState;
+```
+
+<br />
+
+<section>
+  <ol>
+    <li>Вместо прямого задания нового state, вызывается dispatch. Всё что передано в dispatch -> action в reducer</li>
+    <li>Для инициализации может принимать третьим аргументом функцию, который преобразует initValue</li>
+  </ol>
+</section>
+
+<!--v-->
+
+## useReducer. Пример
+
+```js
+function todosReducer(state, action) {
+  switch (action.type) {
+    case "load":
+      return {
+        books: [],
+        loading: true,
+      };
+    // ... остальные действия ...
+    default:
+      return state;
+  }
+}
+```
+
+<!--v-->
+
+## useReducer. Пример
+
+```js
+function TodosList() {
+  const [todos, dispatch] = useReducer(todosReducer, []);
+
+  function handleLoadClick() {
+    dispatch({ type: "load" });
+  }
+
+  // ...
+}
+```
+
+<!--v-->
+
+## useReducer. Упрощенная реализация
+
+```js
+function useReducer(reducer, initialState) {
+  const [state, setState] = useState(initialState);
+
+  function dispatch(action) {
+    const nextState = reducer(state, action);
+    setState(nextState);
+  }
+
+  return [state, dispatch];
+}
+```
+
+<!--v-->
+
+## useReducer. Примеры
+
+1. Рассмотрим CounterReducer:
+   - [пример](https://github.com/nickovchinnikov/react-js-tutorial/blob/ce3a3fe6fb565377beb6a06041e49531f47ceb78/lessons/module2/7_ReactHooks/CounterReducer.tsx) использования useReducer
+   - [тестирование](https://github.com/nickovchinnikov/react-js-tutorial/blob/ce3a3fe6fb565377beb6a06041e49531f47ceb78/lessons/module2/7_ReactHooks/CounterReducer.test.tsx) reducer'а
+
+2. Реализуем:
+<ul>
+    <li>дополнительные action'ы для CounterReducer</li>
+    <li>и соответствующие тесты для reducer'а</li>
+</ul> 
+
+<!--v-->
+
+## Вопросы
+
+<!--v-->
+
+## useDebugValue
+
+1. Добавляет некое строковое значение пользовательским Hooks, которое будет отображаться в react-devtools
+2. Вторым аргументов (опционально) передается функция трансформации из объекта в строку. Вызов произойдет когда hook инспектируется
+
+```js
+const useCustomhook = () => {
+  const [state, setState] = useState("name");
+  useDebugValue(
+    `custom hook, ${state}`,
+    str => `${str}, ${new Date().toDateString()}`
+  );
+  return [state, setState];
+};
+```
+
+<!--v-->
+
+## useDebugValue. Пример
+1. Рассмотрим hook [useMouseDown](https://github.com/nickovchinnikov/minesweeper/blob/2ad019ff5be521f4e42f0793f69437f31a5a3555/src/components/hooks/useMouseDown.ts):
+<ul>
+    <li>его реализацию</li>
+    <li>для чего используется</li>
+    <li>тесты</li>
+    <li>пример использования useDebugValue</li>
+</ul> 
+
+<!--v-->
+
+## useCustomHooks
+
+Функция, к которой применяются те же правила, что и к встроенным в React. **Какие?**
+- Начинается с префикса **use**
+- Используется только в пользовательских hook функциях или функциональных компонентах
+- Вызов всегда происходит на верхнем уровне, без условий, циклов и т.п.
+
+<!--v-->
+
+## useCustomHooks. Примеры
+Более сложные примеры из проекта Minesweeper:
+- [hook useGame](https://github.com/nickovchinnikov/minesweeper/blob/2ad019ff5be521f4e42f0793f69437f31a5a3555/src/modules/GameWithHooks/useGame.ts)
+- [hook useSettings](https://github.com/nickovchinnikov/minesweeper/blob/2ad019ff5be521f4e42f0793f69437f31a5a3555/src/modules/GameWithHooks/useSettings.ts)
+- [hook useStatus](https://github.com/nickovchinnikov/minesweeper/blob/2ad019ff5be521f4e42f0793f69437f31a5a3555/src/modules/GameWithHooks/useStatus.ts)
+- [hook useTime](https://github.com/nickovchinnikov/minesweeper/blob/2ad019ff5be521f4e42f0793f69437f31a5a3555/src/modules/GameWithHooks/useTime.ts)
+- [тесты](https://github.com/nickovchinnikov/minesweeper/blob/2ad019ff5be521f4e42f0793f69437f31a5a3555/src/modules/GameWithHooks/useGame.test.ts) для hook'а useGame
+
+<!--v-->
+
+## Вопросы
+
+<!--v-->
+
+## Ссылка на опрос
+
+<!--v-->
+
+## Спасибо за внимание!

presentations/module3/3_functionalProgrammingMonades/lecture.md

@@ -1,3 +1,4 @@
+[//]: # (TODO: Is this actual?)
 ---
 title: Функциональное программирование и загадочные монады
 description: Monades