Add react in jun1

frontend/junior-1/README.md

@@ -5,3 +5,4 @@
 - [JavaScript](./js.md)
 - [Тестирование](./testing.md)
 - [Git](../../shared/junior-1/git.md)
+- [React](./react.md)

frontend/junior-1/react.md

@@ -0,0 +1,73 @@
+# React
+
+* Что такое React?
+* Что такое React Element? Как его можно создать? Из чего он состоит?
+  * Что будет, если передать булевые, `null` или `undefined` значения в children?
+* Что такое React Component?
+  * Что делают конструкторы в родительских классах реакт компонент? Когда надо вызывать `super`, а когда нет?
+* Что такое JSX и зачем он нужен?
+  * Почему атрибуты в JSX пишутся, используя camelCase (например, `tabIndex`, а не `tabindex`)? Почему `className`, а не `class`?
+  * Почему название компоненты, которая используется в JSX, нужно писать с большой буквы?
+  * В чём проблема следующего кода `<p>{items.length && <El items={items} />}</p>`?
+  * Написать аналог с `React.createElement`:
+    ```javascript
+    <OuterComponent color="black" disabled>
+      <InnerComponent hidden={false} />
+      <div>
+        Div text content
+      </div>
+    </OuterComponent>
+    ```
+* Что такое Virtual DOM и зачем он нужен?
+* Что такое `state` и `props` у компонента?
+  * Как обновить `state`? Почему не стоит это делать через прямую запись в `this.state`?
+  * Если передать в `setState` не все свойства, которые до этого уже были в стейте, то будут ли удалены те, что не переданы?
+  * В каких случаях стоит хранить значения в стейте компоненты, а в каких случаях в инстансе?
+  * Как правильно обновлять `state` на основе предыдущего значения `state`? Какие могут при этом возникнуть проблемы?
+  * Что такое top-down data flow? Что является основным механизмом синхронизации нескольких компонент?
+* `props.children`
+  * Что это такое?
+  * Когда может быть полезным?
+  * Что позволяет делать `React.Children` API?
+* Component Lifecycle
+  * Что это такое?
+  * Когда какие методы вызываются? В каком порядке?
+  * Как и в каких случаях использовать те или иные методы жизненного цикла?
+* Что должен делать метод `render`? Почему необходимо держать этот метод чистым?
+* Hooks
+  * Какие существуют правила при работе с хуками?
+  * Для чего предназначены хуки `useState`, `useReducer`, `useEffect`? Как с ними работать?
+  * Что может возвращать колбэк, передаваемый в `useEffect`?
+  * Что такое массив зависимостей? Рассказать как он влияет на работу хука на примере useEffect (в том числе на возвращаемое колбэком значение).
+* Что такое HOC? Когда хоки могут быть полезны?
+* Что такое React Fragment? Для чего он нужен? Как его использовать?
+* Performance
+  * Когда передача инлайн-коллбека ухудшает производительность и почему? Пример: `<LoginButton onClick={(e) => this.handleClick(e, user)}>`
+* refs
+  * Что это такое? Зачем нужны? Как их использовать?
+  * Как и для чего использовать хук `useRef`?
+  * Что делает и зачем нужен метод `React.forwardRef`?
+  * Почему refs стоит использовать умеренно?
+* Controlled и uncontrolled компоненты
+  * Что это такое? Как происходит работа с инпутами?
+  * Как задать дефолтное значение для инпута в uncontrolled компоненте?
+* Что такое Context и когда может быть полезен?
+* Portals
+  * Что это такое? Зачем нужны? Как использовать?
+  * Как будет работать контекст и event bubbling в случае с порталами?
+* Что такое Error Boundaries? Зачем они нужны? Как ими пользоваться?
+  * Будут ли "пойманы" в `catch` блоке ошибки, возникающие при рендере `InnerComponent`? Почему?
+  ```
+  function OuterComponent() {
+    try {
+      return <InnerComponent />;
+    } catch (error) {
+      handleError(error);
+    }
+  }
+  ```
+
+### Ресурсы
+
+* [React Documentation](https://reactJS.org/docs/getting-started.html)
+* [Why Do We Write super(props)?](https://overreacted.io/why-do-we-write-super-props/)