Build A web application with ReactJS and Django (Beginner Project Tutorial)

Build A web application with ReactJS and Django (Beginner Project Tutorial)

This is a beginner project that teaches how to build a simple web application with React and Django. Django is a web framework that allows programmers to build web applications. With Django REST Framework, it allows building of web APIs.

ReactJS is a library that is used to build user interfaces. In this video we look at how to build a simple web application with ReactJS and Django.

SOURCE CODE:

TIMESTAMPS:
00:00 Introduction
03:30 Back-end setup
09:22 Creating the database model
14:39 Django REST Framework setup
16:00 Creating serializers
18:29 Viewsets and routers
26:25 Documenting the API with DRF-Yasg
31:45 Front-end setup
33:54 Building the front-end
1:06:42 The useState hook
1:09:43 Conditional rendering
1:20:31 Setting Up CORS with Django-CORS-Headers
1:25:11 The useEffect hook
1:25:33 Using the Fetch API with async / await syntax
1:53:32 Creating API resources
1:59:59 Deleting API resources
2:03:08 Wrapping Up

SUBSCRIBE:

Please buy me a coffee

FOLLOW ME:
GITHUB:

TWITTER:

[kennstack]

just finished the tutorial, Exact same behaviour of the App!

Keep Building, Dude! You're Great!

[kennstack]

Please make the second part of the Video: HOSTING.

It's gonna be helpful to see the App on Production, Jonathan

[travis.gooden]

This was an excellent tutorial, really appreciate it.

[karansmittal]

awesome tutorial man, appreciate the efforts.

[robmenon]

Good breadth but this feels more like an intermediate level rather than true beginner tutorial. For beginners it would be great to spend more time on 'why' things are being done, not to use shortcut commands (e.g. classnames in the react part) and give a broader context. I did like how you showed how to install frameworks by going to their read-the-docs pages, and brought together the key ones. But as a beginner I would like to see more context overall about how the system hangs together and why we are doing what we're doing.

[hqd-printing]

Thank you for posting this tutorial . It was very helpful.

[kennstack]

Great Job, Dude!

Thanks for the content!

[omarabidou]

Thanks a lot Jonathan
Very understandable lesson
👍👍👍

[andreyandreyovich]

thank you, buddy, Great tut. greetings from Ukraine

[elyesachour]

hello,
i just made a machine learning model on django where i had to upload an image via a form using simple html&css page and render the result on a other page (4 predictions using a logic where the activation of one prediction is depending on the previous one) i would like to do the same thing but this time using a react page for the frontend and i dont know what should i use. Any hint please ?

[ShubhamNarkhede]

in this where actually are we storing the data? there is no database?

[andreyandreyovich]

Hi should you help me. Why I get response not only of array, but object with count, next, results keys? "count": 3,
"next": null,
"previous": null,
"results": [
{
"id": 1,
"title": "Тема Реакт 1",
"cat": [
1,
2
],
"second": [
1,
2
]
},

[fahadnoushad]

This Tutorial is great. I was looking for such a tutorial where I could create an API for one of my websites. thanks @SsaliJonathan for a perfect tutorial.