Boring Front End
Boring Front End
  • 50
  • 205 383
Как подключить google maps в React приложение? 2022
В очередном видео я расскажу как интегрировать гугл карты в реакт приложение
- Как интегрировать карты гугл в реакт приложение?
- Как интегрировать google place api?
- Как использовать геолокацию?
- Настройка регистрация в google maps
- Подключение Maps Js APi && Places API && geocoding API
- Создание ключа
- Генерация проекта используя CRA create-react-app.dev/
- Создание базовой структуры проекта
- Добавление карты
- Настройка внешнего вида контейнера с картой
- Настройка поведения не зумить при скролле, убрать контролы и т.д.
- Настройка темы карты snazzymaps.com/
- Добавление автокомлита use-places-autocomplet
- Добавление react-cool-onclickoutside
- getGeolocation преобразование описания локации в координаты
- Добавление маркера
- Настройка маркера с расположением пользователя
- Кастомизация маркера
- Отрисовка маркеров при клике
- Удаление маркеров с карты
- Браузерна геолокация
00:00:00 Вступление/настройка зависимостей
00:10:05 Добавление компонента карты
00:27:00 Настройка темы для google maps
00:30:35 Добавление autocomplete
00:50:00 Добавление настройка маркера текущего положения
01:16:00 Использование браузерной геолокации
Группа в fun_front_end
Канал в ТГ t.me/boringfe
Patreon: www.patreon.com/boringfrontend
#boringfrontend
#funfrontend
#обучениереакт
#обучениефронтенд
Переглядів: 21 624

Відео

