0: Че, 1 человек только.

1: Или 1 аккаунта сидите.

2: Можно начинать, да?

3: Отлично.

4: Привет всем. Сегодня у нас

5: Урок по состоянию.

6: Так.

7: Мне кажется, вам че то не то видно сейчас.

8: 5 экран.

9: Рабочий стол 2.

10: Так, вам сейчас че видно?

11: Github правильно.

12: Хорошо.

13: Давайте откроем презентацию. Вот наша презентация.

14: Давайте, значит, с чего начнём состояния?

15: Наверное, надо открыть.

16: Наш сайт какой-нибудь и что? Меня нормально слышно же, да?

17: Так, а че у нас?

18: Витрин, вот это вот.

19: Вот мы когда

20: В интерфейсе куда-то вводим код, текст.

21: То интерфейс он должен вот эти слова где-то запоминать.

22: И то, где это запоминается в реакте, называется состояние.

23: Давайте я сейчас вам покажу, как это программируется.

24: Побольше людей наш.

25: Возьмём код, вот если мы зайдём на github, можно увидеть, что Андрей сделал ветки сюда нажимаем

26: Видим, что у нас есть несколько веток.

27: Про ветки в гитхабе он вам рассказал?

28: Что-нибудь.

29: Да, рассказал хорошо, поэтому возьмём вот эту ветку.

30: Он называется 3, а если пользуетесь, имеет бренди продуктом, то здесь вот есть

31: Кнопочка гит, она может быть в разных местах в интерфейсе, но вот у меня она вот здесь нажимаем

32: Вот здесь есть основная ветка.

33: Переходится через команду чекаут я, ой, в терминале не буду писать.

34: Я через интерфейс сделаю. По умолчанию, мы находимся обычно в мастере.

35: Вот здесь ветки локальные, это уже забранные на компьютер. А вот эти ремонт, это которые есть на сервере, обычно локально. Нету ветки, она есть на сервере. Выбираем её.

36: Плохо работает, делаем чекаут.

37: Оба она забирается локально, и вот бирочкой показано, что сейчас мы переключились в ответ.

38: Смотрим, что здесь есть, здесь есть.

39: У нас.

40: Появился какой-то компонент аккарт, который вы сделали.

41: Есть какие-то данные?

42: Список приложений.

43: Наша главная хедер мейн.

44: Карточки.

45: Так, и че мы захотим сделать? Например, мы захотим сделать фильтр.

46: Давайте запустим, заходим в pac и jason, можно на всякий случай открыть терминал и

47: Здесь терминал пишем стал.

48: Чтоб проверить, что все пакеты у нас есть.

49: Он говорит, что

50: Death все нормально?

51: Конечно, можно, можно сделать по своему дизайну. Нет, не обязательно, как у нас. Это просто пример, чтоб вы хоть как-то представляете, как должно выглядеть и все.

52: Так, сейчас я неудобно так чат сделал. Сейчас я открою, чтобы вас лучше видеть.

53: А так.

54: Как я буду видеть, не говорите.

55: Так возвращаемся.

56: С пакетом у нас все в порядке.

57: Как писать состояние?

58: Давайте я вам объясню. Вы, наверное, не знаете, что такое замыкание.

59: Замыкание слышали?

60: Замыкание это вообще популярная тема. Часто спрашивают, а особенно

61: На позицию новичка.

62: Наверное, не слышали. Вы че-нибудь напишите в чате, я сейчас вам начну рассказывать.

63: Так Андрей пишет.

64: А слышите хорошо.

65: Я здесь написал простую реализацию. Давайте сейчас покажу, как это выглядит в интерфейсе. Сначала вот у нас есть

66: А этот сейчас запущу, только сориентируюсь. Так.

67: Ещё.

68: Идём, растут у нас тут вот.

69: Наш сайт сделаем здесь сейчас инпут, какой-нибудь инпут это поле для ввода.

70: Это у нас.

71: Апп.

72: Так, здесь, наверное, сделаю.

73: У нас будет input.

74: Нет, так мы не будем делать так плохой путь получается.

75: Так получается нормальная.

76: Все.

77: Сделаем ему класс, чтобы здесь были отступы.

78: Все. Угу. Откуда идёт? Отсюда проваливаемся.

79: Создал какой-то и создадим ему небольшой маржи.

80: Марк.

81: Смотрим.

82: Так сейчас почему она так выглядит?

83: Потому что, наверное, у него такое есть свойство.

84: Вот давайте, блин, шума. Так, давайте я вам поясню, че я сделал.

85: На всякий случай я создал дифф.

86: В него положил импут и чтобы импут хорошо позиционировался, я вот этому диву задал свойство. Максимальная ширина 1180, чтобы он был примерно шириной, как остальной контент. Вот этот вот и сделал ему маржи 2

87: Авто 20. Это означает, что сверху снизу будет по 20, а авто слева справа это значит будет автоматически и когда слева справа автоматически это работает в браузере как центрирование по вертика.

88: Си.

89: Ругается на cut, потому что не так.

90: Слушайте, тут че то слишком шумно. Дайте я сейчас попробую перебазироваться, подождите 1 секунду.

91: Вернулся, здесь оказалась свободная будка.

92: Может и там девочки че то расшумелись в офисе.

93: Так на чем мы остановились? На.

94: Есть. Выровнялись посередине, чтоб было красиво. Почему-то ругается. На input открываем код, смотрим.

95: Че с ним не так?

96: Я написал.

97: Put.

98: А должен быть идентификатор или имя, пускай будет идентификатором. По моему, это на самом деле неважно.

99: Перестал ругаться.

100: Так, теперь нам нужно как-то в него засунуть текст.

101: Если мы просто напишем туда что-то, то в интерфейсе текст появляется, но нам его нужно как-то забрать в код. Вот мы здесь когда пишем слово атлас

102: Нам же потом это слово надо использовать для поиска, как его забрать.

103: У импута есть, как и у любого интерактивного и не интерактивного элемента, у diva тоже есть, но обычно это в меньшей степени используется подписка на так называемые события.

104: Событий. Это когда вот человек че то делает, например, если я ввожу текст, я совершаю событие или по-английски event.

105: Давайте простое событие, это клик, это ввод данных, это какое-то изменение например, если мы на галочку кликаем это изменение, потому что мы как бы ввод не делаем, мы как бы и кликаем и

106: Изменяем её. Поэтому есть 2 события клик, потому что клик есть у всего практически, а ченч есть, например, у галок.

107: А у deva chan, по моему, нет.

108: Вот у инпута есть событие, вот он подсказывает сразу, он инпут.

109: Форма записи такая, что мы говорим событие, равно какая-то функция, которая обрабатывает это событие. Соответственно, в фигурной скобке внутрь нам нужно написать функцию, чтобы нам её туда написать. Нам её сначала нужно где-то

110: Объявить, объявить её можно прям здесь объявляют обычно внутри компонента, а не вне потому что компонент когда перерендеривать заново, то как бы по хорошему функция должна быть заново объявлена.

111: Потому что может произойти все что угодно. И когда компонент рождается заново, надо, чтобы функция была объявлена заново. Там есть попытки сэкономить на этом, на этом факте, но мы про это потом поговорим, поэтому объявляем просто функцию

112: Пишем функцию, например.

113: The input handler.

114: Это будет функция.

115: У которой будет тело.

116: И, например, она будет в console log выводить то, что мы в неё сейчас напишем.

117: Соответственно нам нужно как-то достать текст из самого инпута, когда мы вот эту функцию сюда передадим.

118: Где он тут вот что произойдёт.

119: Браузер вызовет эту функцию в момент, когда пользователь начнёт вбивать буквы в input.

120: Как там у вас дела? Нормально все?

121: Ага.

122: Но этого недостаточно, потому что нам же в консоль лок надо сюда вывести какую-то переменную. Вот мы допустим.

123: Говори текст, но нам же надо это объявить. Мы не можем просто взять и вывести текст, потому что это несуществующая переменная.

124: Поэтому, чтобы прокинуть.

125: Вот отсюда сюда используются аргументы, как это работает у функции. Мы можем функция наша самодельная. Мы можем сказать, что

126: У нас будет аргумент события.

127: И что произойдёт? Давайте вот мы точно не вот здесь, а

128: Так сделаем.

129: Капусто единичку выведем?

130: Я поставлю брейкпоинт и покажу.

131: Так где тут наш нестор?

132: Так, ой, вот я пишу тогда сюда буква.

133: Вот написал букву, появилась ещё 1 единичка.

134: Написал букву, появилась единичка, то есть функция каждый раз срабатывает, что происходит.

135: Открываем девтулс закладка сурсис. Тут можно найти где-то наш код. Можно написать контрол п по моему, да, апп.

136: G6 вот наш код мы можем поставить брейкпоинт и в момент, когда будет ввод.

137: Вот остановится, и мы сможем посмотреть, что произошло.

138: Я здесь просто написал слово event, и получилось так, что.

139: Это стало переменной, в которой появились все вот эти поля. И среди вот этих полей есть то, которое содержит текст. Вот этот ддд д р.

140: Как оно там появляется?

141: Поскольку инпут хендлер это функция input вызывает мою функцию, и в момент вызова он туда передаёт 1 единственную переменную вот эту вот ивент.

142: И таким образом, что если получается, если мы её здесь объявим,

143: То-то, что будет передано, попадёт в эту переменную, и мы сможем это использовать.

144: Это не очень ужасно звучит.

145: Так, Андрей что-то пишет, ждём.

146: Наверное, нет.

147: Вряд ли, но я в этих юридических делах не силён, но, по моему, мне кажется, всем плевать. Обычно, если на чем-то пытаетесь заработать, и это не ваше, вот тогда могут заругаться.

148: А если вы просто так че то делаете там для удовольствия, то там даже американцы не ругаются.

149: Может быть, кроме nintendo?

150: Они говорят жёсткие ребята.

151: Давайте сейчас попробуем ещё по другому написать. Есть.

152: Другая форма записи.

153: А можно начать вот так?

154: Станет ли от этого вам понятнее или непонятнее? Сейчас узнаем. Есть так называемая стрелочная функция. Мы можем

155: Вот такую функцию переписать, как

156: То есть что мы делаем?

157: Мы, по сути, берём аргумент функции.

158: Стрелочка это как бы переход от аргумента к телу и дальше тело. Если у нас тело многострочное, то здесь появляются фигурные скобки. Если у нас аргументов много здесь.

159: Являются просто скобки эвент 1 event 2, почему event 1, event 2, это просто какие-то названия перепутал.

160: Так вот, такая форма записи.

161: Вот так сделал, чтоб он не ругался. Это называется стрелочная функция аналог. Давайте вот здесь вот так сделаем.

162: Вот смотрите.

