Стыкуем React + Node.js. Пишем приложение файловый менеджер, фронт react.js, бек - node.js

👇 Разверни для полной информации


00:00 Обзор проекта
06:40 Создаем папку routes
11:00 Создаем файловую структуру на сервере
12:50 Дописываем компонент роутинга для получения данных
26:50 Применяем hook useEffect для получения данных при старте
37:00 Оформляем вывод с помощью material icons
40:55 Добавляем в реакт клик по папке
46:50 Реализуем выход на уровень выше в файловом менеджере

Моя рабочая станция:
Desktop: AMD Ryzen5 1600,Asus GeForce GTX 1650 Phoenix 4GB GDDR6, RAM: 16GB, Motheboard: MSI A320M PRO-M2 V2, Power: Chieftec Value APB-400B8 400W Bulk, Box: Gougar MX350 Mesh
HDD:
- Samsung 860 Evo-Series 500GB M.2
- Toshiba P300 2TB
- Silicon Power A56 256GB

Monitors:
- 23.8" Dell P2419HC
- 23.8" Dell P2418D

Mouse: Trust Verto Ergonomic Wireless
Keyboard: HP KU-1469
Microphone: Samson C01U Pro

+ MacBook Pro M1 13'' 8-Core CPU/8-Core GPU/16-core Neural Engine /16GB/256GB
+ IBM Lenovo ThinkPad E14 / Intel Core i5-1135G7 (4.2 ГГц) / RAM 16 ГБ / SSD 1 ТБ / Intel Iris Xe Graphics

[sergeipro]

Ура! Наконец-то 100к подписчиков! Поздравляю с кнопкой и спасибо за уроки!

[serjdenisov]

Спасибо за понятное объяснение.
Жду продолжения!!!

[IlyaCasper]

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

[_andrii_]

Да нужно продолжать!!! Ждем больше таких видео.

[SychMedia]

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

[gektor]

Интересно было смотреть. Хотелось бы глянуть на реализацию скачивания. Спасибо за материал!

[svitlana]

Thanks a lot! You are a real teacher, great explanation!

[BrestSouth]

Спасибо. Очень интересно и познавательно.

[webdevparadise]

Жемчужина! Спасибо, Алекс. Мне бы больше Реакта, еще и еще. Спасибо.

[dmitryeneier]

require('./routes')(app) - первый раз вижу такое чудо с роутами. Пример нормального подключения роутов это - app.use('/api', router). Где этот самый роутер мы создаем используя функцию new Router и в индекс файл в папке роутер мы сливаем все роуты с разных направлений.

[GreatVolcano]

Топ контент. Побольше бы видосов с mern стеком

[os]

Ну дууууже цікаве, корисне та зрозуміле відео, дякую автору за такий контент!!!

[bohdanyeinikov]

Спасибо, объяснил пару крутых вещей =))

[yevhenchernov]

Спасибо! Хорошо бы где-то ссылку на материалы урока. Хочется повторить за учителем, а внесение вручную с экрана файлов вроде css имеет малую практическую ценность :-)
А в качестве идеи неплохо было бы добавить сюда загрузку файлов на сервер. Еще круче - с возможностью возобновления при разрыве.

[nikitabrodel]

пишу то же самое только с тайпскриптом, какой тип нужно дать event при клике на хендлер?

[mikaelgevorgyan]

Вот про такое не где почти нету=)), ещё и на vue.js будет супер

[sergeykhairulin]

Как добавить условие по которому дивка с Level Up не будет отображаться в корневом каталоге ?
идея появилась с дисплей нон по условию, но хотелось бы вообще не добавлять ее, если это не надо, а не скрывать.

[vladork]

Не подскажите как лучше сохранять фото с помощью node.js в mongoose?
Вижу много решений в base64, то тогда сильно ли нагружаться бд будет и заполняться?
Или хранить все фото на сервере, но тогда много памяти будет на это уходить?
Не подскажите какие-то решения рациональные?

[TheBorninmotion]

Александр пилите контент с vue, обидно что обделяете )

[sergeysharapov]

а как же теперь сделать открытие файлов на фронтенде или хотя бы их скачивание ?