Django + React Notes App

Continuation of my last stream (React JS Crash Course) but now with a Django backend using the Django REST Framework.

AVAILABLE COURSES

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

[pablop]

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

[jakubstrzelecki]

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:
<Router>
<div className="App">
<Header />
<Routes>
<Route path="/" exact element={<NotesListPage />} />
</Routes>
</div>
</Router>

[mannybarnes]

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

[ranjaxwolf]

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.

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

[muhamedsosic]

Some updates, I had problem at 1:20:30, in react-router-dom version 6 there are a few difference now:
* A <Route> must be used as the child of <Routes> 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: <Route path="/" element={<Home />}></Route>

[yusufgoren]

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.

[avisheksharma]

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

[saumojitbhattacharjee]

For updated nodejs, passing params with match might not work .

This is an alternate option for that.<Notepage>

import { useParams } from "react-router-dom";
const { id } = useParams();

[StickMan]

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.

[GaneshChandra-qhrc]

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

[deemo]

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!

[thrilleracaste]

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

[jimmyopot]

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

[sybxlcl]

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

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

[kaikai]

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

[nischalshakya]

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.

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

[gayathrianant]

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