163: Мы можем записать вот так function, аргумент, аргументы. То есть это то, что мы ожидаем. Скрипт так устроен, что в момент вызова функции тот, кто вызывает, может ничего туда не кинуть. И тогда ивент 1 event 2 и все остальные, которые здесь могут

164: Перечислены они будут просто пустые, но если туда кто-то что то передаёт, то в этих переменных что-то появится. Если передадут 3 аргумента, например, 1 б и собака. То есть 1 попадёт сюда, б попадёт сюда собака никуда.

165: Не попадёт, она просто пролетит и потеряется.

166: Поэтому.

167: Оно такое все очень вольготно. Можно писать. Если пишешь на тайпскрипте, он, конечно, заругается, но джаваскрипт сам по себе позволяет, и мы можем записать вот так так часто тоже пишут. Мы говорим, что мы сюда передаём функцию

168: Которая примет аргумент от

169: Вот этого события и прокинет в нашу функцию.

170: Мы её объявляем вот здесь, говорим, что это уже будет не е, а event, потому что в момент объявления переменной вот здесь, вот в аргументе функции, мы можем назвать её как угодно, это вообще не зависит от внешнего вызова.

171: Может быть, очевидно, но я на всякий случай проговариваю, потому что мне когда-то это не было очевидно. Я поэтому это вам говорю, вдруг это кому-то поможет в понимании. И вот что получается.

172: Он инпут нам прокинет сюда. Давайте можем даже вот так 2 раза написать, что 1 будет работать вот так, a2 будет работать вот так. И это все равно будет нормально.

173: Это пускай будет фильтр 1, а это фильтр 2.

174: Ага.

175: Открываем браузер.

176: Делаем рефреш. Вот у нас появилось 2 инпута. Ну, 1 вводим.

177: Event это очень большой объект, в котором очень много всяких полей, потому что мы тут когда начнём раскрывать там ещё в каждом, который раскрываешь ещё дофига. Естественно обычно люди все это наизусть не знают, они знают просто несколько ключевых и

178: Которыми пользуются и несколько просто по смыслу. Иногда вот не то, что ты ими пользуешься, просто про них знаешь, потому что прочитал где-то в статье.

179: То, чем всегда пользуются, и вы стопудово будете пользоваться, это вот Карен, таргет и таргет для нас сейчас они абсолютно одинаковые, они равны в Карен таргет лежит инпут, в который мы ткнули, и target лежит инпут, в кото

180: Который мы ткнули, потом разберём ситуацию, когда они начинают различаться, пока нам пофигу. Ну вот обычно картаргет мы берём, раскрываем здесь опять же огромное количество всяких полей.

181: Но зато среди них есть поле велью, и там лежит текст наш, который мы вбили, и он всегда там будет лежать. Поэтому мы можем это использовать. Мы идём в наш код.

182: И пишем, создаём, ну, для понятности, да, переменную текст.

183: Пишем эвент.

184: Точка таргет.

185: Вылью.

186: В некоторых.

187: Случаях почти всегда он называется велью, за небольшим исключением. Иногда, по моему, есть какие-то теги, у которых не велью. Ну, я думаю, это вы методом научного тыка просто выясните, вот открываете Карен таргет, просто пытаетесь глазками найти, где

188: То значение, которое вы ищите.

189: И вот посмотрим, теперь мы выведем текст. Вот сюда блок вместо единички.

190: Рано.

191: Так, брекпоинт пока уберём, откроем консольку.

192: Пишем.

193: Привет. Каждое срабатывание буквы, он делает консоль лог, соответственно, сначала выводит п, потом пр, потом при, ну и так далее. Если мы пишем сюда,

194: Пока он пишет тоже самое п по ок. Пока ддд это просто текст, введённый в консоль, я то что у меня курсор не там стоял.

195: Теперь состояние.

196: *** она нужна?

197: Да, реакт так устроен, что компоненты, а это функция. Помните, мы даже так специально написали фанкшн. Тут Андрюхин вариант с этим, с экспорт дефолтом, но вы, наверное, может помните, что я просто писал функцию и её экспорт.

198: Может быть, с апп кардом. Сейчас посмотрим, как сделано.

199: Здесь просто напрямую экспорт функции, но тем не менее все равно функция

200: Поскольку эта функция, где она, вот, то она выполняется сверху вниз и в тот момент, когда начинает

201: Работать вот этот код return g six, а он тоже превращается в функции вот эти компоненты начинают вызываться как функции, и, соответственно, каждый раз. Поскольку это слово вызываться есть, то каждый раз оно сверху.

202: Выполняется. Если вы напишите что-то типа такого, вот, например, мы объявили переменную лет текст равно пусто.

203: Двоеточие.

204: И потом вы хотите.

205: В эту переменную здесь мы не будем объявлять, мы объявили выше захотите писать каждый раз текст.

206: То сейчас я правда не уверен, будет это работать или нет. Проверим, может быть даже будет. Давайте зайдём тут пока работает.

207: Но когда вот этот компонент, точнее, если такой код написан в компоненте, который где-то глубоко вложен, то снаружи может произойти что-то, что вызовет ререндер, то есть перевызов всех ком.

208: Компонентов функций и ваш перевызове ся. То есть сработает эта строка равно пустоте.

209: Оно все сотрётся.

210: И значение потеряется. Примерно понятна идея, и нам мы не можем вот так вот в тупую писать каждый раз просто переменную в начале функции, потому что при вызове функции она будет заново инициироваться этим значением.

211: Можно было бы подумать, что снаружи можно написать, но это тоже плохой вариант, и понят ли, понятна ли вам эта мысль?

