Реакция компонента не отображается на DOM

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

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

Мы запускаем сервер:

[email protected]:~/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

Спасибо

источник

2017-02-02 Servando Avila

ничего в консоли? – patrick

Я добавил консоль выше, она делает отпечатки, которые вы ожидаете. Консоль Chrome печатает «Hello world!», Когда вы обновляете страницу –

Там нет необходимости использовать 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>

источник

2017-02-02 03:36:11

знаете ли вы, почему это ее сломало? –

Я сделал это по-своему и на удивление не работает. Используя google chrome, вы сильно обновились.Нет ошибок на сервере или в интерфейсе –

Это не имеет никакого значения, но вы можете попробовать вместо React.createElement –

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

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

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

источник

2017-02-02 05:00:24 ZOAN

пытаются установить publicPath на вашем WebPack конфигурации

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

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

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

ReactDOM.render(
    <Counter />, 
    document.getElementById('mount') 
);

источник

2017-02-02 13:30:36

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

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

     query: { 
      presets: ['es2015', 'react'] 
     } 
    } 
    ]

источник

2017-08-22 09:01:37

Реакция компонента не отображается на DOM

ответ

Смежные вопросы