從jsx反應組件不呈現爲HTML

我是新的反應和webpack配置只是嘗試與基本的程序。從jsx反應組件不呈現爲HTML

我在localhost：8080中運行時無法看到任何異常，但無法看到渲染組件的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'], 
    } 
    };

來源

2017-05-14 Chaitanya

你可以用」在一箇中渲染組件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文件中呈現。

來源

2017-05-14 18:45:54

從jsx反應組件不呈現爲HTML

回答

相關問題