212: Давайте напишите че-нибудь.

213: Что когда вызывается функция, то работает её код, и он заново переинициализировать предыдущие значения, так эта мысль вроде бы понятна.

214: Хорошо, а нам нужно сделать так, чтобы он не забывал. И в реакте придумали конструкцию незамысловатую.

215: Сейчас я вам её напишу. Открываем код.

216: Пишется так он пишется не просто переменная, а пишется вот такая штука.

217: Наверное, да.

218: Тяжело поначалу раз.

219: Тировать и

220: Да.

221: Вот эта штука позволит.

222: Использовать переменную так, чтобы не терять её значение, но

223: Вы, наверное, видите, что есть какая-то функция, которую мы вызываем, она нам возвращает что-то, почему-то написанное в квадратных скобках и правильная запись вот такая.

224: Сейчас я вам напишу целиком.

225: Потом будем разбирать, это значит.

226: И давайте её куда-нибудь тут выведем.

227: Проверим сейчас, как работает. Потом я постараюсь вам объяснить, что означает эта запись.

228: Так я пишу текст, он появляется в переменной текст, который выводится чуть ниже.

229: Теперь как это работает?

230: Ага.

231: Сейчас поставим брекпоинт на return, потому что когда вызывается функция апп, она пробегает сверху вниз. То есть вызывается 8 строка, 10, когда функция вызывается. Вот 12 не вызывается, потому что 12 вызывается

232: Когда вызывается функция input, handler, а когда вызывается апп, вызывается только 8, 10, это комментарий. И вот 19, потому что это return. И теперь смотрите, вот когда я делаю вот так, д, сначала вызы,

233: Называется input handler. Он тут пробегает, вот доходит до консоль лог. Я треугольник нажимаю, отпускаю его. И следующее. Бам вызвался ретурн. Это означает, что вызвалась функция

234: П. И наводим на переменную текст. Вот она, тут есть буква д.

235: Это произошло потому, что вызов вот этой функции заставил реакт перевызвать функцию апп y штука, которая называется use state, она

236: Как раз служит для того, чтобы вы могли сохранять в переменную значение, автоматически вызывая ререндер.

237: Изображение. Ну, ререндер это значит просто перевызов всех функций, которые вот возвращают джес икс.

238: Сейчас мы его давайте отпустим. Он ещё раз сработал 2 раз. Это потому что вот здесь написано

239: Я стирал, Андрюх вернул её. Я опять её сотру, скажу ему, может быть, будем без неё жить. Вот эта штука, она двойной вызов делает, из за этого немного путает.

240: Давайте вот ещё раз 1 раз нажимаем. Произошёл вызов, становился на return. Отпустили. Все, успокоился.

241: Теперь как это работает? Почему здесь квадратные скобочки?

242: Давайте я вам попробую объяснить на кусочке кода. Я попросил дипси мне написать пример супер простой функции, как внутри устроен стейт.

243: Я думаю, что он устроен чуть чуть сложнее, но вот этот механизм, он как бы супер базовый. Смотрите.

244: Что мы делаем? Мы объявляем некую функцию.

245: Угу.

246: Eight стейт передаём туда какое-то значение.

247: Значение сохраняем в переменной, объявленной внутри функции.

248: Затем мы объявляем ещё 1 функцию.

249: И возвращаем её.

250: На самом деле давайте вот это вот пока уберём, потому что это

251: Путает, в принципе, нафиг не надо. Вот давайте вот упростим максимально, чтобы

252: Вот, вот это называется замыкание. Почему? Потому что у нас есть функция, в ней сидит какая-то переменная, мы возвращаем функцию

253: И когда мы будем снаружи дёргать вот эту функцию, у каждой, у каждого экземпляра этой функции будет как бы закэширована переменная стейт.

254: Давайте попробуем это вызвать.

255: Давайте просто напишем.

256: Сейчас вот так делаем.

257: Вызываем. Он вызвался, остановился. Вот на моменте стейт, значит, стейт у нас вернул объект с 1 единственной функцией y state. Собственно, он сделал вот это

258: Том, что произошло внутри.

259: Ещё раз перевызове.

260: Не понял, не остановился. Вот здесь сделай, пожалуй.

261: Вот сюда прилетело, а оно сохранилось в переменной стейт.

262: И, ну, пока хорошо, все теперь делаем следующее теперь делаем.

263: Пробуем вызвать, что поскольку у нас функция возвращает штуку, содержащую функцию, поэтому мы можем вот так написать.

264: У этой штуки есть функция y state, поскольку эта функция мы её можем вызвать, если мы её вызовем, код перейдёт выполняться вот сюда.

265: А это, в свою очередь, возвращает вот такую конструкцию. Помните, я вам ещё в самом начале объяснял, что джейс икс должен возвращать 1 штуку.

266: Но если вдруг надо вернуть 2 штуки, то мы можем завернуть во фрагмент, и тогда у нас получается как бы 2 Тега сидящих внутри фрагмента. Мы возвращаем 1 тег, но можно вернуть массив. И вот в этот момент, когда нам

267: Нужно вернуть 2 сущности переменную и функцию. Используется вот этот приём, когда возвращается массив. То есть турне должна быть 1 какая-то штука, это массив, но она содержит в себе 2. Если бы это был объект, то приходи.

268: Хотелось бы чуть более неудобно писать вот так.

269: Давайте сейчас попробуем ещё раз сделать.

270: Или вот так сейчас.

