Skip to content

Commit b532ba8

Browse files
authored
Add react in jun1 (#363)
* Add react in jun1 * Update README.md
1 parent 0389126 commit b532ba8

File tree

2 files changed

+74
-0
lines changed

2 files changed

+74
-0
lines changed

frontend/junior-1/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@
55
- [JavaScript](./js.md)
66
- [Тестирование](./testing.md)
77
- [Git](../../shared/junior-1/git.md)
8+
- [React](./react.md)

frontend/junior-1/react.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
# React
2+
3+
* Что такое React?
4+
* Что такое React Element? Как его можно создать? Из чего он состоит?
5+
* Что будет, если передать булевые, `null` или `undefined` значения в children?
6+
* Что такое React Component?
7+
* Что делают конструкторы в родительских классах реакт компонент? Когда надо вызывать `super`, а когда нет?
8+
* Что такое JSX и зачем он нужен?
9+
* Почему атрибуты в JSX пишутся, используя camelCase (например, `tabIndex`, а не `tabindex`)? Почему `className`, а не `class`?
10+
* Почему название компоненты, которая используется в JSX, нужно писать с большой буквы?
11+
* В чём проблема следующего кода `<p>{items.length && <El items={items} />}</p>`?
12+
* Написать аналог с `React.createElement`:
13+
```javascript
14+
<OuterComponent color="black" disabled>
15+
<InnerComponent hidden={false} />
16+
<div>
17+
Div text content
18+
</div>
19+
</OuterComponent>
20+
```
21+
* Что такое Virtual DOM и зачем он нужен?
22+
* Что такое `state` и `props` у компонента?
23+
* Как обновить `state`? Почему не стоит это делать через прямую запись в `this.state`?
24+
* Если передать в `setState` не все свойства, которые до этого уже были в стейте, то будут ли удалены те, что не переданы?
25+
* В каких случаях стоит хранить значения в стейте компоненты, а в каких случаях в инстансе?
26+
* Как правильно обновлять `state` на основе предыдущего значения `state`? Какие могут при этом возникнуть проблемы?
27+
* Что такое top-down data flow? Что является основным механизмом синхронизации нескольких компонент?
28+
* `props.children`
29+
* Что это такое?
30+
* Когда может быть полезным?
31+
* Что позволяет делать `React.Children` API?
32+
* Component Lifecycle
33+
* Что это такое?
34+
* Когда какие методы вызываются? В каком порядке?
35+
* Как и в каких случаях использовать те или иные методы жизненного цикла?
36+
* Что должен делать метод `render`? Почему необходимо держать этот метод чистым?
37+
* Hooks
38+
* Какие существуют правила при работе с хуками?
39+
* Для чего предназначены хуки `useState`, `useReducer`, `useEffect`? Как с ними работать?
40+
* Что может возвращать колбэк, передаваемый в `useEffect`?
41+
* Что такое массив зависимостей? Рассказать как он влияет на работу хука на примере useEffect (в том числе на возвращаемое колбэком значение).
42+
* Что такое HOC? Когда хоки могут быть полезны?
43+
* Что такое React Fragment? Для чего он нужен? Как его использовать?
44+
* Performance
45+
* Когда передача инлайн-коллбека ухудшает производительность и почему? Пример: `<LoginButton onClick={(e) => this.handleClick(e, user)}>`
46+
* refs
47+
* Что это такое? Зачем нужны? Как их использовать?
48+
* Как и для чего использовать хук `useRef`?
49+
* Что делает и зачем нужен метод `React.forwardRef`?
50+
* Почему refs стоит использовать умеренно?
51+
* Controlled и uncontrolled компоненты
52+
* Что это такое? Как происходит работа с инпутами?
53+
* Как задать дефолтное значение для инпута в uncontrolled компоненте?
54+
* Что такое Context и когда может быть полезен?
55+
* Portals
56+
* Что это такое? Зачем нужны? Как использовать?
57+
* Как будет работать контекст и event bubbling в случае с порталами?
58+
* Что такое Error Boundaries? Зачем они нужны? Как ими пользоваться?
59+
* Будут ли "пойманы" в `catch` блоке ошибки, возникающие при рендере `InnerComponent`? Почему?
60+
```
61+
function OuterComponent() {
62+
try {
63+
return <InnerComponent />;
64+
} catch (error) {
65+
handleError(error);
66+
}
67+
}
68+
```
69+
70+
### Ресурсы
71+
72+
* [React Documentation](https://reactJS.org/docs/getting-started.html)
73+
* [Why Do We Write super(props)?](https://overreacted.io/why-do-we-write-super-props/)

0 commit comments

Comments
 (0)