Как готовиться к собеседованию на front end разработчика?
Переглядів 1,2 тис.2 роки тому
В этом видео я поделюсь с вами простыми шагами, которыми пользую при подготовке к собеседованию в разные компании #boring-front-end #funfrontend.com #IT
Cookie VS Token Authentication
Переглядів 5 тис.2 роки тому
В этом видео коротко разберем аутентификацию при помощи сессий и токенов. Что это такое и чем эти способы отличаются. Почему сессия не масштабируется, для чего создан JWT Онлайн живой курс основы FE разработки: www.funfrontend.com/courses/front-end-basics Канал в TG: t.me/boringfe Если вам нравится что мы делаем поддержите нас на патреоне www.patreon.com/boringfrontend #аутентификация, #boring-...
Что такое API?
Переглядів 1 тис.3 роки тому
Всем привет, в этом видео разберемся что такое application programming interface и как его использовать, так же поговорим что такое REST API Курс разработки с нуля funfrontend.com/ Статья на тему REST restfulapi.net/ Подключайтесь к каналу в ТГ t.me/boringfe #API, #RESTAPI, #boring-front-end, #funfrontend
Что такое DNS?
Переглядів 5323 роки тому
Всем привет, в этом видео разберемся что такое domain name system и почему это фундаментальная служба для всего глобального интернета Чем занимаетс ICANN www.icann.org/resources/pages/what-2012-02-25-ru Подключайтесь к каналу в ТГ t.me/boringfe #DNS, #boring-front-end, #funfrontend
Giphy App на React Js
Переглядів 7423 роки тому
В этом видео я покажу вам как используя React и открытое API giphy создать приложение по поиску гифок 00:00:00 Обзор приложения 00:01:53 установка зависимостей 00:06:10 Роутинг 00:27:35 Регистрация на giphy 00:30:00 Создание базовых страниц и получение данных с апи 00:49:08 Сетка react-masonry-css 02:03:20 Деплой на githubpages 02:19:07 Copy to clipboard Результат github.com/boring-fe/giphy-you...
Что такое тестирование?
Переглядів 1,1 тис.3 роки тому
Что тако разработка ПО? Зачем писать тесты? Чем e2e отличается от integration и unit? ✅ Подписывайтесь на Telegram канал: t.me/boringfe​ #javascript #E2e #QA #software testing
Хостинг за 5 минут на GithubPages (для начинающих)
Переглядів 4093 роки тому
Как развернуть статический сайт в интернете за 5 минут на GithubPages БЕСПЛАТНО! В этом видео мы на практике разберемся как разместить ваш сайт на сервисе github pages. 👉🏻 Хостинг или где живут сайты в 2021 (для начинающих) - ua-cam.com/video/iOvQOlbViqQ/v-deo.html ✅ Подписывайтесь на Telegram канал: t.me/boringfe​ #урокпрограммирования​ #ITкурсы​ #javascript
React JS: ПРИЛОЖЕНИЕ "Генератор паролей"(часть 4) деплой
Переглядів 2723 роки тому
Разместим приложение созданное при помощи create-react-app на сервисе GH-page
Хостинг или где живут сайты в 2021 (для начинающих)
Переглядів 3513 роки тому
В этом видео я подробно рассказываю о хостинге и о том, где живут сайты, что такое VPS и чем отличается выделенный сервер от виртуального. ✅ Подписывайтесь на Telegram канал: t.me/boringfe #урокпрограммирования #ITкурсы #javascript
Что такое: GITHUB vs BITBUCKET vs GITLAB
Переглядів 12 тис.3 роки тому
В этом видео говорим о GITHUB, BITBUCKET, GITLAB. Что это такое? Как работают? Чем эти сервисы отличаются? 👉🏻 Что такое СИСТЕМА КОНТРОЛЯ ВЕРСИЙ? SVN или GIT? - ua-cam.com/video/YRieW3mhh1s/v-deo.html ✅ Подписывайтесь на Telegram канал: t.me/boringfe #урокпрограммирования #ITкурсы #javascript
Что такое СИСТЕМА КОНТРОЛЯ ВЕРСИЙ? SVN или GIT?
Переглядів 8 тис.3 роки тому
В данном видео разберем: - что такое система контроля версий; - распределенные и централизованные системы контроля версий; - зачем нужно использовать систему контроля версий в индивидуальной и в командной разработке; - что выбрать SVN или GIT ✅ Подписывайтесь на Telegram канал: t.me/boringfe #урокпрограммирования #ITкурсы #javascript
React JS: ПРИЛОЖЕНИЕ "Генератор паролей" (часть 3)
Переглядів 2823 роки тому
ЧАСТЬ 3 В этом видео мы продолжим создание приложения с нуля на React JS - ГЕНЕРАТОР ПАРОЛЕЙ. С помощью данного видео мы создадим кнопку, которая поможет нам скопировать результат в буфер обмена. Для копирования в буфер обмена я буду использовать библиотеку react copy to clipboard, это одна из самых популярных библиотек с решением данного функционала. 1️⃣ ЧАСТЬ видео по ссылке 👉🏻 ua-cam.com/vid...
React JS: ПРИЛОЖЕНИЕ "Генератор паролей" (часть 2)
Переглядів 3993 роки тому
ЧАСТЬ 2 В этом видео мы рассмотрим создание приложение с нуля на React JS - ГЕНЕРАТОР ПАРОЛЕЙ. С помощью данного приложения пользователь может по заданным параметрам создать себе необходимый пароль. Структуру проекта генерируем с помощью create react app, если необходимо отдельное видео по данному инструменту - оставьте в комментариях. 1️⃣ ЧАСТЬ видео по ссылке 👉🏻 ua-cam.com/video/KcGxOtS0eZ8/v...
React JS: ПРИЛОЖЕНИЕ "Генератор паролей" (часть 1)
Переглядів 9073 роки тому
В этом видео мы рассмотрим создание приложения с нуля на React JS - ГЕНЕРАТОР ПАРОЛЕЙ. С помощью данного приложения пользователь может по заданным параметрам создать себе необходимый пароль. Структуру проекта генерируем с помощью create react app, если необходимо отдельное видео по данному инструменту - оставьте в комментариях. 2️⃣ ЧАСТЬ видео по ссылке 👉🏻 ua-cam.com/video/jP6PGO0MWbk/v-deo.htm...
CSS: что такое pseudo-elements + ПРИМЕРЫ
Переглядів 2404 роки тому
CSS: что такое pseudo-elements ПРИМЕРЫ
CSS: что такое pseudo classes + ПРИМЕРЫ
Переглядів 2314 роки тому
CSS: что такое pseudo classes ПРИМЕРЫ
Что такое ключевое слово THIS в JavaScript? Как работает и примеры на практике (2020)
Переглядів 6 тис.4 роки тому
Что такое ключевое слово THIS в JavaScript? Как работает и примеры на практике (2020)
Что такое WEBPACK, его настройка и основные концепции (2020)
Переглядів 41 тис.4 роки тому
Что такое WEBPACK, его настройка и основные концепции (2020)
CSS: ВЕРСТКА landing page с нуля
Переглядів 9014 роки тому
CSS: ВЕРСТКА landing page с нуля
Что такое BABEL и его настройка (2020)
Переглядів 19 тис.4 роки тому
Что такое BABEL и его настройка (2020)
ЧТО ТАКОЕ Node Package Manager(NPM) за 12 минут??? (2020)
Переглядів 38 тис.4 роки тому
ЧТО ТАКОЕ Node Package Manager(NPM) за 12 минут??? (2020)
ЧТО ТАКОЕ Node js за 3 минуты (2020)
Переглядів 11 тис.4 роки тому
ЧТО ТАКОЕ Node js за 3 минуты (2020)
CSS: RELATIVE vs ABSOLUTE vs FIXED и немного о потоке (2020)
Переглядів 6224 роки тому
CSS: RELATIVE vs ABSOLUTE vs FIXED и немного о потоке (2020)
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.2) СОЗДАНИЕ ОСНОВНОЙ СТРУКТУРЫ МАКЕТА
Переглядів 3114 роки тому
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.2) СОЗДАНИЕ ОСНОВНОЙ СТРУКТУРЫ МАКЕТА
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.3) ДОБАВЛЕНИЕ СТИЛЕЙ ДЛЯ ССЫЛОК
Переглядів 2244 роки тому
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.3) ДОБАВЛЕНИЕ СТИЛЕЙ ДЛЯ ССЫЛОК
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.4) ДОБАВЛЯЕМ СКРИПТЫ
Переглядів 3414 роки тому
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.4) ДОБАВЛЯЕМ СКРИПТЫ
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.1) ПОДГОТОВКА ОКРУЖЕНИЯ
Переглядів 4984 роки тому
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.1) ПОДГОТОВКА ОКРУЖЕНИЯ
JavaScript урок: cоздаем часы за 30 минут (4 часть)
Переглядів 1574 роки тому
JavaScript урок: cоздаем часы за 30 минут (4 часть)
JavaScript урок: cоздаем часы за 30 минут (3 часть)
Переглядів 1144 роки тому
JavaScript урок: cоздаем часы за 30 минут (3 часть)

