webpack / react / babel不編譯JSX

Question

我知道有很多類似的問題，但我沒有找到解決方案，其中一些是舊的，所以他們不適用。

我已經為反應創建了一個Webpack環境，但是沒有編譯JSX語法。

我正在使用：

"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",

在我的babel.config.js我有：

  ...
  'presets': [
    [
      '@babel/preset-env',
      {
        'targets': {
          'chrome': 61,
        },
        'modules': false,
        'useBuiltIns': 'usage'
      },
      '@babel/preset-react'
    ]
  ],
  ...

我可以像這樣編譯反應代碼：

import React from 'react'
import ReactDOM from 'react-dom'
require('./scss/main.scss')

const e = React.createElement

class LikeButton extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      liked: false
    }
  }

  render () {
    if (this.state.liked) {
      return 'You liked this.'
    }

    return e(
      'button',
      {
        onClick: () => this.setState({
          liked: true
        })
      },
      'Like'
    )
  }
}

const domContainer = document.querySelector('#like_button_container')
ReactDOM.render(e(LikeButton), domContainer)

但是當我嘗試使用JSX時

const name = 'Name';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

它抱怨<所述的h1

我的回購：

https://github.com/sebalaini/test

Answer 1

將@babel/preset-react到配置之外@babel/preset-env （將其移到數組外），如下所示：

presets: [
  ["@babel/preset-env", {...}],
  "@babel/preset-react",
]

@babel/preset-react應與@babel/preset-env處於同一級別（ presets頂級）。

Answer 2

代碼中的const element不是有效的React組件。 您需要返回一個函數，並始終使用大寫字母啟動組件名稱。

// Always import React at the top of the file!
import React from 'react';

function Person(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Person name="Name of the person" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

有關組件的更多信息，請訪問： https ： //reactjs.org/docs/components-and-props.html