React & Django TUTORIAL Integration // REACTify Django

[@CleverProgrammer]

Epic video my dude. Love this!

[@CodingEntrepreneurs]

Thanks bro

[@quanticosmith6189]

@@CodingEntrepreneursb

[@sagarpaudel9548]

I appreciate your effort on blending of react and Django. You helped so many of us. Thank you!!

[@mebachanews3450]

After 4 years college and 3 years tireless learning, only this man made me programmer!!! I love the way he follow to teach. top - down approach!!!

[@faisalnazik]

A developer . Not Programmer.

[@pruthvirajpatil7798]

Never came across a better tutorial. Thank you for everything!

[@j.graves8062]

So dig it, I dont really want to work on Python yet, I am still learning Node, but your style, especially on 2x speed is solid. I love that your look up. I may still watch this. Good stuff.

[@CodingEntrepreneurs]

Thank you

[@sabs9728]

Using this stack at work, you made my life so much easier. Big props!

[@CodingEntrepreneurs]

🙌🏼

[@mebachanews3450]

Give this man a medal!!!

[@ohanaclubdepatinaje972]

Justin you are a boss dude! here i´ve used a lot your courses for building the app for my club, and basically learning a lot of django, and so far they have been very useful, so the least that i can say is thanks a lot dude, you are a such great teacher, "un maquina!"! lets see if im able to join my BE to this react FE!, currently working on the static issues, but with your help and the community im closer and closer, if i finally make it I will share with you the results!!

[@Jack_X075]

Completed the video in August 2020 on windows 10. Took 3 days to get it done lol. Was having some problems initially with regards to "npm run collect", so I changed the scripts section of the package.json file with the code below: "scripts": { "start": "react-scripts start", "build": "react-scripts build && npm run build-rename ", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "collect": "react-scripts build && npm run build-rename && npm run copy-buildfiles && npm run collectstatic", "build-rename": "npm run build-rename-js && npm run build-rename-css", "build-rename-logo": "renamer --regex --find .*g --replace logo.svg build/static/media/*", "build-rename-js": "renamer --regex --find .*s --replace reactify-django.ui.js build/static/js/*.js", "build-rename-css": "renamer --regex --find .*s --replace reactify-django.ui.css build/static/css/*.css", "copy-buildfiles": "npm run copy-build-js && npm run copy-build-css && npm run copy-build-logo", "copy-build-logo": "copyfiles -f build/static/media/* ../staticfiles/img/", "copy-build-js": "copyfiles -f build/static/js/*.js ../staticfiles/js/", "copy-build-css": "copyfiles -f build/static/css/*.css ../staticfiles/css/", "collectstatic": "python ../manage.py collectstatic --no-input" } This worked initially, but after like 5 or 6 npm run collects, it started giving a the same renamer and copyfiles error again for some reason. So I reinstalled them through the node package manager, copyfiles and renamer. And that was it. Everything worked fine afterwards. No issues whatsoever from start to finish. I also added a delete functionality in the PostDetail component to check what I had learned. This was a good tutorial. Thanks.

[@jcostello93]

Man, this is so amazing!!! I have a lot of experience with Node.js and Vanilla JS and thought I could get a Hello World application using React and Django up and running. Wasted a couple days with applications that barely worked but I didn't really understand. This tutorial has been great for integrating the two and learning the fundamentals of React. To make sure I'm getting more Django in, I'm controlling the urls/views as opposed to relying on the DRF. Thank you so much for making this! I'll definitely be sure to check out your other tutorials.

[@jaymartinez311]

Just wanted to to say something. I’ve bought course on Udemy from you and follow all your Django stuff all over the internet. You some how monopolies the Django framework online! Amazing. It’s like every time I type Django with any other framework your in the top 3 always. You do go way to fast but I usually slow down your videos 0.5 then it’s at my pace. If you can please make a tutorial just on what everything does inside the Django framework. Like all the moving parts. There isn’t a tutorial for that unless you go through the Django docs. Have a great day!

[@Psy1nZero]

Around 3:17:00 - Changed made to PostUpdate all work apart from content aprt (defaultState()). For some reason null doesn't clear out. I changed it to empty string "" to fix but maybe there's better method. Thanks for great works!

[@АндрейСарнавский-у9т]

Thanks!!!!!!!!!!! I was looking for Django - React for so long)

[@yurkeetravels932]

Q&A: Why would I choose to integrate React inside of Django rather than using ReacJS as a pure frontend and Django with RestAPI as a pure backend serving only JSON's ? What would be advantages and disadvantages?

[@pravda1543]

SEO

[@tractatusviii7465]

Python has an entirely different ecosystem of packages and libraries that are all can now be utilized with a react front.

[@jasoncole3253]

it's also my question...

[@supernova687]

Hello Yurkee, In my experience I can say that one of the greatest advantages for integrating React inside Django is that it lets you deploy your webapplication as only 1 python-django App, because React is javascript only. Disadvantage of this may be that you have to do a lot of pre-config before you can start working with React inside Django. And in the other hand, one advantage of making one StandAlone ReactApp frontend and one StandAlone REST API Django is that you can totally configure both applications independently and then you are free from the pre-config for react-django integration. One disadvantage of this is that you will need to deploy 2 separated webapplications, one for Django REST API and another for StandAlone React frontend. This is my point of view and I prefer to integrate React inside Django for the simplicity of deploying for a production environment. I hope I've solved your question buddy! Best regards!

[@yurkeetravels932]

@@supernova687 that's a very interesting point you've made. Thanks for your contribution!

[@ochiengdavid3896]

You've the most awesome tuts on the web. thanks a lot for sharing this.

[@JustinMitchel]

ochieng david thank you!

[@karoldrazynski]

This is great! Thanks a lot for making this video - it's one of a few which shows from the start to the end HOW to integrate Django and React!

[@uppubhai]

So justin was learning react all along...Awsome

[@CodingEntrepreneurs]

Always iterating on skills! 🙌

[@Jambajakumba]

You just made my day with this. Thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@CodingEntrepreneurs]

You’re welcome!!!!

[@micoberss5579]

I was waiting for this video. Thank you for this useful video

[@CodingEntrepreneurs]

You’re welcome!!

[@erikglm5340]

I still have a working trydjango1.8 project and wanted to learn react. This looks like just the right thing!

[@sammymwangangi30]

Finally got what i was looking for. Thank you for sharing this.

[@CodingEntrepreneurs]

You’re welcome!

[@gnaeilsen]

Can you show how to run the react app independently from django runserver? this will speed up designing the front end and not having to run npm collect for every single change to see how it looks. thanks!

[@nickcoleman]

Very Cool. We use ReactJS Front-End and Django Backend where I work!

[@CodingEntrepreneurs]

That’s awesome! I’m curious how they do authentication (built in, jwt, other token)

[@ivanabregu1]

@@CodingEntrepreneurs Hi Justin first of all, thanks for you amazing work, your work and explanation is really good! In the small Startup that i work, we implement React running in a page that is render by Django, this page have the authentication requirement, the login page belong Django, after user was login, Django redirect to the page that contain React.js. Finally React run with it's own page router. We are able to pass the context of Django to React and we can consume the private apis develop with DRF because the user is on session. I dont like this solution, i'd like have the BE separate of de FE. I'm looking to implement Django + oauth2 + React.js. Do you have any idea about how it could be the flow? Thanks a lot, sorry for my bad english, Saludos desde Argentina.

[@moddatrucka]

@@CodingEntrepreneurs - Im starting a new project and plan on using DRF token authentication

[@rafaelperezfabian4060]

@@ivanabregu1 Hi Ivan, in the startup I work we are trying to do something like you described, the authentication is handled by using a Django page and then we are trying to redirect the user to a React page/app. I have been able to figure out how this can be done properly. Could you recommend me some documentation, website, book or something similar to read about how to make Django and React work together? Thank you so much in advance

[@ivanabregu1]

@@rafaelperezfabian4060 Hi bro, take a look this tutorial v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/ . It was the first implementation we did, but its better if you split the frontend from the backend! Feel free to ask whatever things!

[@moddatrucka]

