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

А что с API?

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

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

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?

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

52:50 – useNavigate

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

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

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

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

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

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

process.env.REACT_APP_BASE_URL undefined

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

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."
В итоге никакой апи не пашет

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

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

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

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

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

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

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

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

Крутой лайв

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

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

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

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

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 Вопросы к Владилену

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

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

Использую данный 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]

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

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

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

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

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

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

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

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

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

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

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

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

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

Список вещей, которые можно улучшить:
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

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

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

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

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

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

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

big thx for this video

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

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

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

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

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

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

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

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

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

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

Спасибо