React + Django To-Do App | Django REST Framework

[@DennisIvy]

Don't forget to check out my Complete Django course! dub.sh/NvGboTI

[@manuelpineda9067]

Man, your videos are total gems, hard to get any better source on learning Django, keep em' coming man!

[@TheFrustratedProgrammer]

before watching this video i have gone through a bunch of blog posts and a tons of tutorials but nobody explained with this precession good job man

[@faraazali9589]

Bravo! Big thumbs up for this video. I must have watched 20 other separate videos on React, hundreds of Python videos and 50 videos on Django, but this tutorial brought it all together for me. Thanks a million. It takes a beginner - intermediate programmer in this space to the next level. You've made the theory practical.

[@chrisr2063]

Damn guess i should have read comments first. But at least you got my finally comfortably starting react projects! I will continue to entertain. Update: The connection between react and django is really clear in this video. Thank you. I was able to successfully follow through.

[@ayoubbarkaoui4311]

Thanks a lot Dennis , your videos are now the official documentation of Django, I ve always been stuck managing django and react, but u ve made it keep going man we love u

[@shuvo0201]

Awesome man! I like the last part django serving react app.

[@ashokbabug40]

Please make a playlist on django as backend and react native or flutter as front end

[@alter.nativotech3823]

Yeaah!!! Completely agree with this!!

[@nafiyad1950]

Let's goo

[@mysteriousstranger2548]

i second that

[@ProSimples]

🤦🏽‍♂️

[@jhoanmartinezsilva2609]

React native

[@jacobmoore8734]

50:49 for run build & complete configuration

[@nerrawbox]

This is really great and comprehensive tutorial! I made a project with this video, but one thing I can't figure out is how to host this to heroku. Can you please make a video serving these django + react app to heroku? Thanks!

[@kardeslermc-berk583]

I thought that too, its 2 different application. One of them is sending api request to other and it seems like they do need 2 different seperated server or something. Or do we have to change the localhost:3000, or localhost:8000. That part is confusing too.

[@RoylanMartinez]

I have exactly the same question :(

[@nerrawbox]

Was able solve this problem with this tutorial. kzbin.info/www/bejne/qGGodKiceN6sr9k

[@mudassirkidwai8963]

More React with Django videos.This is awesome stuff.

[@virgiliomurilloochoa2884]

this is actually a great way to learn. no need to wait for someone to write code

[@NOTHING-en2ue]

never saw any teacher like this django was boring to me but you made it a lot easier thanks a lot ❤

[@gavinjboyd1]

Thanks, followed the Django rest, then this one. It was really helpful for quick React revision

[@julianbazanaguirre8439]

Thanks a lot again for such explendid content!! I don't know if I told you already but I am working as a (mostly) junior backend engineer using Django and Django REST (but also some backbone JS) and all thanks to your amazing tutorial for Django for Beginners! ( I told the guy who hired me that I knew Django solely based on that content hehe). 2 months into the job, struggled a bit at first but know I am feeling more confident everyday. After doing most of your tutorial (haven't completed it yet) I went on to learn React and I loved it too. Great to see this tutorial, I am also feeling proud of myself because this time I took it mostly as a guide, I saw how you made some of the functions like create, or fetch tasks (both for React and for DjangoREST) and then I went and tried to complete the other ones on my own and it is working. Such a relieve to know that after hours and hours of study, and thanks to guys like you, I can definitely say that I am advancing in my career as a rising Software Developer! You are helping a lot of people out there! Let us know how we can contribute to your effort! By the way: that connection between Django and React to run everything from Django Server: priceless! jeje thanks!

[@demehinibukun1445]

Awesome tutorial.... I was able to follow the tutorial and actually using hooks and functional component in the react side

[@perveenneha1423]

hey even i am trying to implement the same . if possible cud u please share the github repo of the same . that wud be of great help

[@thompsonmanda]

Wow... I watched your roadmap video and apparently I have used the same path! Next up I will build this Todo App

[@madceee]

Thanks for the video bro, more tutorials about Django and react would be great, aaaand thumbs up of course

[@DennisIvy]

My pleasure :) I'll keep blending django with react in future videos

[@murshid9033]

@@DennisIvy looking forward to it😘

[@debojyotichatterjee4421]

Thanks a lot Dennis!! Enjoyed it... Gonna do more !!!

[@liambrem223]

Love these Django tutorials. Keep up the great work

[@kushalk5248]

THANK YOU SO MUCH FOR THIS TUTORIAL. This helped me immensely on my project.

[@rahulmuppirala6687]

Thank you so much for this tutorial, especially django class based views explanation, I keep on referring it everyday for my projects. Also the django - React integration videos are awesome. Please keep them coming.

[@theshubhagrwl]

Use hooks to reduce complexity. Instead of binding, we can simply use arrow functions.

[@DennisIvy]

I have some clearing up to do on my react skills :)

[@rahulpokhrel3824]

@@DennisIvy hello, i can't update nor create a new post after i merge both project ! why? but data are been fetch and delete function works.

[@simonm17]

I've actually read that while most people use arrow functions, the React dev team recommends binding as seen in this video because 1. performs better and 2. there are times when you don't want to autobind methods.

[@rma9490]

I really appreciate for your work, Dennis. It works successfully :) thank you and keep it up!

[@technoinfoworldwide2329]

When i came on this channel, it had only 500+ subscriber ..What a drastic change ...The subsctiber had increased due to your faithful reply either from comment or gmail..and next one is due to your CRM course...Keep going bro😊

[@DennisIvy]

I appreciate your constant support my friend :) Though it is getting really hard keeping up with comments and emails ;)

[@dericmiano9516]

THANK YOU FOR THE LESSONS REALLY HELPING SO MUCH

[@touchtbo]

Thank you once again, how can one man make such useful videos? incredible!

[@waleedabdulmanea5301]

Thanks a lot Dennis, you are one of my best mentors

[@kasiaromaniuk7280]

This is brilliant, you are such an inspiration to me - love your videos and the way you explain things:)

[@Andrei-vc1gq]

Thank you Dennis, this was an excellent deep dive into react with django!

[@ajayreddykanduru453]

This video helped us complete our project. Thanks man

[@doremon2611]

Thank you! I learned many things from your tutorials. Use arrow function for class method so you dont have to 'bind'.

[@vikassanwal1818]

Yes bro! you are right. Using bind is tedious. Arrow functions are awesome :)

[@balogunolajide7204]

Thanks so much Denis, pls more tutorial on Django and react on web development.

[@mdbelalhosen5898]

love it.Waiting for next video on django rest api token based authentication.

[@CodingAfterThirty]

Just found your channel through Traversy's channel great stuff. I just recently landed a part-time side gig role working with React on the front end. But they also work with Python and Django on the backend. Will have to check out the other video too. But will definitely help me get more hours from the client as I start getting better with Django.

[@theodorenegusu418]

Tnk u very much django-cors-headers saved my life 😎

[@Copt774]

i might have missed something but i was getting an issue when i tried to post updates to items on the list, it didnt recognize an id value, so after plenty of head scratching i added a constructor 'editItemId' which takes in the task.id value which is passed through the startEdit() function as an argument ... im not quite sure what i did wrong but it was a nice little 2 hours detour figuring out how to get this to work. Alas that's how i learn ! Thanks so much for the great video. I now feel confident i can integrate REACT with DJANGO's rest api framework

[@Iska99612]

Hello Dennis, Thank you for the awesome tutorials. Also, is it possible to deploy React and Django together?

[@rangabharath4253]

Thank u so much Dennis. Learned a lot from u.

[@arunh3]

Hey, Awesome Video, I had a different to-do list front-end and used this video to connect it to the API. It have all functionality except edit. Everything is working except striking, it gives 500 ERROR (Internal Server Error). Any Idea why?

[@darren1107]

I kept getting a CORS error until I added port 8000 instead of 3000 when building. Great guide, keep it up!

[@colorwrld4867]

Thank You For this video, I can't wait to learn a lot of stuff from it.

[@ezj-ge8nl]

Subscribed! Great content, keep up the great work!

[@DennisIvy]

I appreciate it!

[@macas-academy4712]

Thank you Dennis, i've learned a lot, altough i have done this using CBV's (only two views, and two urls), i don't know why you did it otherwise ??

[@pete_99]

At 20:07 for anyone who is still getting 3000 blocked, the latest corsheaders uses CORS_ALLOWED_ORIGINS not CORS_ALLOWED_WHITELIST.

[@Chinmay_395]

great tutorial; cool intro btw

[@sidneyeubanks8224]

Thanks for making this. Excellent video!

[@danishmirza782]

Incredible Remember? You said that you will make videos on html, css, bootsrap

[@nikhilmahajan4129]

100k soon🔥🔥🔥

[@MOI-su4lx]