This is an awesome tutorial! Love your teaching style! Please keep up the good work!

[@kangbomber]

Thank you so much for your great contents!!! I learned so much from your videos and am developing my own Django site using what I learned from you.

[@CodingEntrepreneurs]

That’s awesome!

[@thomasrackow8159]

Windows user need to amend package.json -> scripts: renamer needs double quotes (\") and copyfiles works only without quotes. ... But most likely I am the only one who is using windows in these days. Also I am in trouble with the service worker, but I did not figure that one out so far. Thanks a lot for your awesome stuff.

[@CodingEntrepreneurs]

Thanks for sharing. Yeah remove the service worker for now, you don’t need it

[@sajibarafatsiddiqui9077]

Please try it... "scripts": { "start": "react-scripts start", "build": "react-scripts build && npm run build-rename ", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "collect": "react-scripts build && npm run build-rename && npm run copy-buildfiles && npm run collectstatic", "build-rename": "npm run build-rename-js && npm run build-rename-css", "build-rename-logo": "renamer --regex --find .*g --replace logo.svg build/static/media/*", "build-rename-js": "renamer --regex --find .*s --replace reactify-django.ui.js build/static/js/*.js", "build-rename-css": "renamer --regex --find .*s --replace reactify-django.ui.css build/static/css/*.css", "copy-buildfiles": "npm run copy-build-js && npm run copy-build-css && npm run copy-build-logo", "copy-build-logo": "copyfiles -f build/static/media/* ../staticfiles/img/", "copy-build-js": "copyfiles -f build/static/js/*.js ../staticfiles/js/", "copy-build-css": "copyfiles -f build/static/css/*.css ../staticfiles/css/", "collectstatic": "python ../manage.py collectstatic --no-input" }

[@nyagageoffrey]

Works!!!!

[@KristianMischke]

I ran into the same issues. My copyfiles worked with double quotes though. Also for some reason getting this on the minified css "Uncaught SyntaxError: Unexpected token {" I didn't do anything to the default css files

[@yawkilicious2384]

Also Works for me on windows! Thank you for sharing my friend

[@TheRedEnt]

great to see you after long time :)

[@hyped2476]

Hey Justin, I am a college student that lives in Santa Barbara next to where you live. And I have watched most of your videos. I am in great debt to you because you helped me a lot. Your videos made a lot of difference to my life. I am now super excited about Django every day. I developed a strong foundation just from following the e-commerce course. And yes, I watched every video of the course, and I learned a lot. Here is my only problem: when I looked for jobs, I found that most companies use Rails rather than Django. At least, this is how it is in Santa Barbara. Do you have to know of any companies that are willing to hire Django developers with 2 years -ich experience. I have a passion for Django. A strong one. I love it. I can do anything else, but I just like Django the most. Any ideas?

[@altynbek63]

For those who want to develop in Django 1.11, you should consider changing two files: manage.py and urls.py (for both project and post app). In the first, I did not figure it out what was "exec". But I compared with my older Django 1.11 projects and there wasn't such a thing, so I removed it. The second file's issue is Django URL routing changes in 2.0 version. So here you should change path and repath to url(regex) structure. At this point for me everting worked till 8.Hello World part. Hope it helps for someone.

[@xezed]

Hey Justin. Thank you a lot for your courses. You helped me A LOT on my way to become a web-developer:) I'm watching this one and have a question 1:47:46 why [key]: value? I mean why square brackets?

[@CodingEntrepreneurs]

[when.you.reference.dot.items]: “you need brackets for the key”

[@CodingEntrepreneurs]

Basically non-static items need a bracket

[@xezed]

Thanks! :)

[@abelmurua6980]

I just finished watching the livestream with Dennis and Mitch. Thanks for all the inputs. Is there any video or will be any to help decide which frontend framework to go for? React vs Vue with Django?

[@adzcer]

Very much appreciated, love your Udemy lecture

[@CodingEntrepreneurs]

Thank you!!

[@abobakerhilal4138]

Hello, thank you for what you have to offer !, I would like to ask where I find a start and the rest of this course where I did not find it in playlists, I will be grateful to you if you answer my question.