271: Смотрите, что будет. Вызываем, останавливаемся, что у нас оказалось в переменной тест. Переменной тест. У нас оказался массив, состоящий из

272: Вот этой переменной стейт, которая содержит ааа.

273: И какой-то функции. Ну поскольку это массив, он, видите, через запятую записан, а запятая функция, если мы раскрываем, то 0 элемент это значение, a1 элемент это функция

274: И длина 2, потому что у массива есть только поля с номерами 1, 2, 0, 1, 2, 3, 4, 5 и так далее. И поле, лент, и все.

275: И есть такая форма записи.

276: Давайте я сейчас вам её сначала на примере покажу. Допустим, у нас есть массив.

277: Состоящий из а.

278: И b.

279: Если б мы захотели.

280: Обращаться к каким-то, ну, к элементам, например, к 1, то мы должны были написать a 0.

281: Ак. Б a1 и нам бы пришлось бы написать что-то типа того лет, а равно a 0.

282: Лет б равно, a1 так можно, но можно, короче.

283: И эта фигня называется деструктуризация. Можно написать.

284: Вот так.

285: Оба мы закомментируем это, иначе он ругается на двойное объявление.

286: И пишем прям так. А б state.

287: Смотрите, что будет. Ставлю опять брейкпоинт перезапускаю.

288: Что произошло? Мы объявили переменную a.

289: Теперь у нас а содержит а a b содержит б.

290: То есть мы как бы говорим, что мы, массив распаковываем в массив, и его значения будут попадать в переменные, которые подставлены в позиции по очереди мы в позицию 0.

291: Подставляем переменную, а в позицию б подставляем, ой, в позицию 2 подставляем переменную б, и 1 элемент массива попадает в 1 переменную. 2 элемент попадает во 2. Например, напиши мы вот так.

292: У нас же там нету в массиве, да, мы сейчас перезапустим.

293: А равно, а б равно б ц равно дифай, потому что у нас в массиве не было ц, соответственно, когда мы возвращаем 2 штуки, переменную со значением и переменную, которая, че делает, она переданное зна.

294: Значение засовывает в эту переменную. То есть стейт это переменная с данными сет стейт. Это то, что засовывает значение в переменную.

295: Мы возвращаем и вот таким образом, как вот здесь

296: Мы можем получить 1, мы здесь можем любые слова писать.

297: 1, это будет переменная, которая хранит значение, a2 это функция, которую в эту переменную значение записывает.

298: Соответственно, сначала мы туда записываем. Ничего, это хорошая практика. Когда мы объявляем вот эту конструкцию, туда че-нибудь засунуть. Вот по умолчанию можно ничего не писать, но лучше написать тот тип данных, который там будет лежать. Тем более, если это

299: А он, скорее всего, ещё и заругается. Если вы просто сюда ничего не напишите, потому что если это тип строка, то, ну, положи туда пустую строку.

300: И затем, чтобы туда на самом деле что-то записать повторно, уже мы вызываем сет текст в сет текст, мы засовываем вот этот наш Карен таргет и таким образом

301: Переменный текст, оказывается.

302: То, что было вбито в input смотрим.

303: Ещё раз.

304: Оба.

305: Что произошло?

306: Мы видим, что я вбил букву д. Буква д написалась здесь, но не написалась здесь. Видите, здесь вывелось, ну, судя по всему, он дефайн просто в виде пустой строки.

307: Идём сюда.

308: Давайте заново, рефреш, пусто.

309: Вот брекпоинт стоит на 14 строке после сет текста.

310: И давайте вот так сделаем, нажимаем д Хоба.

311: Смотрим.

312: Пусто.

313: Но мы вызвали сет текст. Че произошло?

314: Почему тут пусто, хотя мы вызвали сет текст, потому что переменная появится следующий цикл рендера.

315: Сет текст вызовет апп, но после того, как код добежит до конца, потому что код работает, ну, такими как бы, вагонами. Вот мы 1 раз его запустили, он сверху донизу пробежал и остановился. Ждёт пока.

316: Что-то его не пнёт ещё раз. Вот мы букву д вбили, он пробежал до конца этой функции и снова ждёт, пока что-то произойдёт, и после этого уже сет текст, пинает заново ререндер, он заново бежит и после этого уже текст вводит.

317: Со значением сейчас мы его отпускаем, он вызовет ререндер, окажется в 19 строке, и переменная. Текст будет не пустой.

318: Хоба и там появилась буква д.

319: Вот так работает основной механизм сохранения введённых данных в реакте.

320: И мы его будем использовать все то время, пока программируем на реакте.

321: Давайте вы сейчас.

322: Скажите, если кто то что-то не понял, или повторить про что-нибудь, или что-нибудь, да объяснить?

323: Сколько у вас тут много, много?

324: Все понятно. Здорово.

325: Здесь это общее мнение.

326: Теперь как делать?

327: Пиндар.

328: Штука.

329: Так, у нас там по времени че?

330: По времени у нас до 18:30 ещё полчаса.

331: Попытаемся сделать фильтр.

332: Смотрите нам.

333: Чтобы сделать, например, поиск.

334: Вот мы сейчас будем впивать текст, и нам нужно найти среди наших данных вот этих вот атлас заметок, бюджетная линза гавань.

335: Привычек слово, которое совпадает с вбитым текстом.

336: По сути, нам надо че сделать? Мы, когда его вобьём, надо среди этих данных поискать и вывести только те, которые эти, это слово содержат.

337: Давайте это попытаемся реализовать.

338: У нас данные получаются. Откуда вот аппс, они тут лежат. Че мы делаем? Мы их просто импортируем.

