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

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

Рет қаралды 33,771

Күн бұрын

⏰ Курс JavaScript 2.0: itgid.info/course/javascript-2
🧠 Чат Telegram c кодами задач: t.me/itgid_info
👇 Разверни для полной информации
🤖 Курс React.js itgid.info/course/reactjs
🧱 Курс Node.js itgid.info/course/nodejs
⏰ Курс JavaScript 2.0: itgid.info/course/javascript-2
💎 Курс Функции в JavaScript: itgid.info/course/function-2021
🧑🏻‍💻 Сайт: itgid.info
😋 Курс Методы массивов: itgid.info/course/arraymethod
Cоздаем приложение на React.js и node.js - файловый менеджер. Frontend реализуем на React.js, а бекенд на Node.js ( фреймворк Express.js). Получение файлов и папок с сервера, вывод, переход и навигация по ним.
00:00 Обзор проекта
01:45 Создаем проект на express.js
04:00 Создаем файл server.js
06:40 Создаем папку routes
08:10 Создаем роутер main.js
11:00 Создаем файловую структуру на сервере
12:50 Дописываем компонент роутинга для получения данных
24:30 Создаем приложение на react.js
26:50 Применяем hook useEffect для получения данных при старте
29:30 Исправляем ошибку CORS при запросе с React на Node.js
32:30 Выводим список файлов в компоненте App.js
37:00 Оформляем вывод с помощью material icons
40:55 Добавляем в реакт клик по папке
42:20 Обработчик клика по ссылке в React.js
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

Пікірлер: 66

@sergeipro3642 2 жыл бұрын

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

@serjdenisov2114 2 жыл бұрын

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

@_andrii_1292 2 жыл бұрын

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

@arturmavlidov247 2 жыл бұрын

Спасибо! Давай больше реакта

@denissavast 2 жыл бұрын

Благодарю Вас за информацию!

@GunaevVO 2 жыл бұрын

Спасибо за такие уроки!

@svitlana6420 Жыл бұрын

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

@bakdoolot 2 жыл бұрын

Очень во время записали! Спасибо

@os743 8 ай бұрын

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

@BrestSouth 2 жыл бұрын

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

@CrazyTVnet 2 жыл бұрын

У вас лучшие видео!

@NoName-ih6sf 2 жыл бұрын

Спасибо за контент!

@gektor0138 2 жыл бұрын

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

@IlyaCasper 2 жыл бұрын

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

@SychMedia 2 жыл бұрын

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

@yunus737 2 жыл бұрын

Спасибо вам учитель :)

@tracer4278 2 жыл бұрын

ТОП КОНТЕНТ! Больше ноды пожалуйста!!!!!!!!!

@bohdanyeinikov1649 2 жыл бұрын

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

@insomniad2317 2 жыл бұрын

шикарно 💣

@webdevparadise4452 2 жыл бұрын

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

@GreatVolcano 2 жыл бұрын

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

@tuku_mann 2 жыл бұрын

Дада, нужно продолжать

@akramyuldoshev4889 2 жыл бұрын

спасиба вам за информацию

@user-de6cl3or4k Жыл бұрын

Алексей, спасибо.

@user-de6cl3or4k Жыл бұрын

cd /it :)

@dimaos3470 2 жыл бұрын

Круто !

@Werma2006 2 жыл бұрын

замечательно

@yevhenchernov2236 2 жыл бұрын

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

@cooliquid 2 жыл бұрын

29:30 - Благодарю, лайк.

@alex1cspb 2 жыл бұрын

Спасибо

@mikaelgevorgyan4521 2 жыл бұрын

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

@user-kx2un8sl2j 2 жыл бұрын

ULbi TV - качество контента куда лучше

@mikaelgevorgyan4521 2 жыл бұрын

@@user-kx2un8sl2j 0o0

@alexperemey6046 2 жыл бұрын

