从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

回答

相关问题