Компонент приложения не работает

Я делаю свое первое приложение React с Webpack. Я ввел некоторый код из учебника, сервер разработки работает, ошибки не отображаются, но в браузере отображается только одна вещь: "ТЕСТ ЗДЕСЬ:".

Компонент App, кажется, не работает.

Мой код следующий

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">

  <title>React App</title>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  TEST HERE:
  <div id="root"></div>
</body>

</html>

App.js:

import React, { Component } from 'react';
import {hot} from "react-hot-loader";
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">

          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default hot(module)(App);

Как это исправить? Что не так с моей конфигурацией?

Приставка:

C:\work\First-React-App\first-react-app>npx webpack-dev-server --mode development
i ｢wds｣: Project is running at http://localhost:3000/
i ｢wds｣: webpack output is served from http://localhost:3000/dist/
i ｢wds｣: Content not from webpack is served from C:\work\First-React-App\first-react-app\public\
i ｢wdm｣: Hash: 5852d82b0e01ae152bc3
Version: webpack 4.12.0
Time: 1735ms
Built at: 2018-08-18 15:40:55
    Asset      Size  Chunks             Chunk Names
bundle.js  1.17 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:3000] (webpack)-dev-server/client?http://localhost:3000 7.75 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ./src/index.js 52 bytes {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1010 bytes {main} [built]
[./node_modules/webpack/hot/only-dev-server.js] (webpack)/hot/only-dev-server.js 2.54 KiB {main} [built]
[./src/App.js] 2.78 KiB {main} [built]
[./src/index.css] 1.05 KiB {main} [built]
[./src/index.js] 677 bytes {main} [built]
[./src/registerServiceWorker.js] 4.26 KiB {main} [built]
    + 53 hidden modules
i ｢wdm｣: Compiled successfully.
Источник

1 ответ

Решение

Вам не хватает bundle.js в вашем index.html файл, так что ничего не отображается из вашего кода.

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  TEST HERE:
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
Источник
Другие вопросы по тегам