Компонент React не отображается в DOM

Я просматриваю учебник по реакции на http://andrewhfarmer.com/build-your-own-starter/#0-intro, и компонент Counter не будет отображаться на странице. HTML-код получается таким:

<html>
<head>
    <script src="/bundle.js" ></script>
</head>
<body>
    <div id="mount"></div>
</body>
</html>

main.js

console.log('Hello World!');
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';


ReactDOM.render(
    React.createElement(Counter),
    document.getElementById('mount')
);

Counter.js

import React from 'react';


class Counter extends React.Component {
    constructor() {
        super();
        this.state = {
            count: 0,
        };
    }

    render() {
        return (
            <button
                onClick={() => {
                    this.setState({ count: this.state.count + 1 });
                }}
            >
                Count: {this.state.count}
            </button>
        );
    }
}

export default Counter;

webpack.config.js

var path = require('path');

var config = {
  context: path.join(__dirname, 'src'),
  entry: [
    './main.js',
  ],
  output: {
    path: path.join(__dirname, 'www'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-loader'],
      },
    ],
  },
  resolveLoader: {
    root: [
      path.join(__dirname, 'node_modules'),
    ],
  },
  resolve: {
    root: [
      path.join(__dirname, 'node_modules'),
    ],
  },
};
module.exports = config;

Запускаем сервер:

cchilders@cchilders-Latitude-E7240:~/CodeTutorials/build-react-starter$ node server.js 
in the component
in the tester
in the component
in the tester
Example app listening at http://:::3000
Hash: d51a7c75081bea020fb1
Version: webpack 1.14.0
Time: 1297ms
    Asset    Size  Chunks             Chunk Names
bundle.js  744 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 707 kB [rendered]
    [0] multi main 28 bytes {0} [built]
 [179] ./src/Counter.js 2.63 kB {0} [built]
webpack: bundle is now VALID.

Обновление страницы ничего не показывает в терминале, но консоль инструментов разработчика показывает Hello World! при каждом обновлении

Кажется, шаблон не отображается, но в последний раз, когда мой друг выполнял руководство, он работал как есть (аспект public в промежуточном программном обеспечении мог служить ему)

Почему этот сервер не обслуживает файлы с /?

Код находится по адресу https://bitbucket.org/servandoavila1/codetutorials.

Спасибо


webpack reactjs node.js npm javascript
person Servando Avila    schedule 02.02.2017    source источник
comment
ничего в консоли?   -  person patrick    schedule 02.02.2017
comment
Я добавил консоль выше, она делает отпечатки, которые вы ожидаете. Консоль Chrome печатает Hello world! при обновлении страницы.   -  person Servando Avila    schedule 02.02.2017

Ответы (4)


arrow_upward
1
arrow_downward

Вам не нужно использовать document.addEventListener('DOMContentLoaded', function() {.

class Counter extends React.Component {
    constructor() {
        super();
        this.state = {
            count: 0,
        };
    }

    render() {
        return (
            <button
                onClick={() => {
                    this.setState({ count: this.state.count + 1 });
                }}
            >
                Count: {this.state.count}
            </button>
        );
    }
}


    ReactDOM.render(
        React.createElement(Counter),
        document.getElementById('mount')
    );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="mount"></div>

person Shubham Khatri    schedule 02.02.2017
comment
вы знаете, почему это ломает его? - person Servando Avila; 02.02.2017
comment
Я сделал по твоему и на удивление не работает. Используя Google Chrome, сделайте хард-обновление. Нет ошибок на сервере или интерфейсе - person Servando Avila; 02.02.2017
comment
Это не имеет никакого значения, но не могли бы вы попробовать ‹Counter/› вместо React.createElement - person Shubham Khatri; 02.02.2017

arrow_upward
0
arrow_downward

Когда вы в последний раз запускали npm run compile?

Я только что сделал учебник и столкнулся с той же проблемой, что и вы. Я смог решить эту проблему, снова запустив npm run compile после добавления материала React.

Похоже, что в руководстве может отсутствовать какой-то шаг, так как bundle.js необходимо снова скомпилировать после добавления React.

person ZOAN    schedule 02.02.2017

arrow_upward
0
arrow_downward

попробуйте установить publicPath в конфигурации вашего веб-пакета

var config = {
  ...
  output: {
    path: path.join(__dirname, 'www'),
    publicPath: '/',
    filename: 'bundle.js',
  },
  ...
}

И убедитесь, что у вас есть ['es2015', 'react'] предустановки на вашем .babelrc

Советы: на main.js можно сделать так

ReactDOM.render(
    <Counter />,
    document.getElementById('mount')
);
person Alfred Crosby    schedule 02.02.2017

arrow_upward
0
arrow_downward

используйте загрузчик JSX, как показано ниже, в файле loader.config.js:

loaders: [
     {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',

        query: {
           presets: ['es2015', 'react']
        }
     }
  ]
person love-for-coding    schedule 22.08.2017