HTMLを挿入するために、コードを反応させ、作業していないようです

スポック：

私は反応するように新たなんだと私は本当にそれを動作させる方法を知っていません。私は単に私のHTMLでこの単純なコードを追加しようとしているが、それは動作するようには思えない、私がなぜ分かりません

ここに私のコードです

const element = React.createElement;
class Menu extends React.Component {
  render() {
    return <h1>Hello World! < /h1>
  }
}
const domContainer = document.querySelector('#menu_js');
ReactDOM.render(element(Menu), domContainer);

アレックス・L：

あなたはJSXせずにそれをしたいですか？JSX手段がなければ、あなたはバベルなどは必要ありません。

私は唯一の理由は、あなたがのための機能を設定することで、これを想定していますReact.createElement。

もしそうなら、あなたはこれを行うことができます：

const element = React.createElement;
class Menu extends React.Component {
  render() {
    return element('h1',null,'Hello World!');
  }
}
const domContainer = document.querySelector('#menu_js');
ReactDOM.render(element(Menu), domContainer);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="menu_js"></div>

OR-あなたはJSXを使用したい場合

次に、あなたは（ちょうどバベルを有効にする）このようにそれを行うことができます。

const element = React.createElement;
class Menu extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}
const domContainer = document.querySelector('#menu_js');
ReactDOM.render(element(Menu), domContainer);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="menu_js"></div>

PS私はJSXなしと「D3様」構文で要素を反応させ、あなたが作成することができますライブラリに取り組んでいます。（https://github.com/Alex-ley/react-kopplung）

あなたが興味を持っている場合は、あなたの例は次のようになります。

const element = React.createElement;
class Menu extends React.Component {
  render() {
    const returnObj = new ReactKopplung();    
    returnObj
      .setRoot('h1') /* Or .setRoot('<>') for a fragment */
        .setText('hello world!');
            
    return returnObj.rootNode().render();
  }
}
const domContainer = document.querySelector('#menu_js');
ReactDOM.render(element(Menu), domContainer);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Alex-ley/[email protected]/ReactKopplung.js"></script>
<div id="menu_js"></div>

HTMLを挿入するために、コードを反応させ、作業していないようです

おすすめ