From bc5713dd29b94ed8563565400078e351196ad597 Mon Sep 17 00:00:00 2001 From: Mikhail Krasheninnikov Date: Thu, 2 Jun 2022 13:34:36 +0700 Subject: [PATCH 1/2] Add react in jun1 --- frontend/junior-1/react.md | 73 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 frontend/junior-1/react.md diff --git a/frontend/junior-1/react.md b/frontend/junior-1/react.md new file mode 100644 index 00000000..121c7e50 --- /dev/null +++ b/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, нужно писать с большой буквы? + * В чём проблема следующего кода `

{items.length && }

`? + * Написать аналог с `React.createElement`: + ```javascript + + + ``` +* Что такое 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 + * Когда передача инлайн-коллбека ухудшает производительность и почему? Пример: ` this.handleClick(e, user)}>` +* refs + * Что это такое? Зачем нужны? Как их использовать? + * Как и для чего использовать хук `useRef`? + * Что делает и зачем нужен метод `React.forwardRef`? + * Почему refs стоит использовать умеренно? +* Controlled и uncontrolled компоненты + * Что это такое? Как происходит работа с инпутами? + * Как задать дефолтное значение для инпута в uncontrolled компоненте? +* Что такое Context и когда может быть полезен? +* Portals + * Что это такое? Зачем нужны? Как использовать? + * Как будет работать контекст и event bubbling в случае с порталами? +* Что такое Error Boundaries? Зачем они нужны? Как ими пользоваться? + * Будут ли "пойманы" в `catch` блоке ошибки, возникающие при рендере `InnerComponent`? Почему? + ``` + function OuterComponent() { + try { + return ; + } 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/) From 87d1d69d46ea56e337ae041657b01100716b1b36 Mon Sep 17 00:00:00 2001 From: Mikhail Krasheninnikov Date: Thu, 2 Jun 2022 13:37:06 +0700 Subject: [PATCH 2/2] Update README.md --- frontend/junior-1/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/junior-1/README.md b/frontend/junior-1/README.md index d2ab4148..ca866924 100644 --- a/frontend/junior-1/README.md +++ b/frontend/junior-1/README.md @@ -5,3 +5,4 @@ - [JavaScript](./js.md) - [Тестирование](./testing.md) - [Git](../../shared/junior-1/git.md) +- [React](./react.md)