Django + React Notes App
HTML-код
- Опубликовано: 16 июн 2024
- Continuation of my last stream (React JS Crash Course) but now with a Django backend using the Django REST Framework.
Previous stream: • React JS Crash Course
Source Code: github.com/divanov11/Django-R...
Django + React Quick Hello World App: • React + Django Integra...
AVAILIABLE COURSES
Django 2021 course on Udemy: www.udemy.com/course/python-d...
React Crash Course on Udemy: www.udemy.com/course/react-cr...
React + Django Ecommerce Website: www.udemy.com/course/django-w...
Timestamps
00:00 - Introduction
4:15 - Setup Django Project
20:13 - Database Models
26:00 - Django Admin Panel
29:48 - Adding Django REST Framework
45:10 - Setting up React Project
1:00:33 - Making API Calls
1:04:33 - CORS Fix
1:16:30 - Proxy URL
1:31:11 - Styling
1:46:00 - Update Note Functionality
1:59:15 - Delete Note Functionality
2:03:45 - Create Note Functionality
2:22:50 - Debugging Delete note issue
2:36:30 - Styling List Items
2:44:33 - Adding React App to Django Project
3:01:10 - Making our API RESTFUL 
Развлечения
Thank you so much for the wonderful material you make freely available. I've been a Django backend dev for the last ~5 years working on a very large event management platform and recently resigned after covid related cash flow issues resulted in me (and the other devs) not getting paid for several months which has led me into a state of severe anxiety and imposter syndrome. I'm currently upskilling and practicing while looking for new work and your videos are doing well to reduce/calm my anxiety and fear.
bro, absolutly the same case :D Even experience
After all the research I did, I can now finally conclude that this video is one of the best video for Django + React. Thanks a lot Dennis!❤ Keep up the great work.😊
Great tutorial Dennis! Just started learning React and I was worried that Django and React would be a headache to setup but it was surprising to see how easy it was.
i really appreciate you for uploading this django + React note app video. I'm new to Django and I just started learning Python. Now I'm capable of creating a restful API with python. This is a great video to use the learning technique "copy-work". You have got yourself a new subscriber.
I literally learned how to use JSX format and that's all I needed to just use React. Thank you for this awesome project.
Thank you so much, this was exactly what I was looking for. You remind me of some good programmers I worked with in the 90s. Subscribed.
This was so enjoyable, even with all the errors and headscratchers lol. Thank you Dennis! You are a true inspiration.
Thank you Manny. The bugs are a pain but I guess that’s the risk of live streaming :p
@@DennisIvy Agree bro 😁 Thanks for providing my first project 😄 although I am only at the django end part now 😅 I will complete the video soon and have a complete web site 😇 Thanks Dennis bro ❤🔥
@@DennisIvy I actually think it makes the learning experience much better. In slick, edited tutorials, I tend to just follow along with whatever the instructor is doing, not really participating in the programming steps. At the same time, the instructor tends to have everything prepared, going too fast through tricky segments. In live streams like this, I'm much more actively participating in the project, looking to fix the same errors you're encountering, and stopping to spot my own.
I actively look for livestream tutorials like this, and yours have been the best I've found so far.
@@sprutch11 @Dennis Ivy is the best in my experience with Django tutorials.
@@DennisIvy We feel a little less bad, when we see, that we are not alone in this :)
And we see, how you are solving the errors. I miss this in many tutorials.
Thanks for your effort!
Hey sir, I highly appreciate this video. Integrating Django and React is a highly sought out skill...
Amazing tutorial! Helped me understand both React and Django much better. For those looking to practice skills, a FUN MINI CHALLENGE: put a switch in the Header that switches between light mode and dark mode ;-) Happy coding!
Thanks. A few adjusments needed if you want to follow this tutorial in 2023. I had to use window.location.assign('/'); instead of history.push('/')
Also, took about 3 hours to realize that fetch(`/api/notes/${id} needs to be WITHOUT the last slash "/" to work, so dont use fetch(`/api/notes/${id}/ :D
Thanks a lot brother 🙂
What a clear and amazing content. Much love and Thank you!
Thank you sosososo much for this tutorials. You teach so well and because of you, i've started to get more into programming web development and network stuff with restapi. You are an inspiration to me.
The process in the backend is i think always
# DATABASE
DB [sql this case] => models [can be used django modelizer or pydantic or dataclasses]
# RESTAPI
• Routes [url patterns]
• Request Type [get post put del] + body if its neccesary [could be mixed with pydantic models or dataclasses, like in FastAPI]
• Functionality with the request [if its wanted]
• Response [application/json or text/html]
Up to now this are 2 separated parts and then its when it comes Serializers or Schemas, that are functions than can pass an Object with attributes [this object from the models above] to be passed to a Dictionary, so its a native pyhon datatype that in this case, instead of dumping it to json, DRF does it automatically with method Response
So Bridge would be
DATABASE => SERIALIZERS / SCHEMAS => RESTAPI [Django Rest or Fast API]
after looking for many many courses i found this as the best one to follow , thanks for the best course
As usual, an amazing tutorial
Thank you sir !
for someone who has problems with BrowserRouter:
1. You need to wrap your routes inside Routes component.
2. You need to use element instead of component.
3. You need to add a component as an element, not a function.
Example:
Thank you, friend!
Thank you so much
Денис, спасибо за уроки!)
Loved it,
Didnt know a thing about django and react just followed along and got to know alot
thanks dennis
Some updates, I had problem at 1:20:30, in react-router-dom version 6 there are a few difference now:
* A must be used as the child of element
If you get this error Matched leaf route at location "/" does not have an element. This means it will render an with a null value by default resulting in an "empty" page
* In V6, you can't use the component prop anymore. It was replaced in favor of element :
it should be like this:
How did you do it to pass the params to the NotePage.js please?
@@ayeshariantegally342 If you don't have the fix yet, you need to modify NotePage to use "useParams()" to get the parameters in v6.
import React from 'react'
import { useParams } from "react-router-dom";
const NotePage = () => {
let params = useParams();
return (
Single Note {params.id}
)
}
The route itself should look like this:
which should be wrapped in of course.
@@GameriziMm got it thanks though :) ... for me the end part isnt worrking rightly... doesnt update on delete and update except on refresh
You're a hero!
Thank you so much, buddy!
Thank you for making this. This is super helpful.
Yo, absolutely amazing live tutorial !!! Thanks for this so much ..... also the wallpaper lol
This was an amazing tutorial. So chill...
I'm a complete beginner. This makes so much sense!!
Thanks a lot... Your videos are well structured and sophisticated
very great tutorial Thank you Dennis It saved me a lot of hours.
Thank you Dennis for this amazing tutorial.
Cool Thumbnails man, everything's on point 👌👌 I think I've found my inspiration now lol
If someone has problem with 1:26:03 with match, in NotePage use import { useParams } from "react-router-dom"; than const { id } = useParams(); u should be ok then.
savior!
import React from 'react'
import { useParams } from 'react-router-dom';
const NotePage = () => {
let params = useParams();
return (
Single Note {params.id}
)
}
From scratch that's awesome thanks for this video , nice content :)
Ace work, man! Thank you very much.
Awesome, awesome video!! Thanks Dennis!
i spend my 3 days to findout how to connect react to django
finally I have come to an end Thx to u
Amazing content Dennis . Thank you so much
Best video on this specific topic 🥰
Thank you very much for this great tutorial👏
Can't express my gratitude for this tutorial, thank you!
Also if you could make a tutorial or send a helpful link about how to filter objects when fetching them in react as we would when in django (notes.objects.filter(id=...))
Again, thank you Dennis
Yeah he is great!
For updated nodejs , passing params with match might not work .
This is an alternate option for that.
import { useParams } from "react-router-dom";
const { id } = useParams();
2:34:55 when using defaultValue, the state is not updating when deleting the only single character note
Also it doesn't update the state while trying to delete the whole note (greater than 1 character) by selecting whole note and then pressing delete.
It has something to do with controlled(value) vs uncontrolled(defaultValue) components.
Live Long Sir. Thank you so much.
It’s really a wonderful tutorial.
thanks you sir🔥
You make a lot less bugs than i usually do.Don't sell yourself short on anything.I've been watching your django tutorials recently
Impressive how he was able to concentrate for 3+ hours
@Dennis Ivy If you select all the text and at once and remove it, the state still contains the note body even though we have removed it. So it does not delete that note.
Great Job Dennis
Thanks for sharing this video, helps a lot!!! Hope you will do more Django+React projects
Thank you Dennis.
Thank you. I love it
Another level dennis
Simply Thank You
wonderful video,thanks,solved many problems for me
love that built from scratch
Well done!
ライブ配信ご苦労様です！頑張ってくださいませ！
Bro you are a legendary
nice video wish was here to watch the stream
If you want create project with env inside the same folder, use dot after project name.
Thank you so much
greate video... very interactive and helpful
Thank you for course.
If you want I can show you how to fix little bug to improve 'updateNote'
i wish this vid was longer honestly
I always enjoy watching your videos. You make many things sound easier to understand than others. In this stream, although you did not need to cover everything about react, or take much time to cover each related topic, you could have spent more time explaining react hooks. (You did great actually. But you could have shown more examples while explaining hooks.)
Thanks the tutorial is very helpful ........
I'm new to django and I'm willing to learn more, thanks for sharing this work. Also what vs code theme and font-family are you using?
`Github Dark Theme` is using in the VSC.
If anybody is facing a mistake at 1:28:48 then get rid of the last forward slash in `/api/notes/${noteID}/`. Should be like that: `/api/notes/${noteID}`.
Thanks for video 👍👍👍
Love you man💖.
Thank you .
Wow, that's great. Tutorial Idea: Develop a blog using Next Js and Django Rest Framework with...
1. Authentication and Authorization
2. Commenting Feature
3. Like/Reaction
125-70k man this is great video.
Thank you for this, i learned a lot from your channel, your content is really great; I have a question, i tried to use my Django API (in Heroku) and my React App(in Netlify), everything works (all CRUD actions) so i added an image field in my models and they just don't show up (works fine in developement), is there something needed so that image files could be read (like some Nginx stuff maybe)?thank you
heroku does not support image storage，you might need a third party to store user uploaded images
@@yazhouliu1366 thank you and yes i got that point.but it can keep them for the first few hours . My goal Is just the fact of displaying images just for the sake of the experiment even for a minute
In react router V6 the "match" prop is no longer passed to the element. To get the id 1:26:00 you should use useParams hook now.
how i can use it ?
@@BattlefieldTV-tp1qy Hey, if you're still having this issue the fix looks like this:
import React from 'react'
import { useParams } from "react-router-dom";
const NotePage = () => {
let params = useParams();
return (
Single Note {params.id}
)
}
You just remove the {match} from the brackets, and replace it with useParams() which gets any relevant parameters for you.
@@GameriziMm thanks
@@GameriziMm thanks
@@GameriziMm
import React from 'react'
import { useParams } from "react-router-dom";
const NotePage = () => {
let {id}= useParams();
return (
Single Note {id}
)
}
This also works
Thank you
solution for error 1:26:00
import React, { useState, useEffect } from "react";
import {useParams} from 'react-router-dom'
const NotePage = () => {
const params = useParams();
let [note, setNote] = useState(null);
useEffect(() => {
getNote();
});
let getNote = async () => {
try {
let response = await fetch(`/api/notes/${params.id}`);
let data = await response.json();
console.log(data);
setNote(data);
} catch (error) {
console.error("Error retrieving note:", error);
}
};
return (
{note?.body}
);
};
export default NotePage;
Thank you!!!
Amazing
lol thanks, I found so many shitty solutions on web, this is clear and easy, I hope it will work, I will try it later.
1:20 We can't use the component prop anymore. It was replaced in favor of element. So Please replace the line 16 in the video to
I:20:55
Unfortunately RUclips videos cannot be edited once posted. You can always revert back to react-router-5 or simply update and update to account for the changes
In V6
thanks brother
And you have to wrap your with that you also need to import from react-router-dom
and a bunch of other things. I recommend keeping the the version of react-router-dom he uses in the video.
@@scootergirl3662 which version did he use ?
Thanks.
hello i have been following your videos and they are really helpful
so i was wondering how can i build an api from a abstrct custom user
Awesome
Curious job marketability if doing django react would be more ideal vs just using django and templates
Love your content....is there any way you can do multi tenant in django
Thanks
I just finished this tutorial series (React crash course & Django back-end integration) and I think it's just perfect for beginners. Is there any resource or tutorial I could use to deploy this whole full-stack app ?
I'm working on a video on how I deployed my django app. I hope to have it up in the future, I'll let you know!
If anyone downgraded to ""react": "^17.0.2", and have encountered dependency conflict when running, (npm install) then do this :
1: Change your src/index.js file :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
const root = document.getElementById('root');
ReactDOM.render(
,
root
);
1) Delete node_modules & package-lock-json
2) npm cache clean --force
3) npm install --legacy-peer-deps
4) npm install --force
This should fix it.
Also, towards the end when crating REST API, if you get forbidden error (403) or your CRUD functionalities don't work :
1) log into your admin page and log out.
*** I finished this project with using the same dependencies as he used for this tutorial ***
This comment has to be pinned. Have been facing the 403 error for many hours. Still wondering why with logged in admin CRUD don't function well.
@@mohamedrayenkadhi5134 I am glad you found it helpful 😊.
You can use viewsets from rest framework
Yep, that also works
Thanks Dennis this was awesome what's theme are you using on Vscode
Atom one dark pro
@@DennisIvy Thank you very much Dennis
Please make a tutorial using Django Wizard Views and specially styling wizard forms. I have succesfully implemented wizardview but styling is the part i am stuck with.
One of the good part is debugging delete
[edit ] explained at 2:16:00 :)
1:55:00 I'm a bit confused about why Django doesn't need CSRF token.
I've used plain django+JS in previous project and react only tested few times without backend
I always forgot about CSRF token in django and it had me struggle
Thank you bro ❤️ please create a new project with react js and django for example blog project 🙏🙏
Hi Dennis Thanks for this great channel, I just have an issue when adding react to django (create-update-delete) does not work it's 403 Forbidden however it's the api is working standalone
I had trouble accessing id around 1:25:25. I fixed it by modifying my NotePage.js to:
import React from "react"
import { useParams } from "react-router-dom";
const NotePage = () => {
const NoteParams = useParams()
return (
Single Note {NoteParams.id}
)
}
export default NotePage
What is your wallpaper it looks really cool
Hye Dennis , can you make a new series of react and dj.. there are no new videos on this combo here on RUclips..🙏❤️
Getting the following error when it comes to displaying {noteId} at 1:25:55
Cannot read properties of undefined (reading 'params')
TypeError: Cannot read properties of undefined (reading 'params')
This was awesome.Can you make a series of instagram clone with backend django😊
Yes ;)
1:26:00 solution
import React from 'react'
import { useParams } from 'react-router-dom'
const NotePage = () => {
const {id} = useParams()
return (
Single Note {id}
)
}
export default NotePage
Having a loading issue. For some reason, once I added the links to each individual note (1:30:58ish) and I click on the link. The address bar updates, but the web page wont display the note content until I reload the page. Everything is coded how it is showing in the video. Im confused on why its not live updating.
did you solve the problem ?
Sir I have a doubt like how to get the value from combination of three database tables in the same models. Py and get the value depending on the user value
Why you don't using PEP 8 (function names)? Why you don't used just one viewset for notes functionality on backend?
I don’t like the PEP8 structure for function names, I prefer camel casing.