КОМЕНТАРІ

  • @ЕкатеринаКустова-ю5ы

    спасибо!

  • @Storks40
    @Storks40 17 днів тому

    Шикарная штука. Сделал с его помощью игру для зрителей прямой трансляции- Угадай птичку. В чате появляется ссылка на фото и надо назвать птичку. Добавляет интерактивности в чат и работает ак только запускаешь эфир.

  • @alexbrutski1210
    @alexbrutski1210 Місяць тому

    Спасибо. То, что мне было нужно.

  • @Dmitrijserg
    @Dmitrijserg Місяць тому

    ОТличное объяснение, спасибо

  • @НикаГорохова-ъ9ъ
    @НикаГорохова-ъ9ъ 2 місяці тому

    Шикарнейшее видео и очень доступное объяснение!

  • @dmitry_st
    @dmitry_st 2 місяці тому

    Спасибо за детальный разбор этой важной темы.

  • @артурхасанов-р6з
    @артурхасанов-р6з 3 місяці тому

    Спасибо большое, очень помог!

  • @epicamv27
    @epicamv27 3 місяці тому

    объяснение не для тупых я тупой и нечего не понятно

  • @mrin0
    @mrin0 3 місяці тому

    !

  • @mrin0
    @mrin0 3 місяці тому

    !

  • @Viacheslav-gp6cr
    @Viacheslav-gp6cr 3 місяці тому

    в

  • @webdeveloper5770
    @webdeveloper5770 4 місяці тому

    Все это работает если функция не стрелочная.

  • @petroradchenko6666
    @petroradchenko6666 4 місяці тому

    Коллеги, кто собрал проект по этому уроку и он работает? Дайте, пожалуйста ссылку на гит

  • @yurisorokin4845
    @yurisorokin4845 5 місяців тому

    А в чём ты пишешь всё это?

  • @denisttk
    @denisttk 5 місяців тому

    А где видео о прототипе

  • @Yuriny_Zatei
    @Yuriny_Zatei 6 місяців тому

    Спасибо. Материал - то хороший. Говорить быстро, не значит хорошо. Пожалуйста, работайте над дикцией и не глотайте слова.

  • @simpsomk
    @simpsomk 7 місяців тому

    Marker is deprecated :(

  • @user-ed1jc6xl9r
    @user-ed1jc6xl9r 7 місяців тому

    в конце дали время на подумать

  • @likluklak
    @likluklak 8 місяців тому

    в жизни синхронными мы называем действия, которые делаются одновременно, а в javascript - которые идут друг за другом😭

  • @pavel_7807
    @pavel_7807 8 місяців тому

    Я из будушего) 24 год Github- анлим приватных репозитории для организации Вся 3 имеет свои CI

    • @Alex-jx6bz
      @Alex-jx6bz 6 місяців тому

      в бесплатной версии CI?

  • @ВиталийГр-м8ц
    @ВиталийГр-м8ц 8 місяців тому

    Молодец, все толково объяснил, для новичков самое, то

  • @aidajam3294
    @aidajam3294 9 місяців тому

    Музыка бесит

  • @ARMALON87
    @ARMALON87 9 місяців тому

    Спасибо, большое! Доступно объяснили тему, в которой я плавал долгое время.

  • @89cls91
    @89cls91 10 місяців тому

    Тараториш страшно. Это глупо. Контен качественный и за это спасибо.

  • @_h1x
    @_h1x 10 місяців тому

    я только сейчас узнал о том что гитхаб был куплен майками?

  • @nik-v7o
    @nik-v7o 10 місяців тому

    Спасибо

  • @codding1144
    @codding1144 10 місяців тому

    Дякую за відео! А де код цього проєкту?

  • @artemis1634
    @artemis1634 10 місяців тому

    Відосик база

  • @kubrakivan1579
    @kubrakivan1579 10 місяців тому

    Відео дуже корисне! Дякую! Було б дуже добре подивитись відео на тему useCallback(), Directions API and Routes API. Як витягувати дані з маркера чи з інфо windows google і створювати довідник адрес.

  • @podpalmoi
    @podpalmoi 11 місяців тому

    Благодарю автора за классное и подробное видео. Как у тебя сейчас дела, как с работой? Видно, что ты умный и толковый программист.

  • @podpalmoi
    @podpalmoi 11 місяців тому

    Куда пропал-то? Последнее видео хорошо зашло, как раз добавляю карту на сайт.

    • @ifrost2
      @ifrost2 9 місяців тому

      СВО...

    • @podpalmoi
      @podpalmoi 9 місяців тому

      @@ifrost2 Кстати по сабжу, гугл убрал выбор России при регистрации в гугл картах. Отнёсся к россиянам как к животным. Потому гугл карты это говносервис, который я не буду использовать чисто принципиально, если только не припрёт, работая на забугор, что вряд ли случится. Зато яндекс карты общедоступны.

    • @boringfrontend9037
      @boringfrontend9037 4 місяці тому

      Так ви і є тварини яки пидтрімуєте массові вбивства та знищєння міст, користуйтесь своїм гівном і не лізьте в цивілізований світ

  • @podpalmoi
    @podpalmoi 11 місяців тому

    Токен тоже хранится на сервере. Ну и в локалсторидже, но туда он попадает с сервера.

  • @podpalmoi
    @podpalmoi 11 місяців тому

    Товарищ автор, я сделал дипломный проект и улучшаю его. Верно ли понимаю, что если вдруг случится атака ботов, то с меня могут списать круглую сумму? И сколько там вообще платить надо в случае превышения лимитов?

  • @lechx32
    @lechx32 Рік тому

    Отличное объяснение, спасибо большое)

  • @alecherkas9633
    @alecherkas9633 Рік тому

    Как же всё ясно и четко))

  • @demimurych1
    @demimurych1 Рік тому

    this никогда не был контекстом вызова в JS и никогда не будет. Прочитайте хотябы раз официальную спецификацию.

    • @boringfrontend9037
      @boringfrontend9037 Рік тому

      А що ж це таке, може трохи розкриєте цю тему?

    • @demimurych1
      @demimurych1 Рік тому

      ​@@boringfrontend9037 Якщо українською, то ось тут ua-cam.com/video/T3fb_VKdZJA/v-deo.html розповідається про this згідно офиційної специфікації. Якщо стисло, -то this - це звичайний ідентифікатор який пов'язується зі значенням суто відповідно тому як викликається Normal Function. Треба зрозуміти одну річ - не мало би ніякого значення, як Ви називаєте this, якщо б Ви не використовували термін (контекст) який має своє особливе значення щодо офіційної специфікації ECMA. Тобто термін Execution Contexts або просто контекст, згідно розділу 9.1 не має ніякого відношення до this. Тому спроби називати this саме так, це вводити в оману початківця, який можливо вивчить колись JS саме так, як про нього розповідає ECMA. Нагадаю, що кожний агент, або RunTime який виконує JavaScript робить це згідно того, що каже саме ECMA - як єдине джерело офіційної інформації з JS з 1996 року.

  • @candy_shop_15
    @candy_shop_15 Рік тому

    Дякую! Контент топ

  • @ecstasyforyou951
    @ecstasyforyou951 Рік тому

    Наконец-то я поняла! Спасибо Вам огромное.. ❤

  • @МаксимИсаев-ъ5о

    Мое уважение!

  • @vlad-zf1ev
    @vlad-zf1ev Рік тому

    лучшее объяснение webpack

  • @fosk2845
    @fosk2845 Рік тому

    спасибо за разьяснения! очень классно

  • @SuperYuri009
    @SuperYuri009 Рік тому

    Отличный урок для начинающих.

  • @АртынскийРаботник

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

    • @boringfrontend9037
      @boringfrontend9037 Рік тому

      Ну після 24/02 якось немає бажання і трохи заклопотаний війною

  • @susoev_sergey
    @susoev_sergey Рік тому

    Спасибо, доступно объяснил. Я определился с тем что мне больше подходит.

  • @sawcka6365
    @sawcka6365 Рік тому

    3:13 Как говорится, всё что может быть перехвачено, будет перехвачено)

  • @marinkaKovalyova
    @marinkaKovalyova Рік тому

    Брехня. ГітХаб має підтримку СІ/CD.

    • @boringfrontend9037
      @boringfrontend9037 Рік тому

      Цьому відео вже 2+ роки, на той момент ці фічі були щє в розробці/не стабільні

  • @physispaisProgramming
    @physispaisProgramming Рік тому

    Спасибо огромное, смог решить задачу над которой мучался пару дней

  • @zvd1660
    @zvd1660 Рік тому

    Спасибо, мне помогло немного понять. По сути, очень похоже на pip в питоне, а node modules на env ;)

  • @taras8068
    @taras8068 Рік тому

    Дякую за відео)

  • @qwizzybeats9745
    @qwizzybeats9745 Рік тому

    Не могу понять , ему нужно достать products.price, а он достает product.price, и все работает

    • @OlgaLazarenko
      @OlgaLazarenko Рік тому

      один Продукт из Продуктов попадает в редьюс. Местод этот как цикл работает, бежит по элементам Продуктов и накаждой итерации выполняет свою колбекфункцию. Можно было назвать другим словом элемент item и біло бы item.title or item.price. На одной итерации попадает об'ект из масива, его превдоним єто второй параметр Редьюса.

    • @qwizzybeats9745
      @qwizzybeats9745 Рік тому

      @@OlgaLazarenko получаеться он бежит по каждому обьекту массива продуктс, и акк сначала 0, потом мне непонятно как он именно выбирает product.price, тоесть price он берет из за того что он у нас есть в обьекте, а product, подразумиваеться как обьект в массиве products?

    • @qwizzybeats9745
      @qwizzybeats9745 Рік тому

      @@OlgaLazarenko ааа, тоесть если у нас массив обьектов,можно указать еще и в скобках редьюса product, как свойство обьекта в массиве products?