Hello Dennis, a small doubt... Is it possible to merge both Django and react in a project, where Django does backend and react goes for frontend... And where react can get Django commands such {{}} {%%} ... Is it possible? Thank you.

[@MOI-su4lx]

I mean without using APIs

[@namanjoshi5089]

hey man! Got any leads>?

[@MOI-su4lx]

API are the only logically possible ones

[@namanjoshi5089]

@@MOI-su4lx Thanks man!

[@patloeber]

Great Tutorial! Keep it up!

[@DennisIvy]

I appreciate it :)

[@tariknavarro87]

Thanks a lot! Greetings from Brazil!

[@zaursuleymanov5921]

24:16 where we got these classes? you said that from bootstrap but we didn't use bootstrap

[@AverageConsumerReviews]

Thanks awesome tutorial! One quick thing - it's better to use componentDidMount instead of componentWillMount because that's the standard lifecycle method to call for fetching data from the server according to official documentation. Also the componentWillMount will be deprecated soon so we should be moving away from it.

[@AverageConsumerReviews]

one more thing - at 38:55, the arrow function for the edit button onClick={() => this.startEdit(task)} works just fine without using self

[@aliasgar.burhani1099]

Can we use funcctional component instead of class based components???

[@davidtang5439]

Thanks so much Dennis, l learn so much from this video!

[@DennisIvy]

Glad it was helpful!

[@syedrayyan8130]

Update and delete method is not working sir...its getting method not allowed in console...what to do

[@siddharthmeyan9625]

found any solutions yet?

[@syedrayyan8130]

@@siddharthmeyan9625 read rest framework docs

[@lammaibasri6844]

Hey Dennis, Thanks a lot for your videos. Do you have a video explaining how to Host a (React + Django rest Framework) application ? Thank you an advance

[@SreebashDasFitness]

Thank you so much for your effort! Waiting for next..

[@DennisIvy]

Your very welcome :)

[@darren1107]

I think this is a stupid question, but after 'building' the project, is it possible that I can still edit the code for both front and backend? I'm wanting to use things I've learnt in other tutorials to build on this project a bit more.

[@DennisIvy]

Its an honest question :) The answer is yes. Have you deployed your app to a server yet? If you just have it locally you will just need to "run build" again.

[@darren1107]

@@DennisIvy so I would have to keep running build to view any changes? Any shortcuts to this?

[@aissaouboukioud585]

Thank you so much for this video I was think how to merge react and django, and this video helped me do that, one question though wouldn't be better to change all the urls in the fetch API to relative urls before running (npm run build) ???

[@chetankharel4435]

Great.. but there should be React Hooks version of same app too 🙂

[@DennisIvy]

Haha it's hard to get it all. Everyone has their preference :)

[@chetankharel4435]

@@DennisIvy really inspired by your previous video :)

[@chetankharel4435]

@Paul Rogers thanks appreciated

[@mahmudsajib8648]

Hi Dennis, nice tutorial. Wondering if you have plan to build a bigger project using react & django. Like building a Medium clone or even an Airbnb clone. 😉

[@DennisIvy]

Yes definitely! Not sure which one though, I might make two versions of the dashboard I sold. Many people want to see a tutorial on that but don't want to use React.

[@TheAremoh]

@@DennisIvy I'm buzzing to see this.

[@mahmudsajib8648]

@@DennisIvy Appreciate your effort a lot

[@o1-preview]

@@DennisIvy please keep going! I work with django and drf and I love to see how both sides work! I'm subbing btw

[@ahmedsohail9855]

I would suggest if you make more videos on authorization, authentication security in Django rest framework will be more beneficial

[@ashleyadrias]

came here from the CRM course! do you have any suggestions on good places to start learning the basics of React? Do you suggest that we learn vanilla javascript first? Also how would you deploy this on heroku?

[@ashleyadrias]

woohoo! If anybody is interested I figured it out using this tutorial of deploying a Django + React App with Heroku : kzbin.info/www/bejne/qGGodKiceN6sr9k Here is my Dennis Ivy React + Django To-do app : ashleys-todos.herokuapp.com/ Thanks for all your help! I dont see the "buy you a coffee" link on your website anymore?

[@bryandadiz5677]

is it possible to combine two templates from Django templates and react Templates?

[@nijojoseph]

hai Dennis Thanks for the tutorial. But i have a problem with merging django and react its showing manifest.json not found. Also post, delete forbidden.

[@LIMLIMLIM111]

Were you able to resolve this issue? I have googled for the error but none seem to apply to Django + React.

[@nijojoseph]

@@LIMLIMLIM111 try very academy channel in KZbin. I think it's good for drf.

[@menottitrades]

@@LIMLIMLIM111 did you find it?

[@LIMLIMLIM111]

@@menottitrades I did figure out that: 1. manifest.json is for mobile compatibility as an ios or android app. It essentially figures out what thumbnail to display on an mobile device as an app. 2. You can turn off the warning after npm run build by removing the link tag (its a link tag that references manifest.json file. cntrl+f and type manifest, its the first result that comes out) But then again, I dont fully comprehend what kind of ramifications follows after 2. as I am building web app. So far, its been working without single issue.

[@menottitrades]

@@LIMLIMLIM111 thanks a lot, i will try it!

[@shri9229]

Also if you are missing on why your update is not working, maybe you have missed a '/' symbol on you task-update backend view in django, you can either correct that or correct the same mistake in frontend. Your welcome, I found it very later after checking the API multiple times.

[@hassanrasoolsiddiqui1325]

Would appreciate if you can do the same with VueJs and make a video on it.

[@DennisIvy]

Thanks for the recommendation. I'll need to do some studying with Vue because it's highly requested with :)

[@rameshdahal7339]

@@DennisIvy A lot of people will appreciate that

[@attilluss]

Hello I have issue with method componentWillMount() I think its deprecated and not sure how to refactor it Inspect say: "Move code with side effects to componentDidMount, and set initial state in the constructor" Is there some available moves which can help in avoiding such error message prompts?

[@iUmerFarooq]

Hey bro, I just came here to learn *How to build Apps using Vanilla JavaScript or React js or Node js or Angular?" I hope you will make a series on it! Thank you 😊

[@DennisIvy]

Are you looking for something with just react and no back-end? Like a React overview?

[@iUmerFarooq]

@@DennisIvy yeah you are right but if you could make a backend using Node js it'll help us to know how the Node js use on backend! Or Even happy with just Reactjs also.

[@eltequilero_]

This is awesome, thank you! Possible to show this deployed to Heroku?

[@sagargahatraj5196]

Hey Dennis Is there any disadvantage of using Router or class based view in DRF

[@khongthefork]

In handleSubmit, instead of making another expensive API call >>fetchTasks

[@blogblocks8370]

I have tried over and over but can not get a Two line comment to work. I know SQLite3 normally will save the format of text inserted, but with this app it does not ?? Every day, I use an app I made, to store code snippets. What makes this one react differently day . Paste multiple lines and only one comes out

[@lymmontijo87]

This was so helpful. Thanks.

[@DennisIvy]

You're welcome Lymari :)

[@FullStackDevGreg]

Thanks so much, please you said you are going to publish also the jwt authentication if it is available may I have a link. I got almost no bug with you teaching

[@alexescasinas1584]

Do I still need cors-headers if React and Django are merged together? Both served at port 8000

[@englishtechnique4813]

Hi Dennis I am learning python + django , could you please let me know if i want to show a restaurant menu list on page what i need to do . what i did i created a tuple and iterating items through for loop and i want to bind that list to view page but i am unable to do it could you please help me. could u please upload a video . how to pass data dynamically and store in db. Hope to hear from you

[@akashp4863]

There is no build folder in github repo. anyway it works when i run npm run build in frontend directory. but when i run python runserver command it says template doesn't exist

[@arslanbekametov4251]

Denis , got question, im workin on a project [backend=django, frontend=react, db=mysql] , my created my models in django, set up api endpoints, and im getting my data from db as json, but I want to get them exactly like django does it in its admin panel, for example, if model has foreign keys, or manytomany fields it automatically gets corresponding data from referenced table, in react it gets its id 's of referenced table, I'd appreciate it brother!

[@veeracilambanv6464]

Why favicon is not displaying in port 8000, I have been facing this error for long time, please give a solution for that

[@jayhu6075]

Thanks for this tutor. I am a beginner in Flask, but try to learn also in Django. I am not a React fan, some i use the Javascript, but that doesn't matter. Hopely that you can make tutors about sample data in different chart tools to visualize the data.

[@DennisIvy]

I have this same app using just JavaScript also :) I'm working on a video making a full dashboard with charts.

[@jayhu6075]

@@DennisIvy Thanks for your feedback.

[@rangabharath4253]

@@DennisIvy Waiting for this

[@hidhayaths]

Thats wonderfu!! how can we disable those edit & delete buttons when the task is marked as completed... i have tried something like the tag but that did not work. can you please help me on this?

[@toyinatofarati5512]

Pls I'm getting this error: Template DoesNotExit at /

[@dartisantechhub8337]

make sure you run npm start for the frontend (as your server runs for Django --> python manage.py runserver) ... Django is handling the backend for this project, whiles react handles the frontend ... don't expect Django to load templates we haven't created for this project.

[@TheAremoh]

Thank you so very much for thisvideo. Very helpful. I have a question on deployment. I successfully deployed my app to heroku, but each time I make changes, all my registered users can't login again because they are wiped off from the database. Though I switched my allowed host to local while editing and switch back to my app when I'm committing to heroku. Is that the reason for wiped out users?

[@DennisIvy]

What db are you using? are you uploading an SQLite database to heroku from your local app?

[@TheAremoh]

@@DennisIvy yes

[@osmaralejandrobetancourtav6683]

Hey man! Thanks for the tutorial. I've been looking for hours on how to deploy this project to heroku and didn't find anything that works for me, they all didn't work. Do you have a video where you explain it or could yo tell me what to do? Thanks for your tutorials!

[@kennethappiah2780]

I think you did not get the csrf token error because you used the cors package. It whitelisted all request from the port 3000 In your last tutorial with vanilla js. You did not use that cors package, that was why you needed to add the csrf token cookie. Awesome tutorial

[@DennisIvy]

Hey awesome feedback! I'll have to try that out :) Felt pretty dumb not being able to explain that lol

[@samhithkakarla8993]

hey dennis, how did you push this entire project to github? i followed the same file structure as you but when i try and push to github, the react app gets saved as a submodule and doesn't show up in github. I did git add . from the root directory and then pushed to my repo. I also used create-react-app like you did

[@nikhilmahajan4129]

Thanks for the quality content dennis..#dennis_my_Inspiration🤗

[@jacobmoore8734]

Would love a 2022 reboot w/ React Hooks!

[@vitaliisyvashchenko7641]

hi any chances to rich succes in US with css/js/wordpress skills?

[@DennisIvy]

There are many job opportunities that require all 3 of those and also the ability to create your own product :)

[@jitendradevat6131]

Hey Dennis Ivy, I am not able to setup virtualenc ......I am geting " No module named virtualenv "

[@pierolp1202]

Did u install virtualenv module? Use: "pip install virtualenv" and then try it

[@krivalex]

Thank you, amazing work, и русская фамилия твоя тоже ничего Иванов)

[@RahulSharma-ox6se]

The favicon just doesn't show up when I run the application on the wsgi server. But it does on npm start or if I upload the build folder to netlify. Need help!!

[@שיאברהם-ח1ז]

go to frontend folder do : npm i (it will run for a few min) after all good(no errors or so) do npm run build now you have that build folder and you can go back 1 folder with cd .. now do python manage.py runserver and you have full app(front+back) on port 8000.

[@reginaldxorsenyo4806]

Any reason you choose react js over vue and angular

[@fabmeyer_ch]

Hello everyone Do you have experience with Graphql / graphene as an API for connecting react and django? Which one is easier? rest or graphql? Which one is better in terms of performance? Thanks

[@DennisIvy]

Sorry I have looked into Graphql and studied it but never really applied it so I cant give the best answer. I'd be curious to know myself. When I learn I might put a video together on this :)

[@fabmeyer_ch]

!@@DennisIvy Thank you for your answer. Really dig your content!

[@anils1383]

Hello Dennis, Thanks for this wonderful tutorial, Dennis, I have an issue with my code, after installing "pip install django-cors-headers" and adding all the necessary lines in settings.py file, i get the same issue, "origin 'localhost:3000' has been blocked". i spent so many hours trouble shooting this issue, can you please help me on this. Regards.

[@anils1383]

Hello Dennis, I found a solution for the above issue, i opened "env\Lib\site-packages" folder and deleted django_cors_headers folder and reinstalled "pip install django-cors-headers" and in the settings.py file "CORS_ORIGIN_WHITELIST" I changed in from 127.0.0.1:3000 to localhost:3000, by doing this change it worked for me, Thank God, Dennis am i doing it correctly, can you please guide me on the above solution

[@cmj3153]

@@anils1383 Thank u.

[@rahulpokhrel3824]

hello, i can't update nor create a new post after i merge both project ! why?

[@anils1383]

Hello Dennis, thanks for the video, can you please make one complete project using Django and React JS, this will be very helpful