Django & React Tutorial #3 - React Integration Using Webpack & Babel

This django and react tutorial covers how to integrate react with django and perform all of the necessary setup steps. We will be using webpack and babel to bundle our react app and have the django backend render a template that react will control.

Code for Specific Files

⌨ NPM Setup Commands ⌨
npm init -y
npm i webpack webpack-cli --save-dev
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
npm i react react-dom --save-dev
npm install @material-ui/core
npm install @babel/plugin-proposal-class-properties
npm install react-router-dom
npm install @material-ui/icons

◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
💰 Courses & Merch 💰

🔗 Social Medias 🔗

🎬 My YouTube Gear 🎬

💸 Donations 💸
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️

⭐️ Tags ⭐️
- Tech With Tim
- React and Django
- Django and React
- Wepback and Babel
- React Webpack and Babel
- React and Django Setup
- Django and React Integration
- Webpack django
- Webpack react
- Babel React

⭐️ Hashtags ⭐️
#Django #React #JavaScript

[TechWithTim]

Quick note: There is easier and different ways to setup react that can be used here. I wanted to show you the from scratch setup so that you have the most amount of information possible about what is going on here! Hopefully you appreciate that and are looking forward to the rest of the videos in this series :)

[dembashow]

If you get the following error:
Conflicting values for 'process.env.NODE_ENV'

Replace "production" with "development" in the following snippet of the webpack.config:
plugins: [
new webpack.DefinePlugin({
"process.env": {
// This has effect on the react lib size
NODE_ENV: JSON.stringify("development"),
},
}),
]

[mkalanithi]

15:00; Guys, instead of typing that much; if you see in the right-bottom corner; if it is written "Django HTML", change it to "HTML" by clicking it and selecting this... then simply type "doc" in the editor and press RETURN or TAB, and watch the magic. Make sure that it is an "Emmet Abbreviation".

[miguelcoding]

Thank you Tim for your stuff, is so good. I have a problem with the install of material-ui, it has changed the name to mui, I have installed with:
npm install @mui/material
npm install @mui/icons-material

[naiadbaksh]

Tough set up but Im sure it'll be worth it. It'd be awesome if you could make a video going over why it needs to be set up this way / how data flows so we could understand better how to build our own React / Python apps.

[andronickmartusheff]

to anyone who has trouble with installing material UI, react 17 (which you may have installed) doesn't support material ui. I had to use the following command to make it work . same goes with material ui icons

npm install --save --legacy-peer-deps @material-ui/core

[ThisIsAli_Off]

For anyone who can't run the 'npm run dev' command, be sure to cd (change actual directory of the terminal) to your frontend before using the command, or it won't find the package.json file

[SamuelGuebo]

No need to apologize. You did a great work breaking it down and going from scratch. I appreciate the efforts you've put into this!

[MrValVet]

Two years after posting this tutorial is still great! Thanks Tim!

[kelvinquinonez]

It's really interesting how the amount of views goes down as the series goes down. It has nothing to do with the quality of the videos. I am just wondering if it is because people just get bored, or this is over their head, or maybe some people already know how to do this, or some people think this isn't for them. Just curious. Either way I'm loving this series and I am learning alot. Thanks for the quality tutorial Tim!!

[LordTails]

Word of warning to people with this: if you have issue relating to collecting static make sure you check where you do {% load static %} in index.html. Took me longer than I care to admit that I accidentally used <> instead. If you have other issues with it, know this is related to django and not react. Also great video Tim! I'm trying to reformat my website and this has helped a lot since I already built it on Django and wanted to use React while not giving up the luxuries coming with Django.

[bigjoepro]

Just spent about 20 minutes trying to find out why "Testing React Code" was not appearing in the browser. Turns out I typed const appDive instead of const appDiv....gotta love coding sometimes...
On another note, seriously great series so far Tim! I was really interested in web apps using Django and your series has been a great introduction to this topic. Thanks for all the work you do!

[yashainu]

thanks a lot! as a backend developer often use java/spring tried multiple times to learn react but always end with confusion. you explain the details so clear and so logically that really very easy understand.

[rcodp]

I loved this tutorial, I usually use Express and it's boring, using python for the backend it's fun. After 2 years this tutorial is still relevant. Excellent one, thanks, Tim!

[StevenLightning]

Small note, in the description it says "webpack.config.json" which should be "webpack.config.js".

[pravarsharma]

Wonderfully explained, pls make the react component function based insted of class that would be more helpful. Thanks again👍🏻🙏

[dan_nad]

This was a real nuisance, but totally worth it, keep it up Tim!

[Diablerick]

Dude!! This is the most complete tutorial I have seen about Django-React. Good job and thanks for the explanations

[emmanuelstech]

I am successfully following through with this tutorial in June 2024. Many thanks to the Tech with Tim team.

[deemo]

Just began messing around with React in Django, and so far this tutorial is AMAZING! Thanks for such great content.