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.

📝 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.json: https://github.com/techwithtim/Music-Controller-Web-App-Tutorial/blob/main/Tutorial 1 - 4/frontend/babel.config.json
package.json: https://github.com/techwithtim/Music-Controller-Web-App-Tutorial/blob/main/Tutorial 1 - 4/frontend/package.json
webpack.config.json: https://github.com/techwithtim/Music-Controller-Web-App-Tutorial/blob/main/Tutorial 1 - 4/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

#django #react #webpack #babel #web-development

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