Build a Django API with React.js Front-end

[@lexborodai1639]

I am surprised of how aware the people in the comments are :) Beacuse you, guys, know what's going on on the screen... I was following the whole Django playlist from the very begining and was sure I started to understand what's going on, but this one changed my mind... Am super confused with all those npm commands, js scripts, tree structures, new files, some crazy functions with dollar sign, and so on. So many questions... But the main one - where the hell do you all know those weird things from? xD

[@veryacademy]

Thanks Lex for watching. This is super old now this tutorial, sorry if it has caused any issues.

[@edchelstephens]

Thanks a lot for this tutorial. How does the production build look like?

[@drewbregman9098]

Hi, good video; however, I followed your code to a tee, and even restarted after running into the same error. Once I get to 15:50 and I go to npm run dev, I get an error with webpack-cli "Unknown option --output' how Do I fix this?

[@veryacademy]

You should use --output-path Let me know if that works - the webpack is a little out of date now

[@drewbregman9098]

@@veryacademy Yes it does; however, another problem arose at the very end. I inputted a few events via API, but the react does not render this information. What are your thoughts?

[@dougengineer95]

You are the best ! Amazing video !

[@blackpetergriffin179]

could you please make user interactive django-react tutorial like the user order manage and comment and everything!

[@veryacademy]

Hi, sure, I will be doing more React. I am slowly getting to that point! I do have the newer API series with React that you could look at for now kzbin.info/www/bejne/qaDblZKuma2FZtE

[@miguelrodriguez2349]

VERY good video!

[@veryacademy]

Thank you very much!

[@bringinglife2]

Do we need to have to use AJAX anywhere if we are using React for the frontend of our project?

[@veryacademy]

If you are using react and want it to interact with a backend database you will need to be able to collect that data to use in your application. That would normally be a Restful API call or you could use an AJAX request. But to answer your question no you don't need AJAX you can use API request

[@bringinglife2]

@@veryacademy Thank you for the answer! So that means things like live feed will work without AJAX calls right?

[@veryacademy]

When you say 'live' feed I wouldn't associate AJAX with that - but if you are saying what I think you are then you can replace AJAX with API calls. Live feeds I think of asynchronous real time events. If you like give me an example of what feature you want to not use AJAX for

[@bringinglife2]

@@veryacademy For example, like a real-time notification and activity feed to fetch information as soon as they are created or in certain time intervals.

[@veryacademy]

@@bringinglife2 Thank you! Ok so - intervals -yes indeed there is very specific tech you can use for creating API calls on a interval (its a bit costly though all those calls to the server) If the activity or information has been created by the user then yes you can use API to update in real time like AJAX - if you wanted the other way around - so the server to push out an update without first making a call from the front-end or user. Then this becomes a different conversation

[@animeshchoudhary8071]

Can you make project like movie recommendations system integrat with fronted react design, because lecture available on KZbin are only focusing on backend part not the frontend one..

[@veryacademy]

Sure! That is a great suggestion, thank you. Recommendation systems is one of my specialist subject areas. That’s a great point regarding front-end thank you

[@animeshchoudhary8071]

@@veryacademy thanks for your +ve response, I hope you will start dis soon, because my placement will be started from mid December, before that I want to build something like dis🙂

[@veryacademy]

Ok - please build me a feature specification for this - if I am going to do it - I might as well do it as you need it

[@animeshchoudhary8071]

@@veryacademy sure , build a movie recommendation whoes fron -tend part should be on react , can be clone like Netflix and mentioned sentimental analysis , I am putting one video link, have look, a boy made project ,you will get idea😊. kzbin.info/www/bejne/bnyyXqWaqLyAoM0

[@vinoddiwan5792]

Can you do a big project with django and react

[@veryacademy]

You will be seeing bigger projects with Django very soon as well as Django with react and a whole react section. I’m just finishing up a Django CRUD video - projects will get bigger and more complex over time and as I get more subs. Can you think of a Django react theme for a tutorial that you would like - example quiz app or CMS etc? Rather I make something you want to actually build

[@vinoddiwan5792]

@@veryacademy choose from the real world what we are using. With more concepts and features using ajax.

[@codedjango]

Is it possible for you to do this with VueJS frontend instead of React? Thank you

[@veryacademy]

I have used Vue with Django but not integrated in a Django app like was shown in this tutorial. I will have a think and see if I can produce this for you

[@codedjango]

@@veryacademy wow that would be awesome and exciting...I understand Vue better than React, hence this request. Thank you 😊

[@baetraki7268]

can you please make more in-depth tutorial on react.js and Django?

[@veryacademy]

Sabeqiasur, take a look at the ecommerce with Next - Next.js is build on react. The next part, part 2 we cover state management, session login with httpOnly cookies and will introduce Xstate.

[@baetraki7268]

@@veryacademy okay, ill be waiting

[@drewbregman9098]

Another problem arose at the very end. I inputted a few events via API, but the react does not render this information, it only renders a blank screen until I go into the index.html and write a word in there. What are your thoughts?

[@veryacademy]

Hi Drew - tricky one to give you any feedback on without seeing code I am afraid.

[@nair.network4217]

Error towards the end ... (venv) D:\VA-PyCharm\vaProjTrial1 eact_frontend>npm run dev > react_frontend@1.0.0 dev > webpack --mode development ./src/index.js --output ./static/frontend/ma in.js [webpack-cli] Error: Unknown option '--output' [webpack-cli] Run 'webpack --help' to see available commands and options

[@amiaynarayan619]

you can try --output-path instead

[@timothyhitge9189]

These videos are amazing. 10x better than anything on Udemy.

[@veryacademy]

Thanks Tim, things have slowed down a bit here - am building a learning platform which I think will make things 50x better - thank you for subscribing

[@martinkuria5186]

any reason you didn't use create-react-app?

[@veryacademy]

Hi Martin, Yes stick to create-react-app. I guess I am thinking that, although that it is the official way there are other ways. It’s the rebel inside me - tell me I have to do the official way, I want to explore if there is another way

[@amiaynarayan619]

also to install react without create-react-app : npm install react react-dom --save

[@rangabharath4253]

awesome content in your channel. keep it up.

[@veryacademy]

Thanks Ranga, as long as someone watches I will keep producing

[@bartram-1995]

hello, thanks you very much. I'm a Tomoya from Japanese. if you don't understand my english sorry. I tried write this code. but browser didn't read Event APIs. I'm appreciate you very much if you can show "django-api-react" DIR on github or anywhere.

[@bartram-1995]

sorry! I found it! on github!

[@veryacademy]

Hey Yoshi, thank you for your comment - glad you found what you were looking for. Don't worry about your English - it is fine.

[@elonmusk2142]

please can you make videos where you wil show all these things in advanced level please

[@veryacademy]

Hi Johny, that is the plan. As you probably see, I am just getting started with this channel, trying to get better at delivering content, and starting with some easier material. Was there something specific that you wanted to see?

[@elonmusk2142]

hello thank you veru much

[@veryacademy]

Welcome 😊

[@googlesheetsph]

WHERE IS MAIN.JS????????

[@veryacademy]

Hi, what is it you are looking for? Is the file missing?

[@veryacademy]

The main.js file is in this file directory YT-Django-RestAPI-React-Frontend/react_frontend/static/frontend/