DOMにレンダリングされない反応コンポーネント

反応チュートリアルhttp://andrewhfarmer.com/build-your-own-starter/#0-introを歩いていて、Counterコンポーネントがページに表示されません。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;

私たちは、サーバーを実行します：HTMLは次のように出てきます

ページを更新

[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!が

をリフレッシュ示しテンプレートがレンダリングされていないようだが、私の友人は、それがあるとして働いていたチュートリアルをやった最後の時間（

なぜこのサーバーはファイル/からサービスを受けていないのですか？

コードがhttps://bitbucket.org/servandoavila1/codetutorials

であるあなたがdocument.addEventListener('DOMContentLoaded', function() {を使用するための必要はありません

出典

2017-02-02 Servando Avila

コンソールには何もありませんか？ – patrick

私は上記のコンソールを追加しました。あなたが期待していたプリントを行います。 Chromeのコンソールは、 –

ありがとうございます。

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

ページを更新するときに 'Hello world！'を表示する理由を知っていますか？ –

私はそれを自分のやり方で行い、意外にもうまくいきません。 Google Chromeを使用して、ハードをリフレッシュしてください。サーバーまたはフロントエンドでエラーが発生しない –

React.createElementの代わりにを試してみてください –

あなたの最後の実行npm run compileをしたときは？

私はチュートリアルを自分でやっただけで、同じ問題に遭遇しました。 Reactを追加したあと、npm run compileを再度実行して解決できました。

Reactが追加された後にbundle.jsを再度コンパイルする必要があるため、このチュートリアルでは手順がない可能性があります。

出典

2017-02-02 05:00:24 ZOAN

は、あなたのWebPACKの設定

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

にpublicPathを設定し、あなたの.babelrc

ヒントに['es2015', 'react']プリセットを持っていることを確認してみてください：main.jsにあなたは、この

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

のように行うことができます

出典

2017-02-02 13:30:36

loader.config.jsファイルでJSXローダーを使用してください：

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

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

出典

2017-08-22 09:01:37

DOMにレンダリングされない反応コンポーネント

答えて

関連する問題