Блог

Главная - Вопросы по программированию - JSX не отображается в браузере

JSX не отображается в браузере

#reactjs #django-rest-framework #react-redux #react-router #django-react

#reactjs #django-rest-framework #react-redux #реагировать-маршрутизатор #django-реагировать

Вопрос:

Привет, недавно я начал проходить ускоренный курс Django Rest Framework React, но я столкнулся с проблемой с моим кодом React. jsx, который я пишу в своем App.js , не отображается в браузере. Вот код:

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

Комментарии:

1. Какие шаги вы предприняли? Ты убежал npm start ?

2. Я пытался, но это выдает мне ошибку. «отсутствует сценарий: запуск»

3. Можете ли вы показать свой package.json файл и запускаете ли вы его в каталоге, где находится package.json?

4. Я отредактировал свой пост, чтобы показать файл package.json, и нет, я не запускаю их в том же каталоге (в той же корневой папке, но не в том же каталоге)

5. попробуй npm run dev

Ответ №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 .

Вы можете ознакомиться с подробностями в моей статье: Запуск SaaS с помощью Django и React

Если вы можете увидеть приложение по умолчанию, то можете начать добавлять свой код. Здесь у вас есть вторая часть моей статьи: Маршрутизация и компоненты React для регистрации и входа в систему

Метки: