background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon
header logo icon

Скачать "25. Уроки React JS (метод массива - map) - react курсы бесплатно, 2019"

input logo icon
"videoThumbnail 25. Уроки React JS (метод массива - map) - react курсы бесплатно, 2019
Похожие ролики из нашего каталога
|

Похожие ролики из нашего каталога

Теги видео
|

Теги видео

javascript
уроки
с
js
react js
пример
практика
нуля
на практике
обучение
курс
программирование
2018
2019
на русском
reactjs
примеры
Субтитры
|

Субтитры

subtitles menu arrow
  • enАнглийский
Скачать
00:00:05
пойди гайде gun
00:00:08
а сутра
00:00:11
привет друзья меня зовут димыч вы на
00:00:13
канале эти камасутру точка ком это мой
00:00:16
авторский курс react путь собираются
00:00:19
сразу хочу сказать большое вам спасибо
00:00:21
ребят за ваши комментарии и за ваши
00:00:23
лайки и за вашу ваши добрые слова также
00:00:26
хочу сказать большое спасибо тем кто
00:00:27
немножко скрити к определенной и с
00:00:30
исправлениями пишет мне в комментариях
00:00:31
тоже большое спасибо ребят сразу скажу
00:00:34
что я не являюсь супер мега таким супер
00:00:36
мега самураем который каждый день пишет
00:00:38
на реакции какие-то приложения в курсе
00:00:40
всех обновлений нет я не справочник
00:00:43
ребят мне нравится мне вообще нравится
00:00:44
архитектура приложений я вообще full
00:00:46
stack разработчик и мне нравится
00:00:48
понимание общих принципов работы
00:00:50
приложение работы систем программного
00:00:54
обеспечения в от момент я всю свою
00:00:56
половину своего свободного времени
00:00:57
община нейронные сети трачу то есть я к
00:00:59
сожалению не могу да значит вообще
00:01:01
человек не мог знать все на свете
00:01:02
поэтому я могу будет ошибиться в ком-то
00:01:04
синтаксиса в каких то нюансов какую-то
00:01:06
забыть даже вам рассказать сегодня
00:01:08
важную современную штуку просто забудь
00:01:10
рассказать потому что даже я например
00:01:11
ровнее ну типа не в курсе да потому что
00:01:13
повторюсь я не пишу на там каждый день
00:01:15
но моя задача и цель этого урока дать
00:01:17
вам такое общее целостное понимание
00:01:19
архитектурное понимание того что
00:01:21
происходит я надеюсь у меня это
00:01:22
получится то что я очень очень сильно
00:01:24
стараюсь обьяснять
00:01:25
я очень очень сильно буду объяснять вам
00:01:27
концепции когда мы перейдем к редакцию
00:01:29
дата чего многие ждут те кто по
00:01:30
прошаренные для кого эти вот штучки
00:01:32
стоимость сделать такие простые семечки
00:01:34
поэтому пожалуйста если ты в теме и
00:01:36
хочешь мне продолжать поддерживать
00:01:37
смотришь данное видео обязательно в
00:01:39
среде и сайта не она
00:01:41
я со второго аккаунта вот смотрите
00:01:43
захожу другого к себе
00:01:45
подписываюсь ставлю ой ставлю
00:01:47
колокольчик и ставлю лайк вот так вот я
00:01:50
сама себе видите первый урок в 80 лайк
00:01:52
поставил юбилейный класс
00:01:54
сделать это самое чтобы не пропускать
00:01:56
новые обновления к тому же что я буду
00:01:57
делать я буду очень скоро очень скоро
00:01:59
буду бомбить
00:02:00
новый параллельные плейлист где там
00:02:03
бутики джедайские реактор ские штуки да
00:02:04
то есть чтобы не только на соцсети или
00:02:06
тренироваться еще в отдельные в
00:02:08
отдельных местах будем тоже с вами
00:02:09
изучать как раз таки новинки
00:02:11
подпишись короче не пожалеешь сто
00:02:13
процентов не пожалеешь также здесь в
00:02:17
описании к видео есть ссылочки telegram
00:02:19
instagram подписывайтесь на этих 2
00:02:21
особенно каналов в к скоро мы начнем с c
00:02:23
200
00:02:24
в инстаграме в телеграме я расскажу
00:02:25
всякие java скриптов и фишки чтобы
00:02:27
держать мозг в тонусе и понимать как
00:02:29
работает java script внутри при этом там
00:02:31
есть это без еще не ходил чтобы как бы
00:02:33
готовиться и по нативном java script и
00:02:35
так минимальных собес а если ты уже
00:02:36
работающий чувак ты просто чтобы держать
00:02:38
в тонусе своим знания по java script у
00:02:41
подписывайся на эти два канала
00:02:42
все друзья все сказал лишние что нужно
00:02:45
было сказать о теперь погнали к нашим к
00:02:47
нашим нашим к нашим штучками ручкам
00:02:48
нашему к нашей соцсети
00:02:51
смотрите о чем я вам хочу рассказать о
00:02:53
важные концепции да мы понимаем что у
00:02:55
нас вода диалоги какие то в данный сидят
00:02:59
месседжи сообщения сидят в объектах в
00:03:01
массиве и мы вот дальше эти массивы
00:03:03
манипулируем чтобы до чтобы чтобы
00:03:06
клепать наши вот эти вот теги
00:03:08
мы понимаем что вручную мы их клепать не
00:03:10
будем а как мы будем делать так вот
00:03:12
такая вот концептуальная это интересная
00:03:14
идея react ведет себя следующим образом
00:03:16
давайте это закомментируем
00:03:18
и это закомментируем в шторами это делаю
00:03:21
правыми control shift и
00:03:23
слэш . рядом над контролом и левее шифта
00:03:27
кнопочка три кнопки ра рядом короче
00:03:28
смотрите что исчезло до себя все исчезло
00:03:31
так вот важная концепция которую который
00:03:34
которая работает в реакции если мы
00:03:36
передадим массив объектов
00:03:40
массив каких-либо объектов например
00:03:42
строк ну давайте просто возьмем джесс xv
00:03:44
разметку не передадим а просто не
00:03:46
передадим просто в разметке фигурных
00:03:48
скобках потому что это как бы кусок java
00:03:50
скрипта массив это java скриптовая штуку
00:03:52
до если мы здесь напишем массив например
00:03:54
строк sdsd
00:03:56
2223 эти камасутра the compiler
00:04:03
возьмет и отобразит каждый элемент по
00:04:07
отдельности один за другим
00:04:08
то есть он увидит массив ну как бы
00:04:10
массив нельзя отобразить в виде html это
00:04:13
массив и он возьмет расскажет и вы
00:04:14
возьмете отобразит каждый элемент виде
00:04:16
виде строки если у нас массиве будет
00:04:20
сидеть если нас массиве будет сидеть
00:04:22
объект то он попробует объект уже
00:04:25
привести к строке и покажет обжиг объект
00:04:27
наверное не знаю а говорит что не может
00:04:31
объект быть потому что он не может
00:04:32
объект превратить вы как
00:04:34
бы вы в html элемент он говорит что
00:04:37
объект не валидный как child как ребенок
00:04:39
ряд или реактор ски не может быть ну
00:04:43
такие вот пироги а строки могут быть а
00:04:45
что еще может быть а я вам подскажу
00:04:47
еще вот что может быть еще в массиве
00:04:50
могу может сидеть
00:04:51
react элемент то есть это компонент
00:04:53
непосредственно react элемент говорю
00:04:55
компонент непосредственно джейс
00:04:57
x-компонент то есть добыть вы смотрите
00:05:00
один элемент мы помним что это как
00:05:03
будешь не ешь темы или ты на самом деле
00:05:05
java script и вот мы можем в массив и те
00:05:08
массив открыл и запихал в него массив
00:05:10
элементов
00:05:11
массив элементов давайте третий элемент
00:05:15
уже размещен то есть мы в gsx вставили
00:05:18
сейчас что массив g gsx массив компонент
00:05:21
ряд видит что это массив он его 1 куб
00:05:24
оживает видит что в каждом каждый
00:05:26
элемент массива это ну то что вы может
00:05:28
вставить и он вставляет вместо вот где
00:05:30
мы этот массив ставили трети все три
00:05:34
меня blink синий имена на голубом фоне
00:05:37
это конечно просто вырви глаз вырви глаз
00:05:39
ладно потом пофиксим так вот массив
00:05:42
элементов скажете зачем нам это надо а
00:05:45
нам это надо смотрите давайте возьмем
00:05:46
этот массив элементов и вынесем за
00:05:48
пределы вот этого джей секса вообще за
00:05:50
пределы retour на вывесим вот например
00:05:52
сюда диалог вот это нужда и log data а
00:05:55
мы создадим другую переменную назовем
00:05:57
дай vox dei а logs elements dialogs
00:06:01
элемент элемент и у сюда положим сторону
00:06:06
то есть у нас есть исходные как бы
00:06:08
исходный массив массив объектов мы
00:06:11
каким-то образом из этого массива
00:06:12
объектов получаем массив
00:06:14
gsx элементов массив конкретно
00:06:17
компонента отдельных взятых где каждой
00:06:20
компоненты соответствует как бы данные
00:06:22
из конкретного элемента отсюда это 1 0 1
00:06:26
2 3 и так далее и что и дальше мы тогда
00:06:29
релакс элемент так как эта переменная
00:06:31
которое ссылается на массив мы это
00:06:33
переменную просто вот сюда вот вставляем
00:06:36
в эти фигурные скобки вот так вот и все
00:06:41
этот джесси кс видит ну вот браузера
00:06:44
react видишь что ну компилятор да ну
00:06:47
воспринимаем все очень пока так
00:06:48
упрощенная схематично react видит что
00:06:50
здесь перемены в которой сидит массив в
00:06:54
этом массиве каждый момент является
00:06:56
валидным java script валидным завидной
00:06:58
компонентой и он берет и рисует по
00:07:01
очереди каждую компоненту здесь смотрите
00:07:03
ничего не поменялось ничего не
00:07:04
изменилось отсюда делаем вывод
00:07:08
нам нужно как-то оптимизировать создание
00:07:10
вот таких вот массивов массива gsx
00:07:12
элементов то есть у нас сервера будет
00:07:15
приходить данные обычные java script
00:07:17
объекты массивы и массивы объектов
00:07:19
объекты объекты массива бла бла бла и
00:07:21
всякое такое
00:07:22
а мы должны получать из этого каким-то
00:07:24
образом автоматическим массив элементов
00:07:27
наверняка многие из вас знают но а кто
00:07:29
не знает небольшой ликбез не большой
00:07:31
любви небольшой ребят не переживайте
00:07:33
не переживайте когда у нас есть у нас
00:07:36
такое вообще супер мега магическая
00:07:38
функция который называется который
00:07:40
называется map у любого массива мы можем
00:07:44
вызвать метод move map это метод массива
00:07:46
для того чтобы преобразовать массив
00:07:48
одних элементов в массив других
00:07:50
элементов например у нас есть массив
00:07:52
барашков а мы хотим получить массив
00:07:56
шерсти
00:07:57
клубков то есть на базе каждого барашка
00:08:00
мы получили клубок на базе этого барашка
00:08:03
этот клубок то есть у нас исходный
00:08:05
массив состоит из четырех барашков
00:08:06
результирующий массив новый массив
00:08:08
состоит из четырех клубков то есть мы
00:08:11
должны преобразовать массив одних
00:08:13
элементов в массив других элементов но
00:08:16
внимание каждый этот элемент в новом
00:08:17
массиве получается естественно как
00:08:19
проекция старого лютый старый элемент
00:08:21
вносит свой вклад в то как будет
00:08:23
выглядеть этот новый элемент
00:08:24
давайте на примерах более реалистичных
00:08:26
но здесь массив имен две-три андрея
00:08:28
виктор света саша саша девочка поэтому
00:08:31
женское имя и нам нужно получить массив
00:08:33
чисел где единичка это значит имя
00:08:35
мужское нолик имя женская то есть каждое
00:08:39
имя как бы проецируется на новый элемент
00:08:43
в массиве то есть или my star элемент в
00:08:45
массиве старом проецируется на новый
00:08:47
элемент в ново массиве но внимание новый
00:08:49
массив ну вот имеет такую же длину
00:08:51
естественно потому что каждый элемент
00:08:53
вносит совку
00:08:54
каждый новый элемент в новом массиве и
00:08:56
происходит такое преобразование или
00:08:59
например у нас есть массив имен
00:09:00
а мы хотим получить массив тоже строк но
00:09:04
каждое имя обернута какой-то вот тегом
00:09:07
ли например чтобы потом вставить это все
00:09:08
вёл да это тоже преобразование опять же
00:09:11
каждое имя
00:09:12
транслируется в новую строку то есть
00:09:14
одна строка транслируется в другую
00:09:16
строку или у нас есть строки например
00:09:18
бабло low хай
00:09:20
каждое слово транслируется в массив
00:09:23
новым точнее каждое слово транслируется
00:09:25
превращается в конвертируется напиться
00:09:28
напиться на новый объект вот то есть
00:09:32
берется слова бла бла и ставляется как
00:09:34
свойств объекта and основа объекта ru
00:09:36
берется русская версия бла бла
00:09:38
здесь халлоу превращается and hell оу оу
00:09:41
привет high-end круто есть мы и строк
00:09:44
обычных массив из трех строк получили
00:09:46
массив из трех объектов где каждый
00:09:48
объект получен на основе соответствующей
00:09:50
строки из исходного массива дайте
00:09:53
посмотрим как это пишется java скрипте
00:09:55
если нам надо получить из массива
00:09:58
имен массив чисел мы делаем такую
00:10:01
функцию мы говорим лет нью-рено вы ярый
00:10:04
ты будешь равен старому рею
00:10:06
который получается с помощью маппинга ты
00:10:10
мышь равен старому лири и точнее старым
00:10:12
уровень простят имидж равен результату
00:10:14
маппинга старого ярая map функция
00:10:16
возвращает новый массив как map работает
00:10:19
map принимает себя стрелочные функцию да
00:10:21
когда вас просят что принимает функция
00:10:22
map там for each и так далее радиус вы
00:10:25
скажете стрелочные функцию то есть мак
00:10:27
не принимает элемент мо принимая
00:10:29
стрелочным функцию вот стрелочная
00:10:30
функция начинается а вот тут она
00:10:32
заканчивается то есть единственным
00:10:35
параметром а появляется стрелочная
00:10:37
функция это стрелочная функция
00:10:39
воспринимаете как процессор она и она и
00:10:41
преобразуют в это срочная функция
00:10:43
вызывается столько раз сколько у нас
00:10:44
элемента в исходном массиве и каждый раз
00:10:47
в эту стрелочным функцию вот в этот
00:10:49
параметр элемент будет придет dmitry
00:10:52
потом андрей и потом виктора сюда будет
00:10:54
приходить старые элементы чтобы мы с
00:10:56
ними что-то сделали и вернули и
00:10:58
вернулись этой стрелочные функции
00:11:00
какой-то новый элемент и этот новые
00:11:02
элементы станет соответствующим новым
00:11:04
элементом нового массива это скрывающий
00:11:05
штука мне
00:11:06
ладно смотрите вот мы например вызываем
00:11:10
эту функцию стрелочным понимаю вы самые
00:11:12
вызывать будет сама сам об во время
00:11:14
преобразования мы вызываем об у старого
00:11:16
объекта и то есть алтарей и этот мат
00:11:20
вызовет эту стрелочным функцию столько
00:11:22
раз сколько элемента в массиве элемент
00:11:24
мы проверим внутри это уже стрелочная
00:11:27
функцией если элемент элементом является
00:11:30
строка имя является исмаил name как это
00:11:32
функция выдуманное типа мужское имя
00:11:34
если да тогда вернем 1 а если нет тогда
00:11:37
вернем ноль соответственно в новом оси
00:11:39
попадет либо яичко либо ноль все будет
00:11:42
хорошо работать естественно для
00:11:44
небольшой рефакторинг таких случаев это
00:11:46
уже читаете самостоятельно в таких
00:11:48
случаях когда мы если
00:11:49
что если правда или ложь мы возвращаем
00:11:51
одно иначе возвращаем другое заменяется
00:11:53
в жизни сценарным выражением то есть
00:11:55
такой строкой если
00:11:57
исмаил на янтру то есть если ты the true
00:11:59
выражение то мы вернем один в противном
00:12:01
случае вернем 0 протеин арно и выражение
00:12:03
ребята это уже базовых java script озавы
00:12:05
при база вы пожалуйста читайте
00:12:06
самостоятельно обязательно если вы не
00:12:08
знаете этого прочтите несколько примеров
00:12:10
потому что иначе вам будет сложно зачем
00:12:12
будет сложно так дальше еще можно это
00:12:16
зари факторы следующим образом если наша
00:12:18
стрелочная функция ничего не делает
00:12:21
другого кроме того что просто возвращает
00:12:22
что-либо что либо возвращает retour не
00:12:24
что-либо то есть нет никакого кода нет
00:12:28
никакого кода перед этим retour нам то
00:12:29
тогда то тогда мы можем заменить это 1
00:12:32
строку мы можем убрать эти фигурные
00:12:34
скобки и убрать слово return и будем
00:12:37
иметь нашу в стрелочку функцию в таком
00:12:39
виде то есть буквально приходит элемент
00:12:42
сюда на входе если этот элемент
00:12:45
имя мужское имя то возвращаем 1 а иначе
00:12:49
возвращаем 0 то есть слово return
00:12:50
опустили и фигурные скобки опустили
00:12:52
получается такая коротенькая запись еще
00:12:54
можем пойти дальше и еще зари factory
00:12:56
желательно элемент чтобы был не просто
00:12:58
слово элемент а чтобы этот элемент да
00:13:00
как название переменных отражала суть
00:13:02
того что здесь сидит например они
00:13:04
лотерей не классное название классное
00:13:06
название было бы там ней мтс имена
00:13:09
например данный мтс
00:13:10
а это элемент чтобы назывался а во
00:13:12
первых скобки можем убрать да когда у
00:13:14
нас только один аргумент функцию
00:13:16
приходит
00:13:17
во-вторых дней до переименовываем нашу
00:13:20
переменную элемент переменную ней должно
00:13:23
быть понятно с чем работаем с чем
00:13:25
работаем ну это уже такой джедайский
00:13:27
уровень как бы не каждый ну это это с практикой
00:13:31
да правильно и правильное наименование
00:13:32
переменных раз практикой при этом опять
00:13:34
для тебя это правильно для него это
00:13:36
неправильно то есть сколько людей
00:13:37
столько мнений хотя базовые вещи конечно
00:13:39
же есть принципы ну об этом я буду
00:13:41
помаленьку потихоньку вам в курсе данном
00:13:43
тоже упоминать говорить или например нам
00:13:47
нужно из массива имен получить массив
00:13:48
вот такие вот leshik это делается так к
00:13:52
нам приходит и имя в эту функцию а мы
00:13:55
возвращаем лишь к + name плюс лишь к
00:13:58
закрывающая то есть конкатенация строк
00:14:00
сложение строк и мы получаем новую
00:14:02
строку
00:14:03
то есть ни одна помню стрелочная функция
00:14:06
вот это вот она вызовется столько раз
00:14:08
сколько элементов здесь каждый раз в
00:14:10
качестве найма придет сначала это потом
00:14:12
это потом эта потом это потом это и и и
00:14:17
и мы вот это вот имя подставим в
00:14:19
серединам вот сюда вот и вернем
00:14:20
обязательно retour ним retour а не
00:14:22
забывайте иначе у вас получится массив
00:14:24
элементов в со значениями undefined
00:14:26
не то что вам нужно естественно это
00:14:28
также return возможно заменить в одну
00:14:30
строчку а также можно заменить кавычки в
00:14:33
лес конкатенацию строк на современный
00:14:35
синтаксис шаблонной строки
00:14:38
то есть мы пишем одной строкой не делаем
00:14:40
это приплюсовывая
00:14:42
а вот это вот переменной a name параметр
00:14:44
name как кусок java скрипта мы тоже по
00:14:46
налоги как джессика встраиваем фигурными
00:14:48
скобками но еще и ставим знак доллара
00:14:49
так работает шаблонные строки пожалуйста
00:14:52
тоже вопрос от изучите это нужно
00:14:54
использовать сегодня обязательно и
00:14:56
погнали в одну строку это переписывать
00:14:58
так как наша стрелочная функция только
00:15:00
делает что возвращает какое-то значение
00:15:02
больше ничего перед этим не делает мы
00:15:04
можем заменить это вот такой вот одной
00:15:06
строкой еще один пример у нас есть
00:15:10
строки а мы должны получить вернуть из
00:15:13
нашей функции вот вернуть ри турнуть
00:15:16
объект фигурные скобки данные уже
00:15:18
означает что мы создаем объект мы
00:15:20
получатель н.г.
00:15:22
мы засовываем л элемент который здесь
00:15:24
был в качестве ru
00:15:26
мы говорим translite энтуру вызываем
00:15:28
какую-то выдуманную функцию которая
00:15:30
передо английское слово он нам возвращает
00:15:32
русское соответственно мы получаем на
00:15:34
выходе массив элементов массив объектов массив
00:15:39
объектов у которых два свойства and earn
00:15:44
massive объектов но чаще
00:15:46
dax и говоря вот в одну строку да мы
00:15:48
хотим в одну строку это все записать и
00:15:50
вы как бы делали бы по аналогии вот мы
00:15:52
да мы хотим часу дали слово return
00:15:53
удалите такие фигурные скобки здесь нас
00:15:56
ждет небольшое как бы разочарование в
00:15:58
том смысле что как бы мы хотим чтобы эти
00:16:01
фигурные скобки означали создании
00:16:02
объекта ведь напомню мы возвращаем новый
00:16:04
объект
00:16:05
но как бы браузер не понимает этого и он
00:16:08
воспринимать фигурные скобки как будто
00:16:10
изнутри тела функции что здесь будут
00:16:12
тело функция здесь начинается какой-то
00:16:14
дидье : бла бла бла кароче но не
00:16:16
понимает ерунда поэтому нужно взять и
00:16:18
обернуть с кабачками
00:16:20
я их красными память он украсть очень
00:16:22
хорошо данном случае красная за очень
00:16:23
хорошо
00:16:24
скобочки скобочки а потом фигурный
00:16:26
объект который мы получаем на базе вот
00:16:28
этого элемента входящего дальше опять же
00:16:32
элемент не крутое название 11 word слова
00:16:35
до или фрэйзер
00:16:36
фри fries точнее фраза если тут будет
00:16:38
предложение фраза какая-то может быть
00:16:40
как бы я предполагаю что dice слова
00:16:42
поэтому написал word ну и чаще всего
00:16:45
чаще всего вы что будете в нашей жизни
00:16:47
да какая задача у нас стоит у нас есть
00:16:49
массив объектов
00:16:50
массив объектов исходные данные массив а
00:16:53
нам нужно получить массив gsx элементов
00:16:55
вот такой массив gsx элементов для этого
00:16:58
мы с этими штуками мешает смотрите
00:17:00
лайфхак небольшой inspect элемент
00:17:03
inspect элемент беру эту гифку вот эта
00:17:06
девка и дэвид все на больше нам не
00:17:09
мешает of a эти и больше нет message
00:17:14
message message
00:17:16
то есть я говорю что у меня элемент
00:17:19
приходит какой-то элемент
00:17:21
туда название уже сложнее дать этому
00:17:24
этому объекту поэтому элемент в принципе
00:17:26
может сойти за правду элемент я
00:17:30
возвращаю
00:17:31
кабачки круглый тоже ставлю хотя можно
00:17:33
было бы здесь и не ставить и возвращаем
00:17:35
какой-то джей секс элемент где в пропсы
00:17:38
я перебив передаю в качестве nk значения
00:17:41
у элементы беру свойства nk тут фигурные
00:17:43
скобки обязательно потому что мы уже
00:17:45
находимся внутри джей секса внутри тега
00:17:48
значит нужно фигурной скобки если мы
00:17:50
хотим достучаться к переменам в качестве
00:17:52
ru я пишу точка ру то есть в этого
00:17:54
объекта беру у этого у этого по очереди
00:17:56
да я напомню эта функция вызывается
00:17:58
столько раз сколько у нас элемента в
00:18:00
исходном массиве и каждый раз эта
00:18:02
функция возвращает новый элемент который
00:18:04
попадает по итогу в новый массив таким
00:18:07
образом мы матем маги массив одних
00:18:10
объектов на массе других объектов
00:18:11
mapping значит как бы соотносим
00:18:13
преобразуем ну как то так все короткий
00:18:19
любви закончен давайте теперь зари
00:18:20
фактором наш code refactoring наш код
00:18:22
чтобы все было чики-пуки то есть нам
00:18:26
нужно из массива этих элемент этих
00:18:28
элементов получить массив у таких
00:18:29
диалогов я говорю дай лакс до дейта дай
00:18:34
лакс дейта . map внутри мапо внутри мапо
00:18:41
я передаю стрелочные функцию это
00:18:46
стрелочная функция вызывается столько
00:18:47
раз сколько у меня элемента в исходном
00:18:49
массиве и каждый раз функция map засунет
00:18:52
в эту функцию конкретный элемент из
00:18:54
исходного массива назову его дойла когда
00:18:57
на природе
00:18:58
allok диалог объект когда параметр один
00:19:02
я могу убрать круглые скобки и дальше
00:19:05
что я сделаю дальше я должен здесь витая
00:19:08
в этой функции вернуть gsx элемент вот
00:19:11
этой лоттой лак так как он здесь
00:19:14
единственная retour не пишу я фигурные
00:19:16
скобки не пишу и даже круглые скобки не
00:19:17
пишу сейчас я перенесу на другую строку
00:19:21
map соответствовать мы из массива
00:19:24
объектов получаем массив элементов но
00:19:28
здесь я уже не пишу 0 0
00:19:30
эта функция вызовется стрелочной функций
00:19:33
вызовется для каждого элемента каждый
00:19:34
элемент будет сидеть вот в переменной
00:19:37
дай лак я просто говорю дай лак мне
00:19:40
нужен твой name то есть
00:19:43
и одежды мотоцикл а здесь мне нужен твой
00:19:46
проедешь ник твои виктор смотришь это
00:19:50
видео заценил нора шутку про сапоги
00:19:53
мотоцикл и все кто старпёры заценили ли
00:19:56
это шутка наверное шутка но кругу
00:19:59
воспоминания о термин все не подскажу
00:20:01
ваком напишите в комментариях и знаете
00:20:04
откуда эта фраза ну примерно так звучит
00:20:05
все в итоге я эту эту штуку удаляю по
00:20:08
сути я сделал тоже самое так смотрите у
00:20:10
меня здесь шесть объектов я у такой
00:20:12
записью как бы и создал новый массив
00:20:15
которым сидит все шесть объектов и
00:20:16
следить будет 100 сидеть-то вот эти две
00:20:18
строчки создадут массив элементов и 100
00:20:20
и 100 из сотни эти вот объектов я получу
00:20:25
массив с сотню
00:20:27
gsx элементов сотню компонентой лак ой
00:20:30
там круто да если ребят с матами у вас
00:20:34
тяжело гуглите какие-нибудь он в онлайне
00:20:37
там задачки информацию об этом
00:20:39
обязательно публике почитайте потому что
00:20:41
тема тема тема тема очень важна для
00:20:43
понимания ребята очень важно дальше
00:20:45
массив месседжей я с ними делают то же
00:20:48
самое я говорю объявляю нет массе джесс
00:20:53
элемент и говорю я хочу получить эти
00:20:57
элементы из массажист дейта я хочу
00:21:00
месседжей тазом apeach на новый массив
00:21:03
старый мистер
00:21:05
придет сюда я возьму на его основе и
00:21:08
создам gsx элемент мне придет сюда
00:21:14
массаж объект message
00:21:17
я вот в объект a message возьму я от в
00:21:20
объектами серж возьму возьму возьму
00:21:24
возьму
00:21:25
месседж у так вот ой прости
00:21:30
который пришел сюда и у него возьму
00:21:32
message свойство в данном случае мастер
00:21:33
это этот объект целиком и у него есть
00:21:36
свойство массаж массаж очень часто
00:21:40
кстати говоря в таких штуках в качестве
00:21:42
это вот значение пишут сокращение ки
00:21:44
нибудь д диалог раз по диалогам бежим
00:21:47
понятно что да это диалог и мне так на
00:21:50
самом деле нравится делать я так люблю
00:21:51
делать я так сделаю в данным в данный
00:21:54
момент также я переименую смеси g data в
00:21:57
просто в месяц
00:21:58
shift и в 6 общительна жать то он и name
00:22:02
о-о carens из всех вхождению сам найдет
00:22:05
и переименует видите этот меня она тут с
00:22:07
не заменяется тут снизу меняется видите
00:22:10
месседжи
00:22:11
то есть массивы я люблю называть
00:22:12
множественным числом просто это уже
00:22:14
автоматически говорит о том что это
00:22:15
массив shift и в 6 о
00:22:19
а carens с ой shift of 6
00:22:24
дай лакс вот так вот все все все все в
00:22:32
одну строчку делаем зари фактором и
00:22:34
давайте все данные вынесем вот в одну
00:22:36
кучку в одну кучку сверху будет данные
00:22:39
откуда они взялись эти данные да мы об
00:22:40
этом еще поговорим мы говорили с вами в
00:22:42
прошлом уроке про ю а м л л но об этом
00:22:44
чуть позже мы еще поговорим много данных
00:22:47
поговорим и об архитектуре то есть у нас
00:22:48
есть дать отдельно данные
00:22:50
они например взялись откуда сервера до
00:22:52
взялись из космоса сервера а эти данные
00:22:55
и мы берем на основе этих данных
00:22:56
получаем получаем внутри нашей
00:22:59
компоненты внутри нашей компоненты
00:23:01
получаем gsx элементы и их отрисовывать
00:23:05
занимаемся отрисовкой все в итоге наш
00:23:07
код сократился в итоге наш код
00:23:12
сократился здесь мы дай лакс
00:23:15
отрисовываем а здесь адресован ситжес
00:23:17
месяц элемент мы с
00:23:19
элемент все смотрите как грациозно и
00:23:23
красиво у нас дай лакс есть объекты мы
00:23:26
на базе объекта получили gsx элемент да
00:23:29
и заполнили заполнили его пропсы видите
00:23:31
что мы сделали мы получили например у
00:23:34
нас 65 месседжей мы получили 5g sxt гав
00:23:37
message 5 компонент mesh
00:23:39
адресованных и внутрь каждая каждого
00:23:42
месседжа через про пса мы передали
00:23:44
конкретный мистер который попадает в
00:23:46
букву м сначала это хай
00:23:48
потом это потом это потом это потом это
00:23:51
при этом при этом далее так давайте
00:23:53
посмотри в message
00:23:54
напомню мы берем в пробках берем этот
00:23:57
массаж из прописав достаем и радуемся
00:24:01
что все хорошо и радуемся что все хорошо
00:24:05
так вот друзья мои
00:24:07
проверяем что все работает все
00:24:10
отображается все на месте то есть никуда
00:24:14
ничего не делать маленькая-маленькая
00:24:18
маленькой микро улучшение которые мне
00:24:20
просто подбешивает ей до контура зажимаю
00:24:22
иду сюда и говорю что миссис миссис мадж
00:24:26
говорю color white и диалоги диалог
00:24:31
айтем сайта мтс
00:24:33
color white потому что меня давай
00:24:37
обновить пожалуйста обновите будь
00:24:40
красивым не хочет быть красивым почему
00:24:44
покой причине ты не хочешь быть белым и
00:24:47
красивым может по той причине что я
00:24:50
вынес диалог диалог вынес в отдельную
00:24:54
компоненту для этой отдельные компоненты
00:24:56
я наверное взял и создал
00:24:58
а не тот же дай labs модулей adax ой
00:25:03
стойте-стойте дойла
00:25:05
ой там ада и лакает или даже не вы не
00:25:08
заводили файл ребята представляете какой
00:25:10
а вот диалог диалог вот что мин до
00:25:13
украсить было такого класса у меня даже
00:25:16
нет здесь что-то я до конца не докрутил
00:25:18
до вертел ну ладно эта тема уже
00:25:20
следующие таю айной доработки хотя прямо
00:25:23
в этом занятии мы что сами доделан с
00:25:24
постами такую же историю с поставить
00:25:27
такую же историю нас есть посты
00:25:29
внутри компонентами пост компонента
00:25:32
которая отвечает за вот эти вот пастырь
00:25:35
их две штуки у нас мы с вами мы с вами
00:25:40
такая же такая же история этих постов
00:25:43
может быть много и мы говорим у меня
00:25:44
есть post post data и сейчас изменю на
00:25:47
пост
00:25:48
я говорю умрет пост элемент равно пост
00:25:56
мапп непосредственно п пост сюда
00:26:01
приходит объект я на его основе создаю
00:26:03
вот такой вот же секс так
00:26:07
такой вот
00:26:09
это отрисовку компоненты делаю беру
00:26:13
сейчас равно перенесу сюда беру вместо
00:26:17
пост поставлю то есть приходит сюда
00:26:20
конкретный пост я у него беру мастер
00:26:22
приходит что конкретный пост я у него
00:26:24
беру likes каунт все и дальше дальше это
00:26:27
массив до map всегда вызывается у
00:26:30
массива массива и возвращает другой
00:26:32
массив которые присваивают другой
00:26:34
переменной я буду другую переменную
00:26:36
просто вставляю сюда
00:26:38
но они просто текстом я ставлю текстом
00:26:40
то это не воспримете как переменный
00:26:42
воспримется как текст по стс элемент
00:26:43
смотрите просто пост элемент ну так эта
00:26:47
переменная оставлю в горные скобочки
00:26:50
и все то же самое что и было понимаете
00:26:54
какая мощь теперь смотрите представьте
00:26:56
что вода идеи к что к нам сервера пришло
00:26:59
вот столько сообщений
00:27:02
вот столько сообщение бла бла да да и ,
00:27:13
доставить это же массив и в массиве
00:27:17
каждый элемент элемент является объектом
00:27:19
разделяется запятой и мы увидимся с 4
00:27:22
сообщения 4 представляете сервера придет
00:27:25
100 сообщений и наш этот код
00:27:27
автоматически адаптирован под то чтобы
00:27:28
адресовать 100 сообщений
00:27:30
поливайте сейчас какая мощь становится
00:27:33
оранж смотритесь с control z меню раньше
00:27:35
что было раньше мы здесь прямо как бы
00:27:38
рисовали пост пост 1 1 тогда не было
00:27:41
цикла никакого этот маг он как цикл
00:27:43
он как цикл преобразовал наш исходный
00:27:48
массив данных в массив элементов и мы
00:27:50
теперь дальше просто geely секс у
00:27:52
водоема говорим от рисуй и он
00:27:54
отрисовывает вопрос остался данных как
00:27:56
быть данными где им жить и как насколько
00:27:59
они как бы уместно здесь так далее но
00:28:01
это мы поговорим уже в следующем выпуске
00:28:03
все ребят думаю вам было полезно понятно
00:28:06
следующий следующей части мы с вами что
00:28:09
сделаем и с вами во первых
00:28:12
разум немножко дает джесс x вынесен в
00:28:15
отдельную компоненту да я вообще
00:28:17
сторонник того что в одном файле лежит
00:28:20
одна компонента и . другого не может
00:28:23
быть может быть но мы так не будем
00:28:25
делать будем приучаться к такой
00:28:26
дисциплине небольшой и разделять
00:28:28
отдельный файл отдельная компонента и
00:28:31
дальше дальше дальше продолжим то есть
00:28:34
мы знаем что с вами достаточно
00:28:35
достаточно важную теорию уже до обладает
00:28:38
достаточно важным знанием чтобы
00:28:39
потихоньку помаленьку переходить
00:28:41
концепции архитектурной архитектурной
00:28:44
концепции пониманию
00:28:45
редакция для чего он что он и как но
00:28:49
ребят сразу предупреждаем и не зайдем
00:28:51
немножко издалека немножко издалека то
00:28:53
есть я хочу не просто чтобы вы за мной
00:28:54
повторили чтобы вы поняли те самые
00:28:56
важные концепции от которых я вам буду
00:28:58
говорить я надеюсь вам это зайдет все
00:29:00
друзья если вы знаете map и или раньше
00:29:03
они же не знали
00:29:04
обязательно получить а если знаете
00:29:07
ставки лайк а если не знаете пойдете
00:29:09
учить все равно ставьте лайк все друзья
00:29:11
спасибо большое еще раз вам за поддержку
00:29:13
комменты реально ваши такие позитивные и
00:29:15
нереально заряжают я прям даже жене
00:29:16
показывают там тепло смотри как пишут
00:29:19
классные дне так приятные серьезным
00:29:21
приятно ну и там представьте что же
00:29:22
человеком там я про комментарии там
00:29:24
право про подписчиков и конечно я гонюсь
00:29:27
за подписчиками конечно я гонюсь за
00:29:29
хорошими словами то что подписчики
00:29:31
хорошие слова это сигнал того что я
00:29:33
полезен и я востребованы я нужен вам я
00:29:36
сделаю что-то такое глобальное
00:29:37
масштабное полезное поэтому друзья
00:29:39
спасибо спасибо спасибо всем до новых
00:29:41
встреч
00:29:46
при отредак сд и знать будешь круто
00:29:51
adiga найти gun
00:29:54
массу гра