339: Угу.

340: Сделаем следующее.

341: Давайте вот так напишем лет.

342: Апп.

343: Сет.

344: Apps это просто дата.

345: Значит, че мы сейчас сделали? Че то он, кстати, ругается.

346: Экспорт конст апс

347: А он ругается.

348: Может, вот так написать?

349: Ладно, ой.

350: Сейчас не будем сильно мудрить.

351: Просто назовём переменную дата.

352: И тогда вот здесь мы её берём, засовываем сюда, значит, код, когда стартует, он сначала, конечно же, выполняет вот эти строчки. И в этот момент появляется переменная дата в тот момент, когда он доходит.

353: Для выполнения вот этой функции у нас дата уже есть, мы её засовываем.

354: Состояние, и она сохраняется в переменной апс, и мы можем её

355: Вот здесь использовать, вот здесь уже используется переменная апс, естественно, вот эта из стейта, а не вот это. И мы сможем, когда мы вобьём текст.

356: Сделать другой сет апс мы возьмём апс, пофильтруем его и засунем в сет апс сокращённый список приложений.

357: Как мы это сделаем? Давайте проверим, что это работает.

358: Ну, ничё не поменялось, оно по прежнему выводится как-то.

359: Теперь.

360: Теперь смотрите, вот теперь 2 прикол.

361: Помните, давайте верну.

362: Вот в этот момент.

363: Мы не можем пофильтровать по значению текст.

364: Потому что его ещё нет.

365: Поэтому вопрос, когда же вызвать сет апс, чтобы туда засунуть сокращённый список? Давайте вот сейчас, как мы бы, как мы могли бы сделать сокращённый список, мы могли бы взять

366: Переменная апс, поскольку это массив, у неё есть встроенные все функции массива у массива есть, перебирала такая как foreach, перебирала мап, которая позволяет трансформировать, а не

367: Просто перебрать. И перебирала, например, фильтр, который позволяет перебрать, сократив размер этого массива.

368: Фильтр как работает. Мы у массива вызываем функцию фильтр и туда передаём функцию, которая вызывается для каждого элемента этого массива апс и говорит брать его или не брать.

369: Функция это обычно такая давайте сразу напишем стрелочную

370: Угу.

371: Элемент индекс.

372: Strelka тельце.

373: И?

374: Можно апп не элемент, а апп назвать, то есть перебираемый апс это будет попадать в переменную апп в и будет его индекс. Он тут нам не особо нужен.

375: Давайте вот так, console.

376: Вот я сейчас покажу, как это работает.

377: Че это такое?

378: Оба.

379: Здесь ставим брейкпоинт, нажимаем рефреш, смотрим, давайте вот так лучше. Сначала останавливаемся тут говорим, есть 5 штук каких-то атлас, гавань там.

380: Затем мы начинаем перебирать.

381: Проваливаемся внутрь, останавливаемся, кто лежит в апп. 1 объект у него есть карт тайтл. Давайте фильтр делать по полю карт тайтл. То есть мы будем брать те карт тайтлы.

382: Который содержит буквы, введённые в input.

383: Для этого мы пишем.

384: Вернуть.

385: Так.

386: Как написать то?

387: Title.

388: Давайте не содержит пока просто равно.

389: Для простоты.

390: Пугает.

391: Двойное равно пускай будет тройное.

392: Вот нам нужно примерно такую функцию вызвать.

393: В момент, после того, как мы

394: Введём какой-то текст.

395: И вот если мы напишем вот так, то че будет?

396: Trash.

397: Пишем слово.

398: Он с виду как не реагирует, да?

399: А почему не реагирует? Потому что нам надо

400: Фильтр как работает, он из себя выкидывает результат.

401: Фильтре так.

402: Давайте ещё рассмотрим.

403: Все будет все время останавливаться.

404: Вот сейчас он пустой, потому что с буквой f ничего нет.

405: И теперь я вбил слово атлас.

406: А он, я сделал равно атлас заметок надо.

407: Atlas заметок.

408: Вот смотрите, он отфильтровал, то есть сработал вот этот фильтр, он говорит, когда равно тогда возвращай, он, значит, вернул всего 1 штуку, у которой название атлас заметок.

409: Давайте я вам сразу сейчас, просто у нас пока времени не очень много остаётся. Покажу, как это по правильному делается. Есть всего 2 основные штуки, которые называются хуки. Это use state i use эффект.

410: Чтобы сделать.

411: Правильно, нужно использовать use эффект.

412: Use эффект это такая штука.

413: Давай, импортируй ся.

414: Import она, эта вот функция, встроена в реакт.

415: Она нам говорит здесь, смотрите, здесь 2 аргумента.

416: 1 аргумент это вот эта функция, 2 аргумент, это массив. То есть эта функция, мы её сразу вызываем и передаём 2 аргумента.

417: Пустая функция, которая пока ничего не делает. И массив тоже пустой, который, ну, пока непонятно, зачем нужен, как это работает.

418: Таким образом мы говорим, пожалуйста, если произойдёт что-то со штуками, которые мы передадим сюда переменными, заново вызываю вот эту функцию.

419: Если мы ничего не передадим, это значит 1 раз сработай, потому что ты ни на что не реагируешь, но 1 раз надо функцию вызвать.

420: Следовательно, для нас это что значит мы хотим, когда поменяется текст, он же не сразу поменяется, он сначала вызовет ререндер.

421: Use эффект поймёт, что текст поменялся и вызовет вот эту функцию.

