Django + React Notes App

[@DennisIvy]

Check out my Complete Django course! dub.sh/NvGboTI

[@muhamedsosic1229]

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:

[@ayeshariantegally342]

How did you do it to pass the params to the NotePage.js please?

[@GameriziMm]

@@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.

[@ayeshariantegally342]

@@GameriziMm got it thanks though :) ... for me the end part isnt worrking rightly... doesnt update on delete and update except on refresh

[@OpenSourceStudent]

You're a hero!

[@yogeshshrestha1745]

Thank you so much, buddy!

[@yusufgoren97]

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.

[@SUPERNOVA-vn8dh]

savior!

[@jordansteinberg9849]

import React from 'react' import { useParams } from 'react-router-dom'; const NotePage = () => { let params = useParams(); return ( Single Note {params.id} ) }

[@pablop46]

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('/')

[@pablop46]

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

[@harshwarghade4383]

Thanks a lot brother 🙂

[@jakubstrzelecki7004]

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:

[@kachigar8948]

Thank you, friend!

[@priyadharshinivasudevan5155]

Thank you so much

[@ranjaxwolf9725]

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.

[@TdadadT9]

bro, absolutly the same case :D Even experience

[@mannybarnes2053]

This was so enjoyable, even with all the errors and headscratchers lol. Thank you Dennis! You are a true inspiration.

[@DennisIvy]

Thank you Manny. The bugs are a pain but I guess that’s the risk of live streaming :p

[@vishmapdas7898]

@@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 ❤‍🔥

[@sprutch11]

@@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.

[@mannybarnes2053]

@@sprutch11 @Dennis Ivy is the best in my experience with Django tutorials.

[@SimonFabcic]

@@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!

[@mrcors3947]

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.

[@BattlefieldTV-tp1qy]

how i can use it ?

[@GameriziMm]

@@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.

[@BattlefieldTV-tp1qy]

@@GameriziMm thanks

[@Shanilka.Ariyarathne]

@@GameriziMm thanks

[@Barry_L]

@@GameriziMm import React from 'react' import { useParams } from "react-router-dom"; const NotePage = () => { let {id}= useParams(); return ( Single Note {id} ) } This also works

[@StickMan1316]

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.

[@theworldstudy2199]

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}`.

[@nischalshakya2015]

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.

[@GaneshChandra-qh2rc]

after looking for many many courses i found this as the best one to follow , thanks for the best course

[@DenzelHooke]

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.

[@avisheksharma8276]

I literally learned how to use JSX format and that's all I needed to just use React. Thank you for this awesome project.

[@saumojitbhattacharjee7292]

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();

[@believerbethechange4530]

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

[@believerbethechange4530]

I:20:55

[@DennisIvy]

Unfortunately KZbin 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

[@deemo16]

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!

[@thrilleracaste400]

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.😊

[@reddipradeepkumar1333]

Bro is any database used in this video

[@gayathrianant5165]

I'm a complete beginner. This makes so much sense!!

[@ศิวศิษย์แสงนิกุล]

i spend my 3 days to findout how to connect react to django finally I have come to an end Thx to u

[@yogeshshrestha1745]

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;

[@rd6854]

Thank you!!!

[@onemanops]

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.

[@jimmyopot1972]

Hey sir, I highly appreciate this video. Integrating Django and React is a highly sought out skill...

[@juanda4269]

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

[@ayu1323]

Loved it, Didnt know a thing about django and react just followed along and got to know alot thanks dennis

[@LNMLucasMasiero]

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]

[@multiversityx]

Impressive how he was able to concentrate for 3+ hours

[@snailprogrammer7483]

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.

[@kemalkara2386]

did you solve the problem ?

[@varunsharma7911]

@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.

[@nikhilbhardwaj6055]

In V6

[@marouaneyoussfi3560]

thanks brother

[@okch4m]

And you have to wrap your with that you also need to import from react-router-dom

[@scootergirl3662]

and a bunch of other things. I recommend keeping the the version of react-router-dom he uses in the video.

[@oceanview3165]

@@scootergirl3662 which version did he use ?

[@kaikai5356]

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

[@snailprogrammer7483]

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')

[@bunchathumbs6194]

Денис, спасибо за уроки!)

[@naturehome2087]

What a clear and amazing content. Much love and Thank you!

[@unizfrhn2803]

Yo, absolutely amazing live tutorial !!! Thanks for this so much ..... also the wallpaper lol

[@visoflo4208]

This was an amazing tutorial. So chill...

[@ankit30343]

very great tutorial Thank you Dennis It saved me a lot of hours.

[@midouwebdev2224]

As usual, an amazing tutorial Thank you sir !

[@grzegorzkalmus3629]

If you want create project with env inside the same folder, use dot after project name.

[@workacc4980]

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

[@r125l6]

Thanks a lot... Your videos are well structured and sophisticated

[@fowad27]

Anyone know how you fix 403 forbidden? around this time: 1:59:15

[@fowad27]

Solution was to log out of admin account

[@Franx570]

My solution was getting the CSRF cookie and add it to the headers like this: let CSRF = document.cookie.slice(10) let updateNote = async ()=>{ fetch('/api/notes/'+ noteId + '/update/', { method: 'PUT', headers: { "Content-Type":"application/json", "X-CSRFToken": CSRF }, body:JSON.stringify(note) }) }

[@MrTeddyBi]

@@Franx570 King!

[@Benjaminmcp0]

@@Franx570 Thanks for this! I ran in to the CSRF 403 too!

[@ethos4066]

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

[@DevBishwasBh]

Yeah he is great!

[@DevBishwasBh]

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

[@getabegaz]

Thank you Dennis for this amazing tutorial.

[@jahanasultan]

Thank you very much for this great tutorial👏

[@immeatom]

Thank you for making this. This is super helpful.

[@reezuleanu1676]

2:46:30 You cannot hear the squeaking chair, but i readjusted my own chair and it squeaked, then you just say "sorry for the squeaking chair". WHO ARE YOU, HOW ARE YOU IN MY HOUSE

[@dluca182]

[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

[@nquanta1548]

From scratch that's awesome thanks for this video , nice content :)

[@prateekmohanty8315]

Amazing content Dennis . Thank you so much

[@kachigar8948]

Ace work, man! Thank you very much.

[@genericbinary558]

Best video on this specific topic 🥰

[@mayconblopes_]

To avoid the error at 44:03, you can use get_object_or_404 function, from django.shortcuts, like this: from django.shortcuts import get_object_or_404 @api_view(['GET']) def get_note(request, pk): """get a single note""" # note = NoteModel.objects.get(id=pk) note = get_object_or_404(NoteModel, id=pk) serializer = NoteSerializer(note, many=False) return Response(serializer.data)

[@bonde6595]

It’s really a wonderful tutorial. thanks you sir🔥

[@oceanview3165]

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 ***

[@mohamedrayenkadhi5134]

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.

[@oceanview3165]

@@mohamedrayenkadhi5134 I am glad you found it helpful 😊.

[@TheCodeDealer]

Cool Thumbnails man, everything's on point 👌👌 I think I've found my inspiration now lol

[@everythingjdm8057]

nice video wish was here to watch the stream

[@PP-tc1zp]

Thank you for course. If you want I can show you how to fix little bug to improve 'updateNote'

[@Teruroom]

ライブ配信ご苦労様です！頑張ってくださいませ！

[@shiningzhang2288]

wonderful video,thanks,solved many problems for me

[@NinjaGuyDan_]

1:57:37 Getting 403 error when trying to update note :( no idea how to fix yet

[@mueezkhan280]

did you fixed it? i am getting the same error.

[@mueezkhan280]

getting the error on chrome but not on safari

[@mueezkhan280]

i just reopened the browser and it started working

[@ekkyarmandi]

some user suggest me to clear the cookies from the browser

[@Saikonautic]

@@ekkyarmandi thanks that fixed me up.

[@DJenriqez]

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.

[@everythingjdm8057]

i wish this vid was longer honestly

[@michaelbamiloshin1670]

Awesome, awesome video!! Thanks Dennis!

[@shivamathiya8384]

at 2:15:26 after creating new note why aren't we saving it? using if serializer.is_valid(): serializer.save()

[@techany3625]

1:17:00 bookmarked error from proxy need to install react-router-dom@5.3.0

[@web-dev-zargo]

YOU ARE THE BEST, MAN!!! I LOVE U 😍😂

[@vianniealeazer8]

I can't create, update or delete notes the build app its gives forbidden error. How do I fix this this

[@mickaelrichard7255]

I have the same issue

[@ZZDryno]

Clearing cookies fixed it for me.

[@vianniealeazer8]

@@ZZDryno thanks it worked

[@ekkyarmandi]

@@ZZDryno It also solved my problem! Thanks. But, how cookies affect the API request?

[@MuhammadAyaz-gp7xd]

Live Long Sir. Thank you so much.

[@carlmascarenhas4124]

greate video... very interactive and helpful

[@avirajwalunj1834]

125-70k man this is great video.

[@jdcrunchman999]

can you please tell me what the "spread operator". (...) means? Is that a part of Node.js, React, or some other part I dont yet know. I'm very weak on React, but fairly strong on Django, so I'm going to need more lessons on how to connect a Django back end to a react front end, any KZbin video references would be most helpful. If any other viewers have some useful links, please respond here, and I'll get them.

[@Diego_Cabrera]

The spread operator is a JavaScript concept. It basically allows you to copy over all the data from an JavaScript object (dictionary in python) to another object. In python this is know as unpack operator (**args).

[@jasonlamichhane2019]

Uncaught TypeError: match is undefined i get this error at 1:26:05 ....... does anyone has any answers regarding this error.

[@ayeshariantegally342]

You gotta use the 'useParam' hook ;) try researching it, if you need more help, let me know :)

[@siddharthpunmiya0705]

Hey Dennis when I updated the content from Port 8000 from django ,it is saying forbidden plz can u help me with this

[@siddharthpunmiya0705]

For those who are facing this issue Logout of the admin panel it will solve the forbidden issue i don't know the logic why but it worked this is tricky. Can anyone explain this thing?

[@sridharmallela]

I am not able to perform update, delete and create operations when i run react app on django server.i am getting 403 error(forbidden) .does anyone have a solution?

[@drakata27]

same

[@mrendus]

Why you don't using PEP 8 (function names)? Why you don't used just one viewset for notes functionality on backend?

[@DennisIvy]

I don’t like the PEP8 structure for function names, I prefer camel casing.

[@proshivamkushwaha]

Hi, I'm facing the problem at the time of deployment, I need to run two serves, first run Django Server then run React Server. Also I don't know in witch server I want to setup domain in React or Django. Please suggest me some solution to solve this problem. Thanks

[@burel5]

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?

[@kakafob]

`Github Dark Theme` is using in the VSC.

[@EUU100]

Can anyone helps please, TypeError: Cannot read properties of undefined (reading 'params') i get that error @ 1:30:00 instead of receiving the data for each note detail using the id

[@sayadahmedshaurov8639]

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.)

[@shivamsinghnegi1192]

Thanks the tutorial is very helpful ........

[@sravansangishetti975]

Great Job Dennis

[@masterbruculous]

Great tutorial, However I have this error, when I let django host my react app, it won't allow me to send a POST request, it said "CSRF Failed: CSRF token missing.". Is there anyway I can fix that? Worked fine when use react port

[@joker-jc7ug]

Did you find solution to this , please help me if you did

[@avirajwalunj1834]

you have csrf token in form right?? or use csrf exempt in django

[@joker-jc7ug]

@@avirajwalunj1834 thank you problem solved

[@alaminegueye3218]

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 ?

[@Diego_Cabrera]

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!

[@thomasmichaelides]

Following along with this tutorial and something strange is happening. When i hit the left arrow button after updating the note, it seems like theres almost a 50/50 chance that the getNotes() api call will be called before the the updateNote() api call meaning that it doesnt show the updated note unless i refresh the page? Any ideas anyone?

[@edalynjaguar7350]

You can turn the handleSubmit function into an async promise to make JavaScript wait for the promise to settle to ensure the update method is called before the page navigates back to the homepage. I done it like so: let handleSubmit = async () => { // Update note await updateNote(); // Ensure the put request is called before the get request await new Promise((resolve, reject) => setTimeout(resolve, 100)); // send user back to the homepage navigate("/"); }; Bear in mind that react dom router has updated since the release of this video so 'history.push' no longer works. Instead import useNavigate from reacter-router-dom, set it as a variable at the top of the notePage function component, eg. let navigate = useNavigate(), and then call it in your handle submit like so: navigate('/'). Hope this helps :)

[@Weiner767]

​@@edalynjaguar7350 Thanks! That fixed it for me. Is this the only way around this problem? And why does he not appear to have this problem?

[@edalynjaguar7350]

@@Weiner767 That's the only solution I found at the time - but I'm still learning. He might have been lucky, and not had the problem during development but could have still encountered the problem when testing.

[@pykidie3661]

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

[@allspirituality8471]

Hey dennis quick question after adding react to django, create-read-delete operations on django port 8000 not work what is solution?

[@allspirituality8471]

Another level dennis

[@codebytaha]

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

[@yazhouliu1366]

heroku does not support image storage，you might need a third party to store user uploaded images

[@codebytaha]

@@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

[@nootherkyle]

love that built from scratch

[@ghfudrs93uuu]

1:57 are you intentionally trying to make your code hard to debug? Ludiscrous

[@thomasvanderven6029]

How come that you don't have to do the command `npm run build` when calling your api's (in the NotesListPage.js) in the Django backend?

[@Sharaf-eg]

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

[@victoronah2158]

Thanks Dennis this was awesome what's theme are you using on Vscode

[@DennisIvy]

Atom one dark pro

[@victoronah2158]

@@DennisIvy Thank you very much Dennis

[@LearnWithBahman]

Do you separate API in your Udemy course ? Thx

[@Meshv_patel]

Which theme you are using in vs code?

[@iloveraplot]

Hello Dennis, I look up to this tutorial and model mine project similar just with Class based views ( that part I was watching your other video) , and there I used CustomeUserAcessMixin which extends PermissionRequredMixin, for restrict user by group which they are part of . Now I wanted to start React frtontend part , but at begining when I want to make API calls I got error : ,,too many redirections,, known as redirection loop. ( I think that problem is value ,,next,, of the redirect_field_name parameter from dispatch function of PermisionRequeredMixin). And one more error is there Uncaught Promise (failed to fetch). Can you help me by at least point me in right direction?

[@edgarzatarain6535]

What is your wallpaper it looks really cool

[@CP-qy1vc]

I'm getting the following error: at the 1:03:55 mark Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

[@CP-qy1vc]

nvm, figure it out, wait a little later in the video and he will explain it

[@ekkyarmandi]

Is there any body can help? why this error occur and how to handle it? "POST /api/notes/create/ HTTP/1.1" 405 41

[@ekkyarmandi]

[Solved]: I just need to remove the backlash from the urls.py for the POST request method, like this /api/notes/create

[@eneseren8332]

@@ekkyarmandi Thanks so much!!