Breaking News: Grepper is joining You.com. Read the official announcement!

integrating react to django

chifarol answered on July 20, 2022 Popularity 10/10 Helpfulness 2/10

answer integrating react to django

integrating react to django

Comment

#integrating react + django  according to https://www.valentinog.com/blog/drf/#Django_REST_with_React_Django_and_React_together
django-admin startapp frontend

#prepare a directory for templates and static files:
mkdir -p ./frontend/{static,templates}/frontend

#prepare a directory structure for holding React components
mkdir -p ./frontend/src/components

#set up React, webpack and babel
cd ./frontend && npm init -y

#install webpack and webpack cli
npm i webpack webpack-cli --save-dev

#open up package.json and configure two scripts, one for production and one for development
"scripts": {
    "dev": "webpack --mode development --watch --entry ./src/index.js --output-path ./static/frontend",
    "build": "webpack --mode production --watch --entry ./src/index.js --output-path ./static/frontend"
},

#Close the file and save it. Now let's install babel for transpiling our code
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react style-loader css-loader sass-loader --save-dev

#pull in React:
npm i react react-dom react-router-dom --save-dev

#configure babel with a .babelrc (still inside ./frontend):
{
    "presets": [
        "@babel/preset-env", ["@babel/preset-react", {"runtime": "automatic"}]
    ]
}


#finally create a webpack.config.js for configuring babel-loader:
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

#in ./src/index.js
import  './index.css'
import { createRoot } from "react-dom/client";
import React from "react";
import App from "./components/App";

const container = document.querySelector("#app");

const root = createRoot(container);

root.render(
      <App />
);

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: www.valentinog.com

Tags: django whatever

Link to this answer
Share Copy Link

Contributed on Jul 20 2022

chifarol

0 Answers Avg Quality 2/10

integrating react to django

Contents

More Related Answers

integrating react to django

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.