Javascript React不呈现新组件、新网页包设置

今天我正在建立我的第一个网页Bebel React项目，我在这里遇到了一些奇怪的情况。我不知道为什么，但我制作的每个组件都不被React识别。我可以直接在inspector中看到它，它似乎没有被编译。所有标准HTML元素都将被呈现。甚至我创建的组件的构造函数中的console.log也没有被调用。我用webpack-p运行热模式

这是我的网页配置：

    const ExtractTextPlugin = require('extract-text-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

const isProduction = process.env.NODE_ENV === 'production'
const cssDeveloperLoaders = ['style-loader', 'css-loader', 'sass-loader']
const cssProduction = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    loader: ['css-loader', 'sass-loader'],
    publicPath: '/dist'
})

const cssConfig = isProduction ? cssProduction : cssDeveloperLoaders

module.exports = {
    entry: {
        app: './src/app.jsx'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: cssConfig
            },
            {
                test: /\.jsx$/,
                exclude: path.resolve(__dirname + '/node_modules/'),
                use: 'babel-loader',
                query: {
                    presents: ['es2015','react']
                }
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        hot: true,
        open: true,
        openPage: ''                    //Fix to webpack version 3.0.0 after removing redirection to /undefined
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'app.css',
            disable: !isProduction,     //So if production is running it will generate file otherwise not
            allChunks: true
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    ]
}

我的宝贝

{
    "presets": [
        "es2015",
        "react"
    ]
}

App.jsx：

import './app.scss'

import React from 'react';
import { render } from 'react-dom';


import engine from './engine.jsx'


render(
    <engine/>,
    document.getElementById('root')
);

import./app.scss'
从“React”导入React；
从'react dom'导入{render}；
从“./engine.jsx”导入引擎
渲染(
,
document.getElementById（'root'））
);

engine.jsx

import React from 'react';


class engine extends React.Component{
    constructor(){
        super();
        console.log('Component has been constructed ')
    }
    render(){
        return(
            <div>xD</div>
        )
    }
}
export default engine;

    class Engine extends React.Component{
        constructor(){
            super();
            console.log('Component has been constructed ')
        }
        render(){
            return(
                <div>xD</div>
            )
        }
    }

export default Engine;

从“React”导入React；
类引擎扩展了React.Component{
构造函数（）{
超级（）；
console.log（'组件已构建'）
}
render（）{
返回(
除息的
)
}
}
导出默认引擎；

这张照片是铬的延伸

请注意，未调用console.log

我的html是空的，我只看到引擎元素（未编译）

对这个问题有什么建议吗

HTML:

在您的网页包配置文件中添加

决心：{ 扩展名：[“.js”、“.jsx”] }

这样您就不需要使用extension导入jsx文件

类名应该以大写字母开头，否则将不会调用react组件中的方法，也不会抛出错误

engine.jsx

import React from 'react';


class engine extends React.Component{
    constructor(){
        super();
        console.log('Component has been constructed ')
    }
    render(){
        return(
            <div>xD</div>
        )
    }
}
export default engine;

    class Engine extends React.Component{
        constructor(){
            super();
            console.log('Component has been constructed ')
        }
        render(){
            return(
                <div>xD</div>
            )
        }
    }

export default Engine;

类引擎扩展React.Component{
构造函数（）{
超级（）；
console.log（'组件已构建'）
}
render（）{
返回(
除息的
)
}
}
导出默认引擎；

App.jsx

import Engine from './engine'
render(
    <Engine/>,
    document.getElementById('root')
);

从“./Engine”导入引擎
渲染(
,
document.getElementById（'root'））
);

请核实

---

此外，您还可以参考

，因为您已经有一个.babelrc文件，请删除查询：{presents:['es2015'，'react']}这是从您的webpack.config.js中删除的。也可以使用此测试替换babel loader测试条件：/\（js | jsx）$/，发布您的index.htmlalso@VivekN你说的我都照样做了，我的正则表达式也很好，我总是使用它。@VivekN这并不重要，但我会使用

/\.jsx？$/

谢谢，这是我的一个大错误。关于大写字母你是100%正确的。谢谢你指出这一点。我还添加了决心，正如你所说，它工作得非常完美。