Premium Only Content

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.
💻 AlgoExpert is the coding interview prep platform that I used to ace my Microsoft and Shopify interviews. Check it out and get a discount on the platform using the code "techwithtim" https://algoexpert.io/techwithtim
📋 Credit to this blog for most of these steps: https://www.valentinog.com/blog/drf/
📝 Series Code: https://github.com/techwithtim/Music-Controller-Web-App-Tutorial
📕 Node.js & NPM: https://www.npmjs.com/get-npm
Code for Specific Files
babel.config.js: https://github.com/techwithtim/Music-Controller-Web-App-Tutorial/blob/main/Tutorial%201%20-%204/frontend/babel.config.json
package.json: https://github.com/techwithtim/Music-Controller-Web-App-Tutorial/blob/main/Tutorial%201%20-%204/frontend/package.json\
webpack.config.json: https://github.com/techwithtim/Music-Controller-Web-App-Tutorial/blob/main/Tutorial%201%20-%204/frontend/webpack.config.js
⌨ 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 💰
💻 The Fundamentals of Programming w/ Python: https://tech-with-tim.teachable.com/p/the-fundamentals-of-programming-with-python
👕 Merchandise: https://teespring.com/stores/tech-with-tim-merch-shop
🔗 Social Medias 🔗
📸 Instagram: https://www.instagram.com/tech_with_tim
📱 Twitter: https://twitter.com/TechWithTimm
⭐ Discord: https://discord.gg/pr2k55t
📝 LinkedIn: https://www.linkedin.com/in/tim-ruscica-82631b179/
🌎 Website: https://techwithtim.net
📂 GitHub: https://github.com/techwithtim
🔊 Podcast: https://anchor.fm/tech-with-tim
🎬 My YouTube Gear 🎬
🎥 Main Camera (EOS Canon 90D): https://amzn.to/3cY23y9
🎥 Secondary Camera (Panasonic Lumix G7): https://amzn.to/3fl2iEV
📹 Main Lens (EFS 24mm f/2.8): https://amzn.to/2Yuol5r
🕹 Tripod: https://amzn.to/3hpSprv
🎤 Main Microphone (Rode NT1): https://amzn.to/2HrZxXc
🎤 Secondary Microphone (Synco Wireless Lapel System): https://amzn.to/3e07Swl
🎤 Third Microphone (Rode NTG4+): https://amzn.to/3oi0v8Z
☀️ Lights: https://amzn.to/2ApeiXr
⌨ Keyboard (Daskeyboard 4Q): https://amzn.to/2YpN5vm
🖱 Mouse (Logitech MX Master): https://amzn.to/2HsmRDN
📸 Webcam (Logitech 1080p Pro): https://amzn.to/2B2IXcQ
📢 Speaker (Beats Pill): https://amzn.to/2XYc5ef
🎧 Headphones (Bose Quiet Comfort 35): https://amzn.to/2MWbl3e
🌞 Lamp (BenQ E-reading Lamp): https://amzn.to/3e0UCr8
🌞 Secondary Lamp (BenQ Screenbar Plus): https://amzn.to/30Dtafi
💻 Monitor (BenQ EX2780Q): https://amzn.to/2HsmUPZ
💻 Monitor (LG Ultrawide 34WN750): https://amzn.to/3dSD7tS
🎙 Mic Boom Arm (Rode PSA 1): https://amzn.to/30EZw9m
🎚 Audio Interface (Focusrite Scarlet 4i4): https://amzn.to/2TjXsih
💸 Donations 💸
💵 One-Time Donations: https://www.paypal.com/donate?hosted_button_id=CU9FV329ADNT8
💰 Patreon: https://www.patreon.com/techwithtim
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
⭐️ 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
-
36:41
Tech With Tim
1 year ago $0.03 earnedPython Selenium Tutorial - Automate Websites and Create Bots
268 -
3:05:55
TimcastIRL
6 hours agoJimmy Kimmel Refuses To Apologize Over Charlie Kirk Comments, Blames Gun Violence | Timcast IRL
176K150 -
2:44:24
Laura Loomer
9 hours agoEP144: Trump Cracks Down On Radical Left Terror Cells
43.5K15 -
4:47:56
Drew Hernandez
11 hours agoLEFTISTS UNITE TO DEFEND KIMMEL & ANTIFA TO BE DESIGNATED TERRORISTS BY TRUMP
37.5K16 -
1:12:32
The Charlie Kirk Show
6 hours agoTPUSA AT CSU CANDLELIGHT VIGIL
88.8K59 -
6:53:45
Akademiks
9 hours agoCardi B is Pregnant! WERE IS WHAM????? Charlie Kirk fallout. Bro did D4VID MURK A 16 YR OLD GIRL?
63.8K7 -
2:26:15
Barry Cunningham
7 hours agoPRESIDENT TRUMP HAS 2 INTERVIEWS | AND MORE PROOF THE GAME HAS CHANGED!
132K86 -
1:20:27
Glenn Greenwald
8 hours agoLee Fang Answers Your Questions on Charlie Kirk Assassination Fallout; Hate Speech Crackdowns, and More; Plus: "Why Superhuman AI Would Kill Us All" With Author Nate Soares | SYSTEM UPDATE #518
117K33 -
1:03:06
BonginoReport
9 hours agoLyin’ Jimmy Kimmel Faces The Music - Nightly Scroll w/ Hayley Caronia (Ep.137)
168K64 -
55:40
Donald Trump Jr.
13 hours agoThe Warrior Ethos & America's Mission, Interview with Harpoon Ventures Founder Larsen Jensen | Triggered Ep275
103K56