422: А в этой функции мы напишем

423: Наверное, лучше не так.

424: Такую хитрую конструкцию.

425: Мы профильтруем апс.

426: Получим новую версию и запишем вместо старой.

427: И таким образом поменяется сам ups.

428: Единственное, что так мы немножко попадём в ловушку, так мы каждый раз будем как бы сокращать результат, поэтому в нашем случае имеет смысл каждый раз фильтровать исходные данные.

429: Получать из этих вот сколько их там 4 всего получать усечённый список и его писать в apps.

430: И каждый раз у нас будет как бы апс это представление результата отфильтрованного с помощью нашего фильтра из исходных данных. Дата, дата, вот она отсюда мы вбиваем

431: Текст обновляем переменную в состоянии.

432: Ю эффектом реагируем на неё и говорим вот когда поменялся, пофильтруй-ка нам, пожалуйста, приложеньки наши и засунь их сюда.

433: И в принципе, весь реакт так работает, он реагирует на события и перерендеривать, реагирует, и перерендеривать. Тут этим можно немножко злоупотребить, можно написать юз эффект на юз эффект, на юз эффект это будет не

434: Очень хорошо, но на самом деле, поскольку мы обычно в интерфейсе оперируем там двадцатью сущностями максимум, то сильно напрячь браузер вот этими действиями довольно проблематично.

435: Как у вас дела? Понимаете че-нибудь? Че я говорю?

436: Давайте, напишите.

437: Да ну, понимаете, хорошо.

438: Вы, самое главное, пишите, если не понимаете, я хоть тогда буду понимать, че вам до объяснить, когда вы все понимаете. Это тоже, в принципе, нормально, но

439: Так, так, так, так, в принципе, мы сейчас с вами проработали механику, которую вы будете повторять 100000 миллионов раз, пока будете работать веб разработчиками. Теперь

440: Чтобы сделать любой фильтр, вывести любой список, вам нужно будет вот это просто повторять, ну, с небольшими отклонениями, там может переменные по другому назвать.

441: И по сути, мы сейчас с вами прошли все практически веб программирование, кроме получения данных сервера no, везде есть очень много тонкостей, и мы с вами остальное время будем проходить тонкости.

442: Но вот основная механика она состоит в том, что реагировать с помощью use эффекта и сохранять с помощью use стейта и выводить потом это где-то в jazz иксе.

443: Вот веб разработка.

444: Поэтому, наверное, это у нейросетей хорошо получается.

445: Так, давайте, че, может какой-то вопрос зададите?

446: Нет.

447: Или вам долго писать?

448: Вы 1 пальцем печатаете.

449: И то де, вот.

450: Нет вопросов.

451: Хорошо, давайте.

452: Давайте, давайте. Ну, давайте чекбокс сделаем. Да, что делать, если у нас есть чекбокс, у нас есть ещё 15 минут примерно.

453: Просто для того, чтобы у нас инпут, как бы самый такой бомж, вариант неинтересный. Давайте с чекбоксом попробуем. У нас какие есть данные для чекбокса?

454: Бесплатно, бесплатно, бесплатно и не бесплатно.

455: Давайте, пускай будет.

456: Вот так true если бесплатно.

457: И фелс.

458: Если че то стоит.

459: И если оно че то стоит, то тут будет.

460: Value 100.

461: А здесь будет?

462: Велью 200.

463: Мы хотим найти приложеньки, которые бесплатные. Соответственно, че мы делаем? Делаем чекбокс? Удивительно, но чекбокс это тоже инпут. Только единственное, что у него появляется тип.

464: У всех инпутов есть тип, но по умолчанию если тип не укажешь, то это будет инпут обычный, ну, текстовый, текстовое поле. А если укажешь?

465: Он, наверное, ругался то ещё вот здесь, на так.

466: Так надо писать по хорошему текст.

467: Id то он на самом деле не особо нужен так, текст давайте попробуем айди сотрём айди.

468: И?

469: Пускай будет прайс хендлер.

470: Сделаем копию.

471: Назовём её прайс хендлер сделаем.

472: Токен.

473: Назовём.

474: При.

475: Сет. 3.

476: По умолчанию.

477: Ну, пускай будет false.

478: И, и че, и че, и че? Вот прайс хендлер.

479: Естественно, нам нужно здесь делать, во фрии писать.

480: На самом деле все равно тут никогда ничего не выведется, не будем тоже писать.

481: Напишем.

482: Делать.

483: Здесь.

484: Выведем сюда.

485: Да.

486: Поняли, да? То есть я попытаюсь сейчас вывести переменную, которую я прочитаю с помощью вот этой функции. Прайс хендлер из чекбокса, который я запихну вот сюда.

487: Посмотрим, как это будет работать. Да, вот у нас появилась галочка.

488: Он.

489: И все.

490: Он где of?

491: Давайте посмотрим.

492: Set free вот ставим сюда поинт.

493: Оба.

494: Сработало.

495: Оба вроде тоже сработало.

496: Но.

497: Почему-то он все равно.

498: Давайте посмотрим.

499: Где там буква цвет Карен?

500: Не пойму.

501: Наиде карта.

502: А это я уже на таргет навёл, сейчас event.

503: Картаргет инпут.

504: Здесь таргетом тут раскрываем.

505: И у него есть. А вот, кстати, пример, да, поле чекет.

506: Не value, а чекет. Вот все как раз хороший пример получился. Поэтому мы в случае, когда читаем событие, полученное от чекбокса, мы читаем поле, чекет.

