Django and React Tutorial // 1 - Creating a Fullstack Application

[@mattfreire]

*** Please note this video is over two years old. I've left it up for those of you who might get value from it but be aware that packages update and things change. It could not work for you and that might just be because the tech has changed by now. We have a recently created (2020) course on our website that covers how to build web applications with Django and React. It is a paid course but the value you get is much more than this old tutorial. If you're interested check out learn.justdjango.com Thanks for your understanding! ***

[@aloudiakite1217]

Hi, great job. However, I think it would have been better to include a monthly subscription than yearly alone.

[@mazenahmed4495]

5 years old and still one of the best playlists

[@betteratcoding]

why would anyone downvote this tutorial? This is priceless information. You have no idea how many hours you just saved me. Thanks.

[@Guinhulol]

Zacarias Ripoll Cid Pure jealousy!

[@BreadWinner330]

Vue cultists 😩

[@crlshn]

@today there are 35 downvotes, that *siri* don't get...great info, great speed,... to the point and explicit say is basic.. still need token auth/redux and things ... this 1h tutorial es basico..and is great!.

[@supreetpp]

Some people had a very bad day and wanted to share it with us. 😂

[@conorbyrne2101]

They are nodejs developers of course 😂😂

[@wolfisraging]

Man your channel is the best for learning anything related to django, marvellous work. Thanks

[@nurbektaizhanov4534]

+

[@SWAGER1811]

Honestly one of the best tutorial, watch this... avoid the other once. They will mess you up

[@kahinakram]

Damn, I have never been so immersed in a tutorial before xD Such calm and nice voice with extremely pedagogical explanations! Thank you!

[@RahulGupta99]

This might be 2 years old, but it's very nicely done. If you follow the steps, and understand the sequence, it's a fantastic tutorial.

[@gantiphani7920]

This is awesome. I was looking for Django + React tutorial and here it is. Great job !!

[@barictj]

Say dude, you made this way easier than anyone else has for me. I really appreciate this great tutorial.

[@tungleanh9993]

oh man, I try to figure this out for weeksss... thank you, just watch 60s in the middle of video solve my problem.

[@saitaro]

Your work is gold, you rock, I love you, please live long and happy life, this world needs such people.

[@llewellynhattingh3496]

South Africa FTW! Great job man, have been looking for a tutorial like this

[@ioan-dumitruhadarean1483]

I am honestly gonna watch all your videos. Quality teaching.

[@Whateverworksism]

Thank you good sir. Informative thus far. Perhaps a bit too quick but I just stop the vid and read some more documentation before I understand what you're doing - and why you're doing it - before I move on. Works a treat! Thanks again.

[@AshutoshSingh-fy2xc]

The only best video for react along with django

[@Dor0]

Very nice tutorial. Most complete for starting a Django+React App I've found. Took me 3 hours to follow, but it was really useful

[@keithandrelashley]

I am liking this so far I would be interested and seeing more videos with Django and Flask Rest API and React front end.

[@rgenericson5361]

Agreed!

[@vijayrajput3297]

One of the great tutorial ever 🎉🔥 Thank you so much for creating such wonderful video ..

[@Colstonewall]

Great tutorial. As much as I've used Django in the past, I've never used the Rest Framework. I'm thrilled to give it a try.

[@iangardner9876]

Hahaha, the closing the tabs "that should be... enough amount". So relatable.

[@songfanhuang2754]

Thanks for this great learning course for React + Django. I have been trying to learn Django + React for long, reading books, watching video and could not figure out. with this video, i finally picked it up in just two days. Cool. (like)

[@devensutcliffe]

Excellent Tutorial, thank you so much. I can't wait to tuck into #2.

[@OladipupoPopoola]

Absolutely loved it. What a great way to start my weekend. Thanks buddy.

[@mehtarjt]

Very well made video! Thanks for sharing clear and easy to follow instructions

[@RaphaStout]

Very clear and working like a charm!

[@jayamankrah4328]

Perfect and clear explanation, thanks buddy. I love the way you teach.

[@Gameryt-v-ishak]

God bless you Sir for sharing information of Django

[@perseyiis]

The best django channel I've found !

[@crosscoss]

If anyone has issues with the part at 34:00 where even after installing the django cors headers they are still getting CORS Errors on their request, even after setting everything up, here's what you got to do: Try opening an incognito tab and navigate to localhost:3000 and see if you can actually get a response like this. If that works, then just clear your browser's cache and it should work. If that didn't work, make sure the cors middleware is at the top of the list. Make sure you have the `CORS_ALLOW_ALL_ORIGINS = True` line at the end of your settings.py file. Hope this helps anyone struggling with this.

[@Eyenn_n]

Thank you very much! This video is so clear and so helpful! Really really appreciate it!

[@comunicloud30]

Dude, thanks so much for you exist. I wish God bless you a lot.

[@qa337]

14:00 Author: “Create Serializers” Siri: “WHAT?!”

[@MacKoslowski]

Immensely helpful, and right when I needed it. Thank you so much

[@nicomagliaro]

Really nice, detailed and strightforward tutorial for newis. THANK YOU with big capital letters!

[@csjoy4682]

thank you for your better explanation.

[@parthmishra2531]

Good video!! Really helped me integrating React into my project.

[@abdelazizbounhar8030]

Super awesome !! Good job !!

[@DEGENRUST]

React Router version 6 really puts a damper on the code around 37:00. Do you have a source or anything that would help recode this to V6's new requirements?

[@arnoldwolfstein]

Best Django+React Tutorial! Thx a lot!

[@Murga_Mutton]

Please make a video on deploying this app. Thanks. Great Job!

[@dexter6081]

oh may gosh, this is awesome, thank you man

[@daleyc.3008]

What keyboard are you using? Sounds fantastic.

[@opmarketing.digital]

Great job man, really nice tutorial. PS: Love the hide ASMR on that keyboard

[@HongNguyen-qg4ys]

Your videos are extremely helpful. Many many thanks !!!!!

[@Thesrik23]

Love you man! Awesome one. Can you please make a video on Django celery Redis integration and app built on it?

[@mattfreire]

Thanks man. Yeah I’ll take a look

[@Paul-qn7qv]

I am a beginner in React, but why wasn't `state` been declared inside a constructor at 32:20?

[@tomcrossley315]

Fantastic tutorial, thanks!

[@hamyazilim]

nice and clear tutorial.

[@zayansplayground5301]

could you please show how to create/register user from the front end and how to login-logout? btw you are a fantastic instructor!

[@mattfreire]

Thanks. It’s covered in the third video of this playlist

[@zayansplayground5301]

ok great! keep continue this series with some more advanced features.

[@julianbazanaguirre8439]

I created the .vscode folder and then the settings.json but only a normal json file was created, in your video it looks like by magic you already have a lot of info created there as well as user settings and workspace settings.

[@vaughanscott6233]

Hi @ 11:22 I get the following error when trying to run server: Not Found: / [07/Aug/2020 14:37:43] "GET / HTTP/1.1" 404 2031 I used npx create react app instead of downloading create react app as that whas what the create react app webpage suggested. Could this have caused this issue or did I maybe miss something?

[@eagleofsharm]

Fantastic, thanks a lottttttt .

[@Mostaqmahmud]

It's completely satisfactory tuts...

[@gardedesombres3254]

Thanks a lot man !

[@attin83]

Great job, thank you for this tutorial.

[@malikbrahimi7504]

How do you setup CSRF in a restful environment?

[@MandeepTondak]

great video to start with react + django

[@raffvirdo4821]

This was great. Thank you!!

[@ashrafulfuad2967]

so much helpful thank you sir

[@bayasaakop1737]

Thank you for tutorial. How can i upload my project to git. When pushing my project into git, only the backend is getting pushed.

[@emdadsarker4742]

hello sir, the last three courses from the playlist of yours has been removed. As a beginner I want to start your all django series from the very begining. So, will you please re-upload or give a link of those series. It will help me a lot. 1. How to build a website with Django 2. Django Rest framework + Json, Ajax 3. Django Intermediate

[@alihusham1560]

03:45 official documentation say you should use python3 -m venv env

[@maximilianocarreno7461]

Congratulations for your job!!!! your page is nice too.... Thanks!

[@aBradAbroad]

Top notch. Thank you very much.

[@lewismachilika5547]

this is great work it helped me a lot

[@chieeeffaatecchh6187]

More tuts please. You got a new subscriber.

[@hasanozturk6087]

I think, it would be better to show what the final application is going to be look like, at the beginning. So that, people can get motivated or understand what they will learn.

[@AbhishekKumar-mq1tt]

Thank you for this awesome video

[@ichbinderkonig4049]

Great job man. Can you please make one for creating and updating?

[@mattfreire]

Will try have it up soon

[@ichbinderkonig4049]

JustDjango thanks. It's probably a lot but can you please integrate authentication with jwt too?

[@mattfreire]

I’ll probably do it in a separate video but will try get it up.

[@ichbinderkonig4049]

JustDjango good. Thanks

[@eduardofernandezdiaz5264]

I'm adding this wizard to my subscriptions. If he uploads a video of creating and updating I'll have to go mount Everest and put a flag with his name on top of it lmao

[@luisweber976]

Are all swrializers made like that or are there variations

[@jorgeaugusto01]

Excellent Job, thank you!!!

[@dainorablue]

Amazing tutorial, thank you!!! :)

[@Didneodl]

Thank you for the great tutorial! While watching it, I came up with a question. In that way from the tutorial, isn't the API accessible for anyone who know the API url? Is it safe for security?

[@mattfreire]

Yes the API is open but only for development mode. In production you would specify your front end server (firebase for example) as the only whitelist url, which is secure

[@quasa0]

@@mattfreire, why though? I mean isn't this API supposed to be called from the user browser and not from the frontend server?

[@mattfreire]

@@quasa0 The user's browser sends the request, which comes from the domain you are on. So in the backend it will see that the request came from the frontend

[@aneeshpanil]

Great tutorial, thanks

[@aditya-bl5xh]

Hello everyone, I'm developing a project in which there are some users and some clubs where the user will be able to join and follow it. But, I'm kinda stuck in this, because idk how to create these clubs, I mean to create a new model for them or use any existing feature of django. Please help, I'm college student

[@zhh174]

Bro you are genius. how u learned so much frameworks?

[@mustaniram6735]

Thanks. Great job.

[@vijayrachakonda8411]

Would this code structuring also work for Django+React Native? Can you still put the front end and back end all in one project folder?

[@jaideepsingh7955]

Sir can u please tell how to display a model(database) entries list as a FORM, so that its values can be edited. i actually have a db for participants list that includes a column for attendance. later at the event i want to mark attendance, so i want to b able to edit that column from the website and resave/update that db ?????

[@gazimorshed6678]

please update your video on DJANGO SALEOR CUSTOMISE and deployment.

[@deadfool6105]

That's awsome.. 😊😊😊😊😊

[@ChumX100]

Awesome! Very Clear! Have you tried using GraphQL instead of REST as API technology? You could use graphene on the backend and Relay on the frontend. It would make for a great tutorial I think. Also, right now you have two servers running, one with node for delivering the react app and another one with django serving the API views. Have you tried to setup django so that it serves the react app? This could simplify deployment.

[@mattfreire]

I’ve setup graphene before. Could make a tutorial on it but will have to see. I’ve setup the Django project so that it serves the React app but for a development workflow I don’t think it’s great. Check out a video but codingforentrepreneurs to see the implementation. You land up needing custom scripts in your package.json file to build your React app and move it to your static files. A good workaround but not something I think is nice for developing because you’re constantly running scripts. Rather have them as 2 separate servers in the beginning and then when going live you can merge them, as you’ll see in the fourth video being posted today

[@julianbenegas512]

@@mattfreire Yeah. I've seen some other tutorial that sets it up all together and it was quite confusing. This one is simple and straightforward. Love it.

[@remy8587]

@@mattfreire Although if you have two separate servers, its not a "Django with React" stack, it's just Django DRF and React that happen to be communicating with each other using API calls. What would be interesting is to connect them within Django itself so that you can use Django's authentication for example instead of reinventing the wheel with JWTs (that are less secure than cookies).

[@jazabc.9014]

Did you end up learning graphene integration? I would love to ask some technical questions about graphene

[@ChumX100]

@@jazabc.9014 I got it working, but dropped it after some testing. Some queries where performing really bad and fixing them would require some low level tinkering, which would kinda defeat the purpose of using GraphQL in the first place :/ Anyway that was a year ago, maybe things are better now, how did you find the library now?

[@theefamiliar3497]

Haha, I love that your channel is specialized in Django, but it makes me laugh whenever I think that you have probably spent more time (overall) doing React stuff )))

[@TheDrunkenmaster44]

I was following along, except my model had a charfield() and an Integerfield, so it doesn't output even though it recieves the data :(

[@xXHelsingGamingXx]

I love that you have used VS Code!

[@jaymartinez311]

In vscode what extension are you using for your Powershell? Meaning you have syntax highlighting and other cool stuff.

[@mattfreire]

+J Martinez I’m using a bash terminal but I haven’t added any extensions for it

[@jaymartinez311]

I know your running two terminals. I figured the one you had the frontend stuff is the react one but the one I was speaking of was the one in vs code. The backend terminal. I purchased your course on Udemy by the way and thanks for replying. Have a great day!

[@mattfreire]

@@jaymartinez311 Thanks for the support!

[@AbhayKumarSrivastava]

Great Tutorial. Could you please point me to the source code for frontend ?

[@LordFullStack]

Hey , i will love it if you please do a Vue CLI and Django integration . i need it please !

[@santiagotorres6929]

Awesome video, but I'm getting an error at the time I tried to implement the data from the API, it doesn't appear on the content. Hope I can get an answer soon

[@gurudasshinde9059]

Thank You soooo much for this video

[@adithyadinesh1996]

Is there a way to use Django Rest Framework for Django Functions.

[@CanerTrksln]

Firstly , thank you for video. When I install each module example antd and axios npm is does not working.I am deleting node_modules , I am installing npm and latest I am re-install modules(axios ,antd or anything).What would you suggest ? I am using Linux and everything is okay(django,react,npm)

[@teejaay_me]

Couldnt success the get request even after installing,configuring django-cors-headers. "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 127.0.0.1/8000/api/. (Reason: CORS request did not succeed)."

[@peteserz6997]

around 43 minutes: Why did you change the single quote in the axios call to " ` ` " ? obviously i tried that and it worked, but we didn't use that format for the list view we copied from, so it doesn't make sense.

[@alzothunder5391]

Using back ticks `` to denote a string allows you to use `${varName}` in the actual string itself. This is called a template literal and is extremely useful. So you can say: const greeter = (name) => { console.log(`Hello ${name}`) } greeter("Dan"); greeter("Carl"); and it will print "Hello Dan" and then "Hello Carl"

[@mostafizurrahmanshohan9075]

Hello, Thank you for this great content. Would you please make a tutorial on how to create a facebook/twitter like basic notification system? or you can share with me any relevant blogs/tutorials. Thank you again :)

[@quasa0]

Dude can you specify what you want more precise?

[@quasa0]

I'm reading this and literally cannot understand what exactly do you want.

[@Zzzzzzzzzzzzzzzzzzzzr]

this works with es6 as well im sure.going to try it out .

[@munkhfitness]

Great tutorial! Do you have a similar one with using GraphQL rather REST?

[@mattfreire]

No not right now but working on it

[@silvaXX-st9nh]

You are awesome.

[@VikasPatel-zw6sl]

I created the project with this tutorial but how to host this in AWS or Digital ocean. Can you please help me on this

[@HonestADVexplorer]

Thanks for the tutorial! I was wondering if you are familiar with Pyramid framework? Would be great if you could make a tutorial for that too. I haven't seen any tutorial for this powerful framework. Sure many would check it out.