react入门：控制台不显示错误，但是本地服务器却没有显示写好的组件

Question

react入门：控制台不显示错误，但是本地服务器却没有显示写好的组件

blackcloud2333

48813

发布于
2017-05-18

更新于
2017-05-18

webpack打包不报错，本地服务器跑起来也正常，然后去控制台去找也不报错，但是就是不能正确显示组件。
图片描述

代码
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>React Hello World</title>
</head>
<body>

    <div id="app"></div>
<script src=".././dist/index.js"></script>
</body>
</html>

父组件

'use strict';
import React from 'react';
import ComponentList from "./CommentList";
import ComponentForm from "./CommentForm";
class MessageBox  extends  React.Component {
    render() {
        return (
            <div>
            <h1>评论</h1>
        <ComponentList/>
        <ComponentForm/> 
        </div>
        );
    }··
}
export {MessageBox as default};

子组件

import  React from 'react';

class CommentForm  extends  React.Component {
    render() {
        return (
            <form>
            <div >
            <input type="text" placeholder="姓名"/>
            </div>
            <div >
            <textarea placeholder="评论"></textarea>
            </div>
            <Button type="submit">
            添加评论
            </Button>
            </form>
            );
    }
}
export {CommentForm as default};

子组件

'use strict';
import React from 'react';

class CommentList  extends  React.Component{
    render () {
        return (
            <div>
            评论列表
            </div>
            );
    }
}
export {CommentList as default };

刚入react的坑感觉很奇怪，有问题倒是还好说，但是不报错，我现在就一脸懵逼了....
求大佬指导一下。
现在发现了是打包出现了问题代码没有组件的代码没有打包好，但是问题是webpack竟然也不报错！！！
图片描述

webpack的配置文件

module.exports = {
    entry: './component/main.js', // 入口文件路径
    output: {
        filename: './dist/index.js'
    },
    devServer: {
        inline: true,
        port: 3333
    },
    module: {
        loaders: [
            {
                test: /\.js$/, // babel 转换为兼容性的 js
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'latest']
                }
            }
        ]
    }
}

入口文件main.js;
import React from 'react';
import ReactDOM from 'react-dom';
import MesssageBox from './component/MessageBox.js';
ReactDOM.render(<MesssageBox />, document.getElementById('app'));

react

阅读 4.5k

1 个回答

小小蜗牛

把webpack配置文件贴出来看看

那你的入口文件main.js是什么样的？

撰写回答