jsxからの反応成分がhtmlにレンダリングされない

Question

私は基本的なプログラムで試してみると、反応してウェブパックの設定をするのが新しいです。

localhost：8080で実行中に例外が発生することはありませんが、Render Componentのreturn文ではデータを見ることができません。私を助けてください：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import SearchBar from '../search/search_bar'; 

export default class Index extends React.Component{ 

    render() 
    { 
     return (<div>Hi Its me</div>); 
    } 

}

HTMLページ：

React Component is here: 
    <Index/> 
    <script src="bundle.js"></script> 

webpack.config.js：

var path = require('path'); 

    webpack = require('webpack'); 

    var BUILD_DIR = path.resolve(__dirname, './src/client/public'); 

    var APP_DIR = path.resolve(__dirname, './src/client/app'); 

    module.exports = { 
       entry: APP_DIR + '/index.jsx', 

    output: { 
      path: path.join(__dirname, 'dist'), 
      filename: 'bundle.js', 
      publicPath: '/public/' 
      }, 

    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    }, 

    resolve: { 
     extensions: ['', '.js', '.jsx'], 
    } 
    }; 

Answer 1

することができます」

私は、コンポーネントに反応コンポーネントをHTMLファイルですので、

<Index/> 
<script src="bundle.js"></script> 

は無効です。あなたは、このようなReactDOM.render方法、使用してエントリファイルindex.jsでアプリケーションをレンダリングする必要があります。

ReactDOM.render(
    <Index />, 
    document.getElementById('#app'), 
) 

を次に、このようにHTMLファイルにそのタグを作成します。

<div id="app"></div> 
<script src="bundle.js"></script> 

JSXの原則があることです使い慣れた構文を使用してJavaScript内でHTMLをレンダリングすることができます。すべてのコンポーネントは、常にJSファイルの内部からレンダリングする必要があります。