Hope below steps will work for your guys
Steps that works for me is mentioned below. Please do require changes as this is old tutorial and many things were deprecated:-
Key Changes for React Router v6 Switch Replaced with Routes: Use Routes instead of Switch. Route Syntax Changes: Replace component={ComponentName} with element={<ComponentName />}.
app.js :-

import { createRoot } from "react-dom/client"; // Updated for React 18

export default class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <h1>Testing React Code</h1>
            </div>
        );
    }
}

const appDiv = document.getElementById("app");
if (appDiv) {
    const root = createRoot(appDiv); // Use createRoot
    root.render(<App />);
}

index.js

import ReactDOM from "react-dom/client"; // For React 18
import App from "./components/App";

// This file essentially initializes the App.js file.
export default App;
`

**webpack.config.js**
`const path = require("path");

module.exports = {
    entry: "./src/index.js", // Entry point for your app
    output: {
        path: path.resolve(__dirname, "static/frontend"), // Output directory
        filename: "main.js", // Output file name
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader", // Transpiles modern JavaScript to compatible code
                },
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"], // To load CSS files
            },
        ],
    },
    resolve: {
        extensions: ["*", ".js", ".jsx"], // Extensions Webpack should resolve
    },
    mode: "development", // Use "production" for production builds
};

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Django React</title>
    {% load static %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}" />
</head>

<body>
    <div id="main">
        <div id="app"></div>
    </div>

    <script src="{% static 'frontend/main.js' %}"></script>
</body>

</html>

if required, try to run below command:-

npm install babel-loader @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli react react-dom

Nothing shown on the screen - tutorial 4 #20

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions