JSX 未在浏览器中显示

Question

Hi there I recently started following a crash course of Django Rest Framework + React but I came across a problem with my React code. The jsx I write in my App.js doesn't show in the browser. Here is the code:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Header from './layout/Header';
import Dashboard from './leads/Dashboard';

import { Provider } from 'react-redux';
import store from '../store';

class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Header />
                <div>
                    <Dashboard />
                </div>
            </Provider>
        )
    }
}

ReactDOM.render(<App />, document.getElementById("app"))

He are my Header.js , and Dashboard.js files(in case it helps)

import React, { Component } from 'react';

export class Header extends Component {
    render() {
        return (
            <div>
                <nav className="navbar navbar-expand-sm navbar-light bg-light">
                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarTogglerDemo01">
                        <a className="navbar-brand" href="#">Django + React</a>
                        <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
                        </ul>
                    </div>
                </nav>
            </div>
        )
    }
}

export default Header;

---

import React from 'react';
import Form from './Form';
import Leads from './Leads';

export default function Dashboard() {
  return (
    <div>
      <Form />
      <Leads />
    </div>
  );
}

In case you need any extra information please tell me. Can anyone please help me solve this problem?? If so please tell me and thank you in advance.

Edit: Here is my package.json file

{
  "name": "DjangoReact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch ./backend/frontend/src/index.js --output-path ./backend/frontend/static/frontend",
    "build": "webpack --mode production ./backend/frontend/src/index.js --output-path ./backend/frontend/static/frontend/main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.7",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "^7.12.7",
    "babel-loader": "^8.2.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0"
  },
  "dependencies": {
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-react": "^1.2.0",
    "react-redux": "^7.2.2",
    "react-thunk": "^1.0.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  }
}

Answer 1

You will not see jsx files in the browser. The code from jsx files is transformed into html+js code and displayed in the web browser.

Before going to write your own code, please make sure that you have node.js installed and that you can run React template code:

# create the React boilerplate project
npx create-react-app frontend

# go to the fronted project directory
cd frontend

# run React built-in development server
npm start

After the above commands, you should see a default web app at http://localhost:3000 .

You can check details in my article: Starting SaaS with Django and React

If you are able to see the default application then you can start to add your code. Here you have the second part of my article: React Routing and Components for Signup and Login