反应在小于符号之前出错

Question

我有这样的问题： 在小于符号上反应原生意外标记

这是我所有的东西：

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';

ReactDOM.render(<App/>, document.getElementById('app'));

应用程序.js

import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hi, my name is Cir. I am 19 and from Kiev, Ukraine. How are you ?</h1>  
      </div>
    );
  }
}

索引.html

<!DOCTYPE html>
<html>
<head>
    <title>React ToDos App</title>
</head>
<body>
    <div id="app"></div>

    <script src="bundle.js"></script>
</body>
</html>

webapck.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080/',
        'webpack/hot/only-dev-server',
        './src'
    ],
    output: {
           path: path.join(__dirname, "public"),
           filename: "bundle.js"
    },
    resolve: {
        modulesDirectories: ['node_modules', 'src'],
        extensions: ['', '.js']
    },
    module: {
        loader: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ["react-hot-loader/webpack", "babel?presets[]=react,presets[]=es2015"]
        }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

我的文件树

这里是错误。 它发生在我的 index.js 中的小于符号之前

我还是 React 的新手，很抱歉我未来的愚蠢问题。

Answer 1

你正在使用 babel 预设，所以首先确保你已经安装了babel-preset-loader

npm install babel-preset-loader

还安装babel-core与npm install babel-core

然后在您的 webpack 中，您需要将加载程序编辑为

loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel?presets[]=es2015&presets[]=react']
      }
]

请注意，它的loaders而不是模块中的loader 。

如果这不起作用，那么您可以尝试另一种解决方案，即创建和.babelrc文件，然后将以下内容添加到其中

{
  "presets": ["react", "es2015", "stage-0"]
}

并省略webpack.config.js文件中的预设

Answer 2

您需要将行更改为

import App from "./components/app";
ReactDOM.render(<App />, document.getElementById("app"));

---

如果您尝试使用components/app ，Node 会认为您想使用components模块中的app.js脚本。 您可以在node_modules目录中看到模块。

其中./components/app意味着您要在components目录中使用app.js 。

此外，您需要使用<App />而不是<FirstRender /> ，因为您要导出App类，而不是FirstRender 。