507: Вот. Ну, я думаю, что вы примерно также будете вспоминать. Каждый раз получили какую-то ерунду, полезли брейкпоинте, посмотрели, а где ж не ерунда то лежит. Нашли и использовали. Бывает так, что вы видите, например, там 3 поля, которые

508: Называется по разному. Почему там лежат одинаковые данные, идёте в справочник и просто пытаетесь понять, а че это за поля такие? И понимаете, почему конкретно сейчас там данные одинаковые, потому что раз их несколько полей с одинаковыми данными, значит, есть ситуации, когда они будут разны.

509: Те данные.

510: И возвращаемся, проверяем, заработает ли наш чекет.

511: Давайте сначала снимем галку.

512: Так, смотрим.

513: Ставим галку тру.

514: Снимаем галку, фелс работает.

515: Перь.

516: Смотрим сюда, где он?

517: Прям можно трекпоинт поставить сюда.

518: Оба false.

519: Нажимаем.

520: True но не видно почему.

521: Потому что когда вы что-то выводите в g6, то это что-то пытается превратиться в текст.

522: Когда вы вводите текст и он превращается в текст, вы его сразу видите, а когда вы вводите фелс, то превращение в текст, оно почему-то становится не особо видно.

523: Как это обычно делается, есть ну, нормальным людям не надо выводить true фелс, а если надо, то, как правило, в виде какого-то текста.

524: И мы этот сейчас текст напишем. Синтаксис обычно такой, это называется тернарное выражение.

525: Почему тернарная? Вы, наверное, как студенты недалеко от этого отошли? Есть.

526: Операторы унарные бинарные и тернарные.

527: Есть ещё слово кватернарные, это когда 4 чего-то, но таких операторов, по моему, ни в 1 языке нет.

528: Унарные операторы это типа

529: Вот таких это значит 1 оперант.

530: Оперант это вот 2 + 2 у оператора, 2, 2 операнда цифра слева цифра справа у унарного оператора.

531: 2 плюсика штука, которая рядом с которыми стоит 2 плюсика. 1 это переменная, которая итерируется там в плюс всегда на единичку. Поэтому это унарный оператор. Плюс это тернарный, равно это тернарный

532: Фу, блин, бинарный плюс это бинарный, вот это унарный.

533: 1 + 2. Это вот бинарный, а тернарный, это когда 3 вот оператор, вопросик, двоеточие, как бы 1 оператор, это не 2, и у него просто 3 аргумента. Вот этот вот этот и вот этот, как это работает?

534: Анализируем переменную. Если да, то 1. Если нет, то 2.

535: Смотрим, как это работает на практике.

536: Платно, бесплатно, платно, бесплатно.

537: Я вас не запутал, когда запутался сам в словах унарный, бинарный, тернарный, тернарный, 3, бинарный, 2 равно это бинарный, тернарный, только вот такой больше других нету.

538: Я 1 раз иногда ради прикола на собесе спрашиваю сколько тернарных операторов вы знаете?

539: И люди почему-то пугаются, и такие, не знаю ни 1. Хотя все вот этот знают, почему некоторые не знают программисты, что он называется тернарный, я даже не знаю, как его по другому назвать. Ну, плюсик.

540: Двоеточие. Вопросик, ну это такой тоже по-детски Садовский. Так, с чекбоксом, понятно, как работает то, что 23 минуты уже, мы уже, наверное, закругляться надо.

541: Интересно, старый плюс или новый 17:15 старые?

542: Как у вас дела тут ещё?

543: Странно мне тут тормозит.

544: Давайте так. Вам надо сделать фильтры с помощью стейка. Какие фильтры?

545: Смотрите, у нас есть чекбокс, есть ввод данных и есть, например, выпадающее меню. Это select option.

546: Сделайте столько фильтров, сколько сможете. Как минимум хорошо бы сделать input, потому что текстовый фильтрация по текстовому полю это самое простое. Вот я вам сделал по прямому

547: Совпадению, когда надо написать равно вот 2 равно или three равно атлас заметок, и только тогда оно находится. А вы можете сделать, если данные содержат это слово, то есть вот написать, начинать писать.

548: Атла и находите все приложения, содержащие слово отла, точнее, буквы отла в своём названии, и атлас заметок, и атлас отметок какой-нибудь.

549: Вот попробуйте так сделать. Попробуйте, если хватит сил с числовым полем, например.

550: Цена от до вот у вас есть 4 приложения ну там сколько хотите себе сделайте с помощью нейросети можете 100 сгенерить сделать у них цифровое поле, вбейте туда какие-нибудь цифры, там 1, 2, 3, 10 milion и

551: И сделайте фильтр спо это как бы чуть более сложно, потому что чуть чуть побольше попрограммировать надо.

552: Вот программа минимум, просто повторите чуть чуть получше, если вы сделаете выпадающее меню это tex селект.

553: И если попробуете с ценой.

554: Оформите, как вы хотите. Я просто сейчас вот чекбокс воткнул по хорошему рядом с чекбоксом. Надо ещё какое-нибудь слово написать, что этот чекбокс означает, да, бесплатное ли? Ну, что-то такое.

555: Вот и заодно попробу потренируйтесь, как верстать надпись рядом с инпутом и с чекбоксом.

556: Вот, про, ну, про цифру. Ладно, это уже программа максимум, вы не осилите.

557: Ну че, всем пока.

558: Я отключаюсь. Пишите в чат, если что.

559: До свидания.

560: Пожалуйста.