[@nyagageoffrey]

Hey Justin, thanks for this. Its exactly what a lot of people were asking for in live sessions. But the most important part of this video is the actual integration tweaks at the start(package.json), which is difficult for most people. Can we get similar for angular? Just the integration part... 5 minutes only. Pleeease.

[@soubhagyapradhan3624]

huhh.. was looking for this from a long time.. Thanks man

[@a-raheemjamaal5564]

love your work .Thanks you for sharing

[@CodingEntrepreneurs]

Thank you!

[@mrrolandlawrence]

literally saved my life.

[@Jack_X075]

Man im nearing the last 2 sections... cant wait to get a sense of completion lol.

[@mlkvdev]

Great job! Thank you.

[@helloworld12354]

Awesome content as always!

[@CodingEntrepreneurs]

Thanks bud!

[@slipperz2370]

Excellent project! Thank you for your sharing!

[@goldenflares6751]

Really useful man, thank you for doing this !

[@deadfool6105]

wow man.. you are just awesome.. love your work.. 🙌🏻

[@ozcanyarimdunya]

Thanks for your hardworking, it is perfect.

[@mohitsharma2376]

Are you gonna post the video of how you integrated reactJS with Django ?

[@oyejohnson]

You are my hero

[@narutosasukakakakakakaka3991]

This channel should get 500 🌠 I think you should create video how to build web app like Hotjar.com or other analytics software. No one was create that so i'm really excited to see you create that kind of video :)

[@maksimmarkelov1971]

2:02:00 you should not directly mutate state - it is bad practice. So you should change your handleNewPost function: let currentPosts = [...this.state.posts] Now your currentPosts is a copy of this.state.posts. In your example changing currentPosts variable will mutate state, cause it is one link in memory.

[@CodingEntrepreneurs]

Thanks for that! A lot of this is cleared up in Try React series

[@alexxxmf]

Hey justin, maybe it would be nice in a future video to discuss the different approaches with regards to adding React. If you have an API, it's ok but when you have to deal with legacy django (using template engine) and you are not supposed to turn it into an API, it could be tricky the way to go.

[@vinisr12]

Thank you for posting this awesome video. What do you think will be the advantage of using Django instead of just going with node js based framework like Express? If i'm not wrong, the current Django jwt authentication stuff is still not fit for production.

[@florenciacordoba5034]

ey justin, thanks for show us. great channel...

[@josereynelchauxperez947]

Excelente material, muchas gracias !!!

[@adamshamsudeen6808]

Great video! Where can I get that cap?

[@aikolt1217]

Hi Justin, thanks for teaching, big fan!-studied for long time your tutorials on Udemy, Angular(1.5,4)+Django etc. I’m debating React or Angular?-which one you would say is better with Django?....thank you!-need some guidance

[@CodingEntrepreneurs]

Ah man this is hard to answer because they are both so good! I think I’m starting to prefer react because of how scaleable it can be. Like you can make a tiny component in react and it works in your existing UI pretty easily, Angular that’s much more challenging to accomplish.

[@nicomagliaro]

This is Biblical. thanks for sharing with the community

[@amitkumar30]

Hey Justin , Nice tutorial, I have been trying to do exactly the same by looking at other videos and have few questions: ( oh I have reached only till displaying posts with description until now, but wanted to ask before I dive further) 1. What is the difference in integrating using the method taught in this tutorial vs using webpack, babel etc 2. I came across a tutorial where in it only worked when I had both react & Python server running; only then I can see results on my 127 local host but I found this is not done this way 2.1 so does it mean when I go live to production I will not require a node server running, am I right ? 3. There was also a possibility of sending the page as a component/parameter to react and then doing stuff which I believe is the wrong way 4. Using this implementation will I still be able to expose the API for some other frontend framework; for example can I use the same APIs to build a mobile app using ReactNative ? sorry for the long list of questions; its just that I am beginner and have been trying very hard to get doing things the right way at the very start. I have a vision of building a website and going live in one month's time.. thank you in advance..... I did like your HIIT startup videos too :) is there anyways we can leave a mail to you on your site ?

[@bharathmb3715]

Nice Tutorial Dude, I am trying myself watching you video but I getting error like "An error occurred, please try again later" I don't know where is errors can you please help me out and after 01:55:00 (Child Element Event Emitter ) your started new concept that one also I didn't get output from there.I am stuck over there

[@tshaylatte9502]

Hey thank you for this wonderful tutorial. I was wondering, for the PostUpdate element, why do we put the state update function in the parent (PostDetail) and not directly in the PostUpdate element? Is it a common practice ? Thanks

[@nicolaimartin7279]

Cool, thx . love this!

[@azrmuradl6420]

Wonderful

[@xiangxu8677]

thank you for your video! I am new to this, but always interested to build a django+react project, just curious is that possible to build a django+react+d3 project

[@haysus]

Thanks for the video man. Great detail on react components and workflow. I do have a question though. I've been trying to deploy my own version of this on Heroku, but all I get is the navbar? I've changed up Static_url, dirs, and root in settings.py and installed gunicorn, whitenoise, psycopg2, etc. and I can't find a resource on how to deploy an integrated django/react project like this. Could you point me in the right direction?

[@namanmalik7823]

kzbin.info/www/bejne/qGGodKiceN6sr9k

[@yuguanli7244]

Hi thanks for this video, but I'm having a hard time understand why you choose the collect way to reactify django, instead of using your react host (localhost:3000) to call your rest api through something like axios?

[@Egorfreeman]

Cool. Thank you. Maybe next Vue.js and Django?

[@CodingEntrepreneurs]

Maybe a little while before that. Lots to cover in react!

[@GonzaloGuevaraFreire]

Yea vue is awesome

[@bizzle350]

Yes, React for the Win! Thank you!

[@abhijeetpal2098]

Thankyou so much I appreciate your work ❤

[@mahendranath2504]

Thank you so much 👍🏼🎉⭐🙏❤️

[@diegoabdo2555]

Does letting django serve all static files have any benefit? Or could I just make them separate and deploy front end on netlify and backend on heroku.

[@wild6518]

hello sir!, the script for the npm run collect is not working for the new version of renamer :( could you provide a fix pleeeeeeeeeeeeeease :(

[@IshwarJangid]

cool. Thanks a lot. But you are using cookies here and getting csrf token from there. What to do if we don't want to use cookies? Like when doing it in react-native.

[@fowad27]

I'm unsure of the value of react in all this... can't you do most of the stuff in django? EG having a preset input value, handling checkboxes, etc? What is React bringing to the table in all this?

[@ohanaclubdepatinaje972]

hey Justin, im wondering... regariding the scripts on package json, what happens if instead of a name, whether its static or any other what you have is a list of tuples crossing all your django apps collecting statics...?? such as..STATICFILES_DIRS = [ ('skills_tutor', 'skills_tutor/static/skills_tutor/images/' ),('skills_tutor', 'skills_tutor/static/skills_tutor/css/' ),('skills_tutor', 'skills_tutor/static/skills_tutor/js/' ), ('skills_tutor', 'accounts/static/accounts/images/' ),('skills_tutor', 'accounts/static/accounts/css/' ),('skills_tutor', 'accounts/static/accounts/js/' ), ('skills_tutor', 'posts/static/posts/images/' ),('skills_tutor', 'posts/static/posts/css/' ),('skills_tutor', 'posts/static/posts/js/' ), ('skills_tutor', 'comments/static/comments/images/' ),('skills_tutor', 'comments/static/comments/css/' ),('skills_tutor', 'comments/static/comments/js/' ), ('skills_tutor', 'gamification/static/gamification/images/' ),('skills_tutor', 'gamification/static/gamification/css/' ),('skills_tutor', 'gamification/static/gamification/js/' ), ('skills_tutor', 'rollerskate/static/rollerskate/images/' ),('skills_tutor', 'rollerskate/static/rollerskate/css/' ),('skills_tutor', 'rollerskate/static/rollerskate/js/' ), ] should copy avery tuple with its own script at json package? thanks if you or any other can help. ;)

[@andresmauro17]

ufff thanks for sharing man.

[@mr.chinaski2613]

Really liked your video, actually I would like to build a stack with React Front-end and Django / MongoDB / Graphql (Apollo) backend, what do you think about this setup? is it viable?

[@On7D7]

It's Crazy combination man ...lot's of work

[@schism169]

What is your recommendation for front end? Do you recommend bootstrap, react or angular?

[@CodingEntrepreneurs]

Bootstrap for CSS, otherwise it depends on what your project needs. I very much like react and angular

[@arenmkhoyan]

Thank you!

[@varunlokesh9128]

good tutorial! i have followed your djangular tutorials on udemy , now i came across this video,i am very new to react and django i have installed node packages(ui framework) which i want to use in this project in an javascript file but i am not able to import them as it is outside src, please let me know how to do it

[@ashokbabug40]

Please update the course to django version 3

[@dgiri2333]

Can you do same thing using geodjango

[@MrGadm19]

Thanks man your are awesome really

[@dan_pringle]

npm run build is not creating one but three JS files (it is code splitting with just a standard create-react-app). 1.6105a37c.chunk.js main.c78b3c58.chunk.js runtime~main.229c360f Which is to be renamed reactify-django.ui.js? Any ideas out there?

[@Johnnyboycurtis]

Instead of virtualenv, you can use conda (from Anaconda). conda.io/docs/user-guide/tasks/manage-environments.html

[@drdarbandi48]

justin my man i watched the tutorial and tried to tag along but i couldnt you just cut to the chase & codes get found outta nowhere hopefully your new courses are better

[@lucasanim2936]

hi, is it similar to make a django back end api and make the web with react? And can use the same django rest for a mobile app?

[@aubreydigital]

not getting the 3 posts errror in console.. it never updates after i enter the fetch code

[@Poodrdt]

U are awesome!

[@CodingEntrepreneurs]

thank you

[@md.imranahmed3264]

Is this course for beginners? Because I have no idea about react.

[@redabekka5940]

can u make an authentication using react js and Django

[@keshavb2896]

can u please make a whole youtube project series of using many technology with django like many aws services,rahbit mq,kafka,ngnix etc etc ..it would be awesome

[@umarzakari3495]

Hey Justin Please i need a little help with the creatPost I'm getting detail: "Authentication credentials were not provided." Thanks a lot

[@leoneltoledo2287]

Thanks for uploading this, it has been so helpful for me. I have a question. Let's say that I have frontend that is completely built in react, and I have Django working as my backend. I have a button in the front end that should execute some python code. I've seen that doing that in flask is relatively easy, does anyone knows how to do the same using Django? Thanks for your help!

[@abunayem7121]

Hello,I need help. I want to integrate 2checkout payment api with my django web application.Have you any blog or tutorials related with this?

[@youssefelbieh2939]

dose the full course available in udemy ?

[@Mohammad__Shahrukh]

doing a console log shows that the state has the data while the form is reset

[@brunofica7053]

Thank Justin!, its great your way and your speed men, its was so nutritif and usefull, the elegance of react next to power of djangorest, Thanks bro !!... Please.. make one or recommend about "react native" and what backend is better to use, It would good idea use react native with a backend width dajngo rest, what do you think?? Regards!

[@steezyalejos5905]

personal note: 25:00

[@Deeredman4]

7:27 "Of course you can't sell it." I mean, it's licensed under the MIT license... So I guess if you can find a buyer; there is nothing really stopping you from selling it... lol

[@Mohammad__Shahrukh]

any other way to get the endpoint URL instead of hardcoding it?

[@balu6660]

thank you for the good service please make a vedieo how to deploye the django project in apache server in windows envirement

[@lowkeygaming4716]

Which framework can you suggest to someone who doesn't like JavaScript that much? I mean usability, learning curve etc.

[@CodingEntrepreneurs]

But you have to use JavaScript I assume.. React

[@NebuLushFlow]

Following along and npm run collect is not renaming properly. It's creating a "runetime~reactify-django.ui.js & .css" is there something wrong the with .json file or conflict with now npm builds as this tutorial is now a little older?