开始反应：意外令牌

Question

我刚刚开始做出反应。我正在开发一个Hello World App。我的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"
  }
}

frontend / frontend / 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';

Answer 1

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

Answer 2

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