开始反应：意外令牌答案

【问题标题】：beginning react: unexpected token开始反应：意外令牌
【发布时间】：2020-03-21 00:37:16
【问题描述】：

我刚刚开始反应。我正在开发一个 Hello World 应用程序。我的 index.js 如下：

import React, { Component } from 'react';
import ReactDom from 'react-dom';


class App extends Component{
    render() {
        return (
            <H1>Hello World</H1>
        );
    }
}

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

当我尝试编译：npm run dev 时，我收到一个指向 <H1> 的错误，说“意外令牌”。

我该如何解决这个问题？

谢谢

更新 1

同样的反应

Unexpected token (8:12)

   6 |     render() {
   7 |         return (
>  8 |             <h1>Hello World</h1>
     |             ^
   9 |         );
  10 |     }
  11 | }

更新 2 - 更多信息：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

.babrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["transform-class-properties"]
}

package.json

{
  "name": "leadsmanager",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development ./frontend/frontend/src/index.js --output ./frontend/frontend/static/frontend/main.js",
    "build": "webpack --mode production ./frontend/frontend/src/index.js --output ./frontend/frontend/static/frontend/main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.1",
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

前端/前端/src/components/App.js

import React from 'react';
import ReactDom from 'react-dom';


class App extends React.Component{
    render() {
        return (
            <p>Hello World</p>
        );
    }
}

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

/frontend/frontend/src/components/index.js

import App from './components/App';

【问题讨论】：

应该是<h1>。澄清;你只大写组件，而不是常规的 html 语法。
没有变化。同样的问题。还有其他地方可以看吗？
很难在没有看到整个设置的情况下提出解决方案，但您的开发环境似乎未配置为处理 jsx。 jsx 需要用 babel 转译。
好的。更多信息。这有帮助吗？
只是为了确定，.babrc 应该被称为 .babelrc

标签： reactjs react-dom

【解决方案1】：

它应该是小写 - <h1> 和 </h1>

【讨论】：

【解决方案2】：

使用 React 时，要记住的一般经验法则是，所有 DOM 元素的编写方式应与在 HTML 文档中的编写方式相同。而 React 组件应始终使用 PascalCase 命名。例如。 <MyComponent />

【讨论】：