Django API + React Js фронтенд [часть 2]
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- 👨💻В этом видео прикрутим ReactJS фронтенд приложение к нашему API, сделаем нужные компоненты для дальнейшей работы и протестируем то что получилось. Для разработки нам понадобиться поставить на машину редактор [VISUAL STUDIO CODE] и среду для выполнения Javascript [NODE JS]. В процессе будет показано как соединить фронтенд и бэкенд части нашего проекта, гоу смотреть видео!
⚡Это видео вторая часть моего мини-курса по python-fullstack разработке.
⚡ В процессе разработки будут использованы языки python и javascript и такие фреймворки как DJANGO, REACTJS, REDUX. Курс будет состоять из нескольких видео, и в конце курса у нас будет полноценное законченное приложение лист задач(TODO LIST).
🔥Где найти меня в сети?🔥
👉Бусти - boosty.to/pash...
👉Yutube - / @pashainit
👉TikTok - / pasha.in.it
👉Instagram - / pasha.in.it
👉Telegram - t.me/pasha_in_IT
👉GetMentor - getmentor.dev/...
👉Linkedin - / pavelvk
🐱💻 Исходный код приложения bit.ly/2Yhw8n5
🐱💻 Документация по Django-rest bit.ly/2MGjzw4
🐱💻 Документация по Django 3.0 bit.ly/2AWY6fW
🐱💻 Документация React Js reactjs.org/
🐱💻 Документация по Python 3.* docs.python.or...
🐱💻 Здесь можно скачать NODE Js bit.ly/2Aj6Xsc
🐱💻 Здесь можно скачать VS CODE bit.ly/2Ac8Ff4
🐱💻 Как запустить VS CODE из терминала bit.ly/2XKG3Cv
🐱💻 Здесь можно скачать RDT bit.ly/2MOXyuV
🔻Видео о том как круто
писать на PYTHON • Python - cтоит ли учит...
🔻Видео о том как писать бота для TELEGRAM на PYTHON • Telegram бот на Python...
🔻Ответ Юрию Дудю на фильм Кремниевая долина. • Кремниевая долина IT с...
🔻Как выбрать компанию и проект для работы bit.ly/2TyQENn
#Python #Django #ReactJs #пашаайти #pashaIT
![Django API + React Js & Redux фронтенд [часть 3]](http://i.ytimg.com/vi/NMp-SPZD4AA/mqdefault.jpg)
![Django API + React Js & Redux фронтенд [часть 3]](/img/tr.png)
![[TH] 2024 PMSL SEA Finals D2 | Fall | ต้องรักษาฟอร์ม อย่ายอมให้ใครแซง](http://i.ytimg.com/vi/x38QsGn7A3M/mqdefault.jpg)
10/10, спасибо
Единственное - кто смотрит в 2021, в файле package.json --output надо заменить на --output-path
спасибо, это сохранило мне несколько часов жизни
Чел, я никогда не пишу коменты. Но эти 3 видео по связке реакта и джанго лучшее что есть в ру ютубе. Спасибо тебе.
Зашло! Так, теперь бы третью часть с таким же темпом
что-то вся музыка очень знакома, как будто у какого-то it блогера играли эти треки....))))) а видос збс!) Паш не пропадай) Поставил колокольчик) и жду новых видео!))
Начало видоса - огонь, как и сам видос!
Спасибо))😂
Спасибо, очень понятно и подробно✌🏻
Топовые уроки, просто лучшие! Спасибо большое!
Ура! Новое видео 👍
Прям то что искал! Спасибо!
Паша, круто! Емко, понятно! Вебпаку отдельное внимание 😂
Учту, спасибо
превосходно, настоящий талант
Начало огненное!
Спасибо, сссдрасссте!!!
То чувство когда js твой первый ЯП
Огонь!
Спасибо за видео. У меня есть вопрос почем не использовать уже готовый пред проект npx create- react -app. спасибо за ответ
спасибо!
Dzien dobry! Fantastyczne video!
Реакт? А джанго-манго? Тут только питонский учу, хопа и реакт)
Если Django отдает 404, то в файле ./frontend/templates/frontend/index.html поменяйте строку на
От души!
@@pro100vanyaandvlad2 Чтобы не делать такой бред, в файле package.json исправьте устаревшее:
"scripts": {
"dev": "webpack --mode development ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
"build": "webpack --mode production ./frontend/src/index.js --output ./frontend/static/frontend/main.js"
},
иначе webpack, при сборке будет создавать файл main.js и папке: main.js/main.js
на:
"scripts": {
"dev": "webpack --mode development ./frontend/src/index.js --output-path ./frontend/static/frontend",
"build": "webpack --mode production ./frontend/src/index.js --output-path ./frontend/static/frontend"
},
@@bloodraven707 спасибки, Бро
Все это логично выглядит разделение на фронт и бэк. Но я как начинающий web-разработчик на Django смотрю вот и думаю: это сколько же работы добавляется прежде чем начнёшь реально отмечать пунктики в ТЗ. Я хочу осваивать новое, но пока не врубаюсь, где здесь упрощение работы? В джанге работы меньше не станет, там ещё всегда плюсом надо frontend приложение создавать со своей начинкой. Пока фронт ставишь и настраиваешь - все шаблоны руками отрисуешь, да и с SEO вопросов не будет, страницы быстрее отрисуются без лишнего парсинга и скрипты со стилями в шаблонах укажешь только необходимые для этой страницы. Где тут выгода и как ее сравнить? Может я что-то упустил и поэтому не увидел привлекательности для разработки типичных сайтов?
Быстрота, легко закодить прототип, для продакшн такая связка не всегда годится
@@pashainit почему для продакшн такая связка не всегда годится? вроде как стек Джанго + Реакт очень даже классный стэк
@@pashainit удвою вопрос от @TarTarus
Не проще ли было использовать React-Bootstrap, чем писать на html.
Ошибка при сборке webpack и проблема с отсутствием React компонентов на странице решатся внесением изменений:
"scripts": {
"dev": "webpack --mode development ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
"build": "webpack --mode production ./frontend/src/index.js --output ./frontend/static/frontend/main.js"
},
[!!!] Если заменить только --output на --output-path, то webpack, при сборке будет создавать файл main.js и папке: main.js/main.js
на 05.11.2022 должно быть так:
"scripts": {
"dev": "webpack --mode development ./frontend/src/index.js --output-path ./frontend/static/frontend",
"build": "webpack --mode production ./frontend/src/index.js --output-path ./frontend/static/frontend"
},
Да и конечно огромное спасибо, автору...
Особенное, за не забываемые эмоции...)))
Удачи, и по больше бы подобного контента...
Дмитрий, добрый день, сделал правки как вы написали выше, теперь мне выдает ошибку:
[webpack-cli] [Error: EISDIR: illegal operation on a directory, open '/home/ilya/Рабочая/Pasha_IT/project/less_2/todoapp/frontend/static/frontend/main.js'] {
errno: -21,
code: 'EISDIR',
syscall: 'open',
path: '/home/ilya/Рабочая/Pasha_IT/project/less_2/todoapp/frontend/static/frontend/main.js'
}
Мб подскажите в чем проблема?
Делал все как в видео, в итоге не смог собрать вебпак все.
Module not found: Error: Can't resolve './frontend/static/frontend/main.js' in 'D:\Yandex\YandexDisk\Programming\mysite'
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\\Program Files\
odejs\
ode.exe',
1 verbose cli 'C:\\Users\\GeON\\AppData\\Roaming\
pm\
ode_modules\
pm\\bin\
pm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev'
1 verbose cli ]
2 info using npm@6.14.3
3 info using node@v12.16.1
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle mysite@1.0.0~predev: mysite@1.0.0
6 info lifecycle mysite@1.0.0~dev: mysite@1.0.0
7 verbose lifecycle mysite@1.0.0~dev: unsafe-perm in lifecycle true
8 verbose lifecycle mysite@1.0.0~dev: PATH: C:\Users\GeON\AppData\Roaming
pm
ode_modules
pm
ode_modules
pm-lifecycle
ode-gyp-bin;D:\Yandex\YandexDisk\Programming\mysite
ode_modules\.bin;D:\Yandex\YandexDisk\Programming\mysite\venv\Scripts;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\Common Files\GeoniCS Shared\;C:\Program Files\Common Files\Autodesk Shared\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\110\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\DTS\Binn\;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files (x86)\GnuWin32\bin;C:\src\flutter\bin;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;C:\Program Files
odejs\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\Program Files\Git\cmd;C:\Program Files\PuTTY\;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit\;C:\Users\GeON\AppData\Local\Programs\Python\Python37\Scripts\;C:\Users\GeON\AppData\Local\Programs\Python\Python37\;C:\Users\GeON\AppData\Local\Microsoft\WindowsApps;C:\Program Files\JetBrains\PyCharm 2018.3.2\bin;C:\Program Files\PostgreSQL\12\bin;C:\Users\GeON\AppData\Roaming
pm;C:\Users\GeON\AppData\Local\Programs\Microsoft VS Code\bin
9 verbose lifecycle mysite@1.0.0~dev: CWD: D:\Yandex\YandexDisk\Programming\mysite
10 silly lifecycle mysite@1.0.0~dev: Args: [
10 silly lifecycle '/d /s /c',
10 silly lifecycle 'webpack --mode development ./frontend/src/index.js --output ./frontend/static/frontend/main.js'
10 silly lifecycle ]
11 silly lifecycle mysite@1.0.0~dev: Returned: code: 1 signal: null
12 info lifecycle mysite@1.0.0~dev: Failed to exec dev script
13 verbose stack Error: mysite@1.0.0 dev: `webpack --mode development ./frontend/src/index.js --output ./frontend/static/frontend/main.js`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Users\GeON\AppData\Roaming
pm
ode_modules
pm
ode_modules
pm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:311:20)
13 verbose stack at ChildProcess. (C:\Users\GeON\AppData\Roaming
pm
ode_modules
pm
ode_modules
pm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:311:20)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid mysite@1.0.0
15 verbose cwd D:\Yandex\YandexDisk\Programming\mysite
16 verbose Windows_NT 10.0.18362
17 verbose argv "C:\\Program Files\
odejs\
ode.exe" "C:\\Users\\GeON\\AppData\\Roaming\
pm\
ode_modules\
pm\\bin\
pm-cli.js" "run" "dev"
18 verbose node v12.16.1
19 verbose npm v6.14.3
20 error code ELIFECYCLE
21 error errno 1
22 error mysite@1.0.0 dev: `webpack --mode development ./frontend/src/index.js --output ./frontend/static/frontend/main.js`
22 error Exit status 1
23 error Failed at the mysite@1.0.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
не легче ли просто npx использовать и все за раз скачать? ( я новичок и впервые вижу чтобы так создавали в ручную)
я тоже так подумал и досихпор не понимаю в чем смысл
macboochek
А чё не Vue, у Vue реально ниже порог входа. И под скоростную разработку он больше подходит
А почему вуй ниже порог входа? Почему он подходит больше под скоростную разработку чем реакт?
По мне так проще чем реакт фрэимворка нет
@@pashainit у него больше родных возможностей, которые в реакте через либы идут
А какие?
@@pashainit шаблоны, сам их синтаксис, это объективно круче и проще реализовано там, но я не эксперт в реакте, так что целеком говорить не могу)
Ahueenno
Страшно тебе? Видим твой код на сквозь! Надо на собеседовании использовать цитатку!
Кандидат будет шокирован 200%