Описание:

🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT —INCUBATOR: Front-end https://it-incubator.io/front-end Back-end https://it-incubator.io/back-end Поддержать меня можно на patreon https://www.patreon.com/itkamasutra или оформив спонсорство на данном канале. Помогайте друг другу вот здесь: https://t.me/reactjs_samurai Уроки по React JS: https://www.youtube.com/playlist?list=PLcvhF2Wqh7DNVy1OCUpG3i5lyxyBWhGZ8 В данном выпуске уроков по React я расскажу вам про метод массива map. В React он используется сплошь и рядом. Нужно хорошо понимать данный метод!!! Для тренировки мы применим этот метод к нашим данным! Летим ;) * Сайты: https://it-kamasutra.com/ https://it-incubator.io/ https://samuraijs.com * Мы в соц. сетях: https://vk.com/itkamasutra https://www.facebook.com/unsupportedbrowser https://telegram.me/itkamasutra * Мои личные VK и Insta: https://vk.com/d.kuzyuberdin https://www.facebook.com/unsupportedbrowser

Готовим варианты загрузки

popular icon
Популярные
hd icon
HD видео
audio icon
Только звук
total icon
Все форматы
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

mobile menu iconКак можно скачать видео "25. Уроки React JS (метод массива - map) - react курсы бесплатно, 2019"?mobile menu icon

  • Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.

  • Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.

  • UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

mobile menu iconКакой формат видео "25. Уроки React JS (метод массива - map) - react курсы бесплатно, 2019" выбрать?mobile menu icon

  • Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

mobile menu iconПочему компьютер зависает при загрузке видео "25. Уроки React JS (метод массива - map) - react курсы бесплатно, 2019"?mobile menu icon

  • Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

mobile menu iconКак скачать видео "25. Уроки React JS (метод массива - map) - react курсы бесплатно, 2019" на телефон?mobile menu icon

  • Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

mobile menu iconКак скачать аудиодорожку (музыку) в MP3 "25. Уроки React JS (метод массива - map) - react курсы бесплатно, 2019"?mobile menu icon

  • Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

mobile menu iconКак сохранить кадр из видео "25. Уроки React JS (метод массива - map) - react курсы бесплатно, 2019"?mobile menu icon

  • Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

mobile menu iconСколько это всё стоит?mobile menu icon

  • Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.