Разработка SPA на React, TypeScript, Redux-Toolkit и Tailwind | Ural Digital Weekend

41 878 просмотров • 8 июля 2022 г.

Владилен Минин

249 тыс. подписчиков

8 июля в 12:00 Мск присоединяйтесь к видеотрансляции моего воркшопа «Разработка SPA-фронтенда для визуализации данных об аэропортах на React, TypeScript» на конференции Ural Digital Weekend.

В рамках воркшопа мы спроектируем и разработаем интерфейс для визуализации данных об аэропортах.
Для реализации будем использовать React JS, TypeScript и Rest API из первого воркшопа.
В процессе реализации мы затронем следующие стадии разработки:
— Соберем интерфейс на основе готового шаблона
— Верстка темплейтов c Tailwind CSS
— Создание основных компонентов, настройка роутинга
— Разработка API-слоя, разработка сторы
— Интеграция сторы с интерфейсом
— Частичное покрытие функционала тестами

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

Также, не пропустите Алексея Кузнецова (VK Cloud Solutions) и Максима Ибрагимова (Spectr). Ссылка на полную трансляцию секции: https://youtu.be/P5pUqt1uBso

Подпишитесь на трансляцию, чтобы не пропустить!
Ссылка на программу: https://udwe.ru
Официальный канал конференции: https://t.me/ural_digital_chat

Public API: http://146.185.211.116:8000/api/
Исходный код: https://github.com/Ural-Digital-Weekend/Frontend

Thanks for timecodes to - Bogdan Moskvitin
00:00 Вступление от Владилена
1:00 Обзор проекта
3:30 Создание и настройка проекта
7:30 Маршрутизация
11:50 Создание навигации
14:50 Верстка главной страницы
19:10 Создание Store
30:05 Загрузка данных с сервера
44:30 Отображение данных в AirportCard
47:35 Обработка состояния загрузки и ошибки
48:45 Стилизация AirportCard
52:20 Обработка клика по AirportCard
54:50 Пагинация
1:10:35 Создание поисковика
1:31:25 Создание фильтров
2:01:10 Создание страницы AirportDetail
2:07:30 Создание авторизации
2:33:50 Вопросы к Владилену

#udw #udweek #ural_digital_weekend #digital #tagline #тэглайн #spectr #digitalspectr #мероприятие #udweek

Валерий Станкевич

05.09.22 в 07:33

А что с API?

Capstan Fearless

03.09.22 в 07:01

https://youtu.be/haiiBZW45JE?t=7945
АУФ

Cointelpro Quebeccanada

01.09.22 в 13:14

У меня запрос почему-то едет на http://localhost:3000/0.0.0.0:3001/api/airports, REACT_APP_BASE_URL=http://0.0.0.0:3001/api/,
у меня фронт открыт на 3000 а апи сервер на 3001

Victor Tarita

31.08.22 в 19:36

What is the difference between having initial, in useState an empty array, or null?
const [airport, setAirport] = useState([]) or const [airport, setAirport] = useState(null)?? Why did you choose to change the value?

Светлана Вильчинская

04.08.22 в 08:47

Привет) Что с API делать, там пустой объект?) Хотелось дописать и получить рабочую сборку=))

Iryna Rudzko

29.07.22 в 15:34

52:50 – useNavigate

Вова Петров

20.07.22 в 19:15

Посмотрел всю трансляцию.)) Там, вроде, все профессионалы выступают формально, но какие-то все тормозные.)) Владилен на их фоне кажется супер-крутым, несмотря на те моменты, когда он разбирается с непонятными ему решениями.)

Karen Melikyan

20.07.22 в 13:06

Блять, видит бог, я долго терпел... Владилен, вы не плохой препод.. но неужели невозможно более систематизировано объяснять? Все таки вы боретесь за право одного из лучших блогеров в своей нише (и это действительно так) Но блин, вы настолько далеко уходите в абстракции, как например в работе с тем же Redux toolkit, что просто теряется мысль. Очень долго распутывать этот клубок вложений. И это у вас так везде. Проще надо быть.

Ростислав Щеглов

20.07.22 в 10:29

Лучшая подача материала, ораторское искуство уровень: Древнеримский адвокат

Christian Space

20.07.22 в 10:20

Ай ай ай, магия вне Хогвартса!!! :D Смотрел первый раз как кодят в лайве, используя современный стек, много чего непонятно конечно, как и почему все это взаимодействует, пойду дальше грызть камень теории. Спасибо!

Gorshenko Denis

19.07.22 в 10:12

на 40.57 минуте у меня ошибка

xhr.js:220 GET http://localhost:3000/airports 404 (Not Found)

process.env.REACT_APP_BASE_URL undefined

Остап

18.07.22 в 09:35

При попытке получить что-либо get-запросом response всегда пустой приходит.

Tewenrly

17.07.22 в 13:44

public api пустой массив аэропортов возвращает, инструкция по запуску для локального сервака видимо только для посвященных.
1. Скопировать файлы `.env.example` в `.env` и `app/.env.example` в `app/.env`
Куда копировать? Имеется ввиду переименовать?
2. Заполнить все переменные окружения необходимыми значениями.
Ок, переменные окружения очевидно в .env, а какие значения "необходимые"?
4. Заполнить базу данных, открытыми данными об аэропортах - `docker exec -it web-udw-dev python3 manage.py refill_avia_data`
На это плюется ошибкой "Error: No such container: web-udw-dev".
В итоге контейнеры крутятся, но на 8000 порту "The requested resource was not found on this server."
В итоге никакой апи не пашет

Test Dev

17.07.22 в 13:16

Как поднять бек? Попробовал запустить по инструкции из readme, в докере 3 контейнера крутятся, nginx-udw-avia-dev на порту 8000, но если на него зайти отображается "Not Found
The requested resource was not found on this server." Есть идеи что делаю не так?

Копейка к Рублю

16.07.22 в 12:05

Спасибо за видео, очень интересно

blessed_artist

14.07.22 в 15:32

А можно как-то починить паблик апи? а то там пустой объект

Денис Сергеев

14.07.22 в 07:01

а никогда не бесит, когда приходится мешать логику запросов с логикой функционала компонентов. Типа обязанности все в кучу?

Виктор Сикалетко

13.07.22 в 23:43

Респект и Уважуха. Спасибо огромное. Очень познавательно.

Kass

13.07.22 в 21:33

Очень круто Владилен развиваешься как личность, выступил на публику молодец.
Обязательно хочу попасть на твой воркшоп продолжай развиваться и удачи тебе!

Dmitri Beșleaga

13.07.22 в 17:33

API изменили? Подключение есть, а результатов 0, хотя статус 200

Александр Кузнецов

13.07.22 в 08:39

Спасибо, очень круто, я начинающий и с typeScript еще не изучал, но все понятно, безумно клево, просто супер, побольше бы такого контента, и все-таки жаль, что время ограничено. Еще раз ОГРОМНОЕ СПАСИБО!!!

Andrew West

12.07.22 в 12:50

Крутой лайв

Клим Сомов

12.07.22 в 10:04

где API взять нормольную?

Владилен Минин

12.07.22 в 09:57

Это был интересный для меня эксперимент, я по-немногу начинаю понимать смысл конференций и вероятно буду выступать чаще)
Что касается контента этого МК - попросили сделать для начинающих, примерный уровень Junior. Потому в ролике упрощенная версия кода

Илья Алексеев

12.07.22 в 09:51

Обалденный формат!

Lena Kim

11.07.22 в 14:27

Лайк Владилену за смелость и крутой контент) Выступать на аудиторию с лайв кодингом это next level. Особенно учитывая вечные споры прогеров по поводу навыков, грейдов, требований к разработчикам, что должен, что не должен и т.д. Лайк в общем.

Bogdan Moskvitin

11.07.22 в 09:04

00:35 Вступление от Владилена
1:00 Обзор проекта
3:30 Создание и настройка проекта
7:30 Маршрутизация
11:50 Создание навигации
14:50 Верстка главной страницы
19:10 Создание Store
30:05 Загрузка данных с сервера
44:30 Отображение данных в AirportCard
47:35 Обработка состояния загрузки и ошибки
48:45 Стилизация AirportCard
52:20 Обработка клика по AirportCard
54:50 Пагинация
1:10:35 Создание поисковика
1:31:25 Создание фильтров
2:01:10 Создание страницы AirportDetail
2:07:30 Создание авторизации
2:33:50 Вопросы к Владилену

Dmitry Mogilevtsev

10.07.22 в 18:25

Ахах, спалил свой номер телефона только когда сказал, что спалил свой номер телефона

Max Payne

10.07.22 в 13:42

Public API возвращает пустой массив, вместоI Airport[].(на гите есть же ссылка!) Файл src\store\actions что это вообще такое, не проще было сделать createAsyncThunk или RTK Query?

Виктор Губаревич

10.07.22 в 12:56

Использую данный URL:
http://146.185.211.116:8000/api/
в файле .env и что-то не срабатывает как-то ничего((
в консольке при вводе кода console.log(process.env.REACT_APP_BASE_URL) получаю undefined
а при console.log(response)
[HTTP/1.1 404 Not Found 5ms]

Что это может быть за причина?

Vladimir Muratov

10.07.22 в 12:49

Добрый день, Владилен. Не могли бы вы осветить тему "алгоритмы и структуры данных". Это очень часто спрашивают на собеседовании

Vadym Kononenko

10.07.22 в 08:47

Интересная рубрика! Можно по больше живого кодинга? Желательно неподготовленного, так как оно интереснее смотреть, как решаешь ту или иную проблему, чем когда все готово. Лайк)

WaR76FM

10.07.22 в 07:50

А исходники есть в открытом доступе?

Andrew West

09.07.22 в 20:28

Урок топ! Спасибо большое.

Рамис Салихов

09.07.22 в 16:28

Спасибо за хороший мастерКласс! Ответ с публичного API возвращается с пустым объектом data...

Карл Брукс

09.07.22 в 14:22

Как сделать что бы при сохранении страницы в VS Code у меня появлялись отступы автоматом? У меня на Mac это всегда автоматом работало, на Винде чет не хочет, может что то докачать надо?

Vadim Veksler

09.07.22 в 08:25

Это говнокод или специально видео рассчитано на джунов, у которых знания реакта до полу года?

WebMobileDev

09.07.22 в 07:26

Владилен, выложи исходники куда нибудь, пожалуйста, с экрана записывать норм когда у тебя обычный урок, здесь же экран очень плохо читается. Ну и есть моменты, когда вообще не понятно что ты и где сделал, в уроках ты каждый шаг объясняешь, а тут просто что то быстро стер, сказал что не это не нужно и все)) А так как на видео не всегда весь файл видно, не понятно что удалено что дописано.

Павел Петров

09.07.22 в 07:20

А можно ссылку на эту api?

WebMobileDev

09.07.22 в 07:18

С одной ошибкой разобрался, теперь другая - в MainPage.tsx ругается на useEffect(() => {
dispatch(fetchAirports())
},[]) Ожидалось аргументов: 0, получено: 1.ts(2554) кто знает, в какую сторону копать?

Сергей Черный

09.07.22 в 01:29

Владилен ты супер чел

m31ody 13

08.07.22 в 20:40

У меня 3 месяца коммерческой разработки и я бы твой pull request не апрувнул

DARK SIDE

08.07.22 в 19:35

Список вещей, которые можно улучшить:
1) Вынести селекторы в отдельный слой selectors(Прим. const airportSelect = state => state.airport;
const {airports} = useAppSelector(airportSelect))
2) Вынести запросы с api в слой services
3) Использовать useNavigate для перехода на другую страницу является Bad Practice(юзайте <Link />)
4) В Redux-Toolkit для async actions есть createAsyncThunk
5) В глаза бросилось, что некоторые данные с api, которые null были затипизированы как string

WebMobileDev

08.07.22 в 19:13

Спасибо за воркшоп! А у меня ошибка на 35:55 вот в этой строке const response =await axios.get(url:'airports') , что может быть подскажите?

Руслан Астратов

08.07.22 в 18:58

Большое спасибо за видео. Было интересно и полезно

N I H I L O

08.07.22 в 18:37

Сеньор помидор меняет значение рефы - не понимает где апдейт

Roman Med

08.07.22 в 17:43

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

MrBlackLord

08.07.22 в 17:41

Владилен, скажите, где можно найти тот же api с аэропортами, который использовали вы

wakibtz

08.07.22 в 17:35

Всем привет, помогите пж, где взять ссылку или как просто получить данные с его бэкэнда. Уже пол часа сижу ищу

Andrey Ledo

08.07.22 в 16:04

big thx for this video

KAKTAK ?

08.07.22 в 15:09

Твой код похож на код Джуна)) если так выполнять тестовое,то тебя никто не возьмёт)

Nikita L.

08.07.22 в 14:07

Не досмотрел ещё до конца, но, чтобы начал нормально работать автокомплит для React-router-dom, необходимо дополнительно установить типы для него ( @types/react-router-dom )

STOIKIY

08.07.22 в 13:38

Разработка с нуля:
Взял и поставил create react app

Дэниэль Маертукаев

08.07.22 в 13:38

а спонсор этого стрима - className="border py-2 px-4 mb-4"

Saint

08.07.22 в 12:58

О, теперь можно на паузу ставить и спокойно разбираться.

Дмитрий Олегович

08.07.22 в 12:02

крутое видео. класс! побольше таких разборов из жизни разработчика. обязательно к просмотру всем новичкам.
в видео Владилен использует локальную API, в внешнюю ссылку искал кто? находили?

Kirill Mikulich

08.07.22 в 11:57

Почему ты не копируешь объект ответа из swagger?? все что тебе надо будет, это проставить типы

carved

08.07.22 в 11:53

Просто Дед

08.07.22 в 11:52

Сноуден в Перми пишет приложение на React. Теперь я видел всё.

Bad Mad

08.07.22 в 11:51

в центре QR георгиевская лента?

Amirkhan Magomedov

08.07.22 в 11:46

Классный Воркшоп! Было интересно наблюдать за тем, как ты в реальном времени создаешь SPA приложение. Очень крутой контент. Спасибо большое. (;

Sheriff 007

08.07.22 в 11:41

Спасибо

Рекомендации:

Владилен Минин

47 248 просмотров •

19 июля 2022 г.

Владилен Минин

30 378 просмотров •

22 октября 2021 г.

Владилен Минин

12 909 просмотров •

5 марта 2020 г.

Владилен Минин

150 711 просмотров •

17 марта 2020 г.

Владилен Минин

145 122 просмотра •

24 марта 2020 г.

Владилен Минин

59 230 просмотров •

30 марта 2020 г.

Владилен Минин

76 764 просмотра •

21 апреля 2020 г.

Владилен Минин

208 708 просмотров •

16 июня 2020 г.

showinfo=0 controls=1 rel=0 iv_load_policy=3