浏览器中未显示JSX

Question

嗨，我最近开始学习Django Rest Framework+React的速成课程，但我的React代码遇到了问题。我在App.js中编写的jsx不会显示在浏览器中。这是代码：

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"))

他是我的Header.js和Dashboard.js文件(如果有帮助的话(

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>
);
}

如果你需要任何额外的信息，请告诉我。有人能帮我解决这个问题吗？？如果是，请提前告诉我并感谢。

编辑：这是我的package.json文件

{
"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

您将不会在浏览器中看到jsx文件。jsx文件中的代码被转换为html+js代码，并显示在web浏览器中。

在编写自己的代码之前，请确保安装了node.js，并且可以运行React模板代码：

# 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

完成上述命令后，您应该会在http://localhost:3000中看到一个默认的web应用程序。

您可以在我的文章中查看详细信息：使用Django和React 启动SaaS

如果您能够看到默认的应用程序，那么您就可以开始添加代码了。这是我文章的第二部分：注册和登录的React路由和组件