Популярное

Музыка Кино и Анимация Автомобили Животные Спорт Путешествия Игры Юмор

Интересные видео

2025 Сериалы Трейлеры Новости Как сделать Видеоуроки Diy своими руками

Топ запросов

смотреть а4 schoolboy runaway турецкий сериал смотреть мультфильмы эдисон
dTub
Скачать

Django and React Project for Beginners - Build a FullStack Notes App

Автор: Code With Clinton

Загружено: 2024-07-03

Просмотров: 25543

Описание:

Learn how to build a full-stack web application using Django and React in this beginner-friendly tutorial. Follow along as we set up a Django backend, create a React frontend, and integrate them to develop a functional notes app. Perfect for newcomers to full-stack development!

Source code:
Frontend: https://github.com/CodeWithClinton/no...
Backend: https://github.com/CodeWithClinton/no...
Fullstack: https://github.com/CodeWithClinton/re...

Timestamps:
00:00:00 - Introduction
00:03:10 - Establishing a Python Virtual Environment
00:05:29 - Initiating a New Django Project
00:09:40 - Developing the Notes Model
00:15:08 - Applying Model Migrations to the Database
00:15:44 - Creating a Superuser for Django Admin
00:17:33 - Serializing the Notes Model
00:20:34 - Building the View for Creating and Retrieving Notes
00:27:39 - Mapping URLs to Views
00:31:24 - Adding New Notes to Django Admin
00:37:40 - Debugging URL Mappings
00:39:45 - Listing Notes
00:42:52 - Retrieving, Updating, and Deleting Notes
00:51:35 - Endpoint Testing Using VSCode Postman
00:57:37 - Introduction to Frontend Development with React
00:58:08 - Setting Up a React Project
01:02:53 - Cleaning Up the React Project
01:04:41 - Displaying "Hello World" in the Browser
01:06:12 - Creating the "NavBar" Component
01:16:22 - Developing the "Filter" Component
01:17:56 - Constructing "NoteContainer" and "NoteCard" Components
01:23:26 - Utilizing React Router Dom for Multiple Pages
01:30:03 - Integrating "NavBar" Across All Pages
01:34:18 - Creating the "Add Note" Page
01:41:04 - Developing the "Note Detail" Page
01:47:25 - Creating the "Edit Note" Page
01:51:08 - Connecting Django with React
01:56:49 - Fetching Notes in the Frontend
02:12:08 - Displaying the First 20 Words of Each Note's Body
02:14:58 - Implementing Dynamic Note Coloring
02:18:59 - Formatting Date and Time in Note Objects
02:21:57 - Adding a Loading Spinner
02:32:20 - Building the Note Detail Page
02:43:28 - Creating a New Note
03:08:40 - Implementing Toast Notifications
03:12:24 - Updating a Note
03:42:10 - Deleting a Note
04:00:07 - Filtering Notes
04:09:41 - Implementing Search Functionality (Backend and Frontend)
04:32:46 - Conclusion

Django and React Project for Beginners - Build a FullStack Notes App

Поделиться в:

Доступные форматы для скачивания:

Скачать видео mp4

  • Информация по загрузке:

Скачать аудио mp3

Похожие видео

array(10) { [0]=> object(stdClass)#10768 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "cRzcnKxmIZo" ["related_video_title"]=> string(93) "Копия Miro с нуля на React в 2025 + Архитектура front-end БЕЗ FSD!" ["posted_time"]=> string(23) "1 месяц назад" ["channelName"]=> string(41) "Евгений Паромов | Front-end" } [1]=> object(stdClass)#10741 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "HT6cm4GoSIw" ["related_video_title"]=> string(89) "Nest.js — лучший бэкэнд фреймворк | Полный курс 2025" ["posted_time"]=> string(25) "2 месяца назад" ["channelName"]=> string(8) "TeaCoder" } [2]=> object(stdClass)#10766 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "C9gGjOx5BLQ" ["related_video_title"]=> string(116) "Курс: Feature-Sliced Design за 1,5 часа | Архитектура React, Vue, Next, Nuxt, Angular и Svelte" ["posted_time"]=> string(21) "1 день назад" ["channelName"]=> string(29) "PurpleSchool | Anton Larichev" } [3]=> object(stdClass)#10773 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "G8xF99-uzfg" ["related_video_title"]=> string(77) "Laravel, Django, Next.js ... which framework would I use for building a SaaS?" ["posted_time"]=> string(19) "1 год назад" ["channelName"]=> string(25) "Maximilian Schwarzmüller" } [4]=> object(stdClass)#10752 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "vlG3DbZSIqw" ["related_video_title"]=> string(94) "Как MCP улучшает Cursor AI в 10x раз? И что вообще это такое?" ["posted_time"]=> string(25) "2 месяца назад" ["channelName"]=> string(65) "Ivan Abramov: стартап разборы | Гроус хаки" } [5]=> object(stdClass)#10770 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "-Vd1aesu1lY" ["related_video_title"]=> string(102) "Арестович: Украина и Россия перепутали врагов. @yulialatynina71" ["posted_time"]=> string(23) "6 часов назад" ["channelName"]=> string(17) "Alexey Arestovych" } [6]=> object(stdClass)#10765 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "LWtHl__oEWc" ["related_video_title"]=> string(106) "TypeScript ФУНДАМЕНТАЛЬНЫЙ КУРС от А до Я. Вся теория + практика" ["posted_time"]=> string(23) "1 месяц назад" ["channelName"]=> string(7) "Ulbi TV" } [7]=> object(stdClass)#10775 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "yRk-F2Jbwrw" ["related_video_title"]=> string(45) "Бомба в Офисе Президента" ["posted_time"]=> string(23) "9 часов назад" ["channelName"]=> string(27) "Анатолий Шарий" } [8]=> object(stdClass)#10751 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "RvuRVfz4yqk" ["related_video_title"]=> string(142) "🔥АУСЛЕНДЕР: в Иране ПОЛНАЯ КАТАСТРОФА! Израиль наносит сокрушительные удары" ["posted_time"]=> string(23) "8 часов назад" ["channelName"]=> string(19) "Апостроф TV" } [9]=> object(stdClass)#10769 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "2RE5LFmSEQE" ["related_video_title"]=> string(133) "Чиновники на ПМЭФ: всё плохо, Россия на грани рецессии, ресурсы исчерпаны" ["posted_time"]=> string(24) "17 часов назад" ["channelName"]=> string(27) "Владимир Милов" } }
Копия Miro с нуля на React в 2025 + Архитектура front-end БЕЗ FSD!

Копия Miro с нуля на React в 2025 + Архитектура front-end БЕЗ FSD!

Nest.js — лучший бэкэнд фреймворк | Полный курс 2025

Nest.js — лучший бэкэнд фреймворк | Полный курс 2025

Курс: Feature-Sliced Design за 1,5 часа | Архитектура React, Vue, Next, Nuxt, Angular и Svelte

Курс: Feature-Sliced Design за 1,5 часа | Архитектура React, Vue, Next, Nuxt, Angular и Svelte

Laravel, Django, Next.js ... which framework would I use for building a SaaS?

Laravel, Django, Next.js ... which framework would I use for building a SaaS?

Как MCP улучшает Cursor AI в 10x раз? И что вообще это такое?

Как MCP улучшает Cursor AI в 10x раз? И что вообще это такое?

Арестович: Украина и Россия перепутали врагов. @yulialatynina71

Арестович: Украина и Россия перепутали врагов. @yulialatynina71

TypeScript ФУНДАМЕНТАЛЬНЫЙ КУРС от А до Я. Вся теория + практика

TypeScript ФУНДАМЕНТАЛЬНЫЙ КУРС от А до Я. Вся теория + практика

Бомба в Офисе Президента

Бомба в Офисе Президента

🔥АУСЛЕНДЕР: в Иране ПОЛНАЯ КАТАСТРОФА! Израиль наносит сокрушительные удары

🔥АУСЛЕНДЕР: в Иране ПОЛНАЯ КАТАСТРОФА! Израиль наносит сокрушительные удары

Чиновники на ПМЭФ: всё плохо, Россия на грани рецессии, ресурсы исчерпаны

Чиновники на ПМЭФ: всё плохо, Россия на грани рецессии, ресурсы исчерпаны

© 2025 dtub. Все права защищены.



  • Контакты
  • О нас
  • Политика конфиденциальности



Контакты для правообладателей: [email protected]