Django + React Notes App

[@DennisIvy]

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

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

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

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

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

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

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

[@GaneshChandra-qh2rc]

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

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

[@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}
)
}

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

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

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

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

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

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

[@jimmyopot1972]

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

[@bunchathumbs6194]

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

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

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

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

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

[@multiversityx]

Impressive how he was able to concentrate for 3+ hours

[@ayu1323]

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

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

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

[@ankit30343]

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

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

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

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

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

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

[@grzegorzkalmus3629]

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

[@midouwebdev2224]

As usual, an amazing tutorial
Thank you sir !

[@TheCodeDealer]

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

[@jahanasultan]

Thank you very much for this great tutorial👏

[@MuhammadAyaz-gp7xd]

Live Long Sir. Thank you so much.

[@immeatom]

Thank you for making this. This is super helpful.

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

[@allspirituality8471]

Another level dennis

[@prateekmohanty8315]

Amazing content Dennis . Thank you so much

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

[@kachigar8948]

Ace work, man! Thank you very much.

[@nquanta1548]

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

[@PP-tc1zp]

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

[@genericbinary558]

Best video on this specific topic 🥰

[@bonde6595]

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

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

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

[@michaelbamiloshin1670]

Awesome, awesome video!! Thanks Dennis!

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

[@avirajwalunj1834]

125-70k man this is great video.

[@jameshunt8828]

One of the good part is debugging delete

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

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

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

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

[@shivamsinghnegi1192]

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

[@Teruroom]

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

[@everythingjdm8057]

nice video wish was here to watch the stream

[@nootherkyle]

love that built from scratch

[@taihatranduc8613]

Thank you. I love it

[@anwarsanusi475]

Thank you so much

[@sravansangishetti975]

Great Job Dennis

[@mentotong9652]

Simply Thank You

[@akashp4863]

Thank you Dennis.

[@Pepe-yj3ty]

Bro you are a legendary

[@thomasvu3686]

react-router-dom version 6
solution for Proxy URL section
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import './App.css';
import Header from './components/Header'
import NotesListPage from './pages/NotesListPage';
import NotePage from './pages/NotePage'
function App() {
return (







);
}
export default App;

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

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

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

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

[@hadikabalan6455]

Amazing video!! really amazing I haven't touched django in a while and this helped me remember a lot.
I have a bug in the app and can't figure out how to solve it so hoping someone here can help me. If you go to create a new note and then want to go back without creating a new note you can't, it throws a "can't read note.body when note.body is null" error coming from handlesubmit() in frontend. what really confuses me is that "If(note.body === null)" is throwing that error and I don't know what other is there to fix that. In my opinion changing "if (noteId !== "new" && note.body == "") { deleteNote();}" to "if (note.body === null || note.body == "") { deleteNote();}" would delete the new note if the user didn't want to add anything inside the note. But that solution still throws the same error "TypeError: Cannot read properties of null (reading 'body')"

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

[@DiegoMcflyGuitarist]

Well done!

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

[@drakata27]

When i place my react project into django the app is not reflecting changes without manual refresh but when I run the app on port 3000 it is reflecting those changes without the need of manual refresh

[@razmiqayelyan1497]

You can use viewsets from rest framework

[@DennisIvy]

Yep, that also works

[@Ali-xd1zl]

Love you man💖.

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

[@razmiqayelyan1497]

Thanks for video 👍👍👍

[@labka7445]

Thank you .

[@DefCantGame]

Curious job marketability if doing django react would be more ideal vs just using django and templates

[@Rabixter]

I am struggling with understanding the "update" method.

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

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

[@phamngocangkhoa1394]

const noteId = useParam(); if you are using RRD v6

[@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 RUclips 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).

[@lubnashaikh1610]

Hye Dennis , can you make a new series of react and dj.. there are no new videos on this combo here on RUclips..🙏❤️

[@hereliesadvaith]

Thanks

[@Shanilka.Ariyarathne]

Amazing

[@cosrumut2681]

Love your content....is there any way you can do multi tenant in django

[@shivamathiya8384]

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

[@gkfire9729]

I am looking a project with dj, rct, and postgresql.
Please do a video on this batch

[@developers_hub]

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.

[@jdcrunchman999]

in 2:33 POSITION, LOOK AT LINE 80

[@jaqimughal9821]

Awesome