JSX 未在浏览器中显示答案

【问题标题】：JSX not showing in browserJSX 未在浏览器中显示
【发布时间】：2021-03-05 06:46:59
【问题描述】：

您好，我最近开始学习 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"
  }
}

【问题讨论】：

您采取了哪些步骤？你跑npm start了吗？
我试过了，但它给了我一个错误。 “缺少脚本：开始”
你能显示你的 package.json 文件吗？你是在 package.json 所在的目录中运行它吗？
我编辑了我的帖子以显示 package.json 文件，不，我没有在同一个目录中运行它们（在同一个根文件夹中但不在同一个目录中）
试试npm run dev

标签： reactjs django-rest-framework react-redux react-router django-react

【解决方案1】：

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

在编写自己的代码之前，请确保您已安装 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 看到一个默认网络应用程序。

你可以在我的文章中查看详细信息：Starting SaaS with Django and React

如果您能够看到默认应用程序，那么您可以开始添加您的代码。这里有我文章的第二部分：React Routing and Components for Signup and Login

【讨论】：