Взаимодействие фронта и бекенда от выбора фронтенд-фреймворка не меняется. Написать формочки на vue вместо формочек на реакте - достаточно изучить любой из курсов по vue формочкам. На работу с бекендом и стыковку фронтенда и бекенда vue никак не влияет.

@mikaelgevorgyan4521 2 жыл бұрын

@@alexperemey6046 с нодай как тогда о0о?

@TheBorninmotion 2 жыл бұрын

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

@Qwertyqwerty-tq3we 2 жыл бұрын

🔥🔥🔥

@vladork3032 2 жыл бұрын

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

@ii3246 2 жыл бұрын

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

@nikitabrodel5180 2 жыл бұрын

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

@sergeysharapov5945 Жыл бұрын

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

@dmitryeneier3449 Жыл бұрын

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

@sergeykhairulin 2 жыл бұрын

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

@Rohan-Sensei 8 ай бұрын

У меня такой вопрос, можно ли в проекте react добавить папку скажем server/backend, и добавлять папки/файлы связанные с серверной частью, а в остальном писать фронт. Я только начал изучать node.js и не понимаю почему везде на ютубе создают отдельный пустой проект, а не проект на React?

@user-re1ri9jp3e 2 жыл бұрын

React фронт - Django бэк было бы интересно

@nataliavardazaryan3981 2 жыл бұрын

Когда пишу node .\server.js --> module not found. Удаляла node_modules, package-lock.json, делала npm install. Ничего не помогло. Что делать? :)

@stormd2902 2 жыл бұрын

А какой же ещё более мощный редактор есть кроме VS Code? )

@vadim_matsul Жыл бұрын

Хороший урок, но как потом deploy приложение, если package.json в двух разных файлах

@borismoskalyuk2304 2 жыл бұрын

конечно продолжение фулстека мало контента

@generalnevermore706 2 жыл бұрын

У меня глупый вопрос, получается точно такой же функционал как у автора видео можно и на связке пайтон с джанго сделать? Но будет ли это проще и быстрее реализовано ?!

@BorysOliinyk 2 жыл бұрын

Да, спокойно можно сделать на python + django. Только django для такого проекта это как с пушки по воробьям, я бы выбрал flask

@DamedParadis 2 жыл бұрын

Александр, перед Новым годом не планируется распродажа курсов?) (скидки, в смысле)

@ihatetoys1528 2 жыл бұрын

Не смешите. Цены даром

@YanatoCherizhosa Жыл бұрын

Голос немного напоминает актёра озвучания, который в игре Civilization 4 технологии озвучивал.

@YanatoCherizhosa Жыл бұрын

А для России я так понимаю закрыли дверь на курсы) Ладно, VPN мне в помощь~

@antonshtihov7662 2 жыл бұрын

Где скопировать стили?

@itgid 2 жыл бұрын

Ссылка на телеграм канал под видео. Там выложено

@nbjk9328 2 жыл бұрын

«Сначала мы формируем наши здания, а потом наши здания формируют нас», - выгравировано на черной мраморной плите рядом с входной дверью клуба The Battery в деловом центре Сан-Франциско.

@user-nn8iy2ok1j 2 жыл бұрын

Красиво, но подходы старые используются

@alexperemey6046 2 жыл бұрын

Странный вопрос насчет редакторов кода и не менее странный ответ. VSCode благодаря интеграции плагинов является полноценной средой разработки под node.js и фронтенд. Никакой другой редактор ничего тут не добавит.

@Ninada_O_o 2 жыл бұрын

Жаль ресурсы не прикрепили (стили), с 37 минуты уже расхождение из за отсутствующих стилей. И как жить((( Но спасибо за видео, крайне интересно было смотреть 👍

@itgid 2 жыл бұрын

Ресурсы в телеграм канале

@Ninada_O_o 2 жыл бұрын

@@itgid лучший

@igormaksymiv113 Жыл бұрын

да там самому застилизировать две минуты)

@akramyuldoshev4889 2 жыл бұрын

Adobe Dreamweaver CC 2017 хароший редактор!!