スポンサーリンク

WordPressでReact開発時、Babelがなくても実装できる

基礎知識
スポンサーリンク
本ページにはプロモーションが含まれています。

理解不足でしたーーー。

よくよく考えてみれば当たり前で、JSX記法で書かれたReactをBabelというライブラリでJavaScriptにコンパイルする必要があって・・・という記事を書いていました。

ですが、コンパイル済みのコードであればJavaScriptのままでいいんですよね。

この場合、JSX記法で実装できない点がデメリットでしょうか。

スポンサーリンク

ReactのJavaScript実装

具体的には下記のように実装すればOK。

ReactDOM.render(wp.element.createElement
    (
        "h1", 
        null, 
        "Hello, world!"
    ), 
    document.getElementById('root')
);
const {createElement} = wp.element

ReactDOM.render(React.createElement
    (
        "h1", 
        null, 
        "Hello, world!"
    ), 
    document.getElementById('root')
);
ReactDOM.render(React.createElement
    (
        "h1", 
        null, 
        "Hello, world!"
    ), 
    document.getElementById('root')
);

このときReactを使うことは宣言済みです。

3番目のように wp.element を宣言しなくても実装できます。

下記にレンダリング先のHTMLを書いています。

<div id="root"></div>

あとがき

最初の頃は理解していた気がしますが、いろいろやっていくうちに頭の整理がごちゃごちゃになっていたようです。

まだ完全に理解できていないようですが、ここで一度リセットできたのでよかったです。

もっともっとReactに触れて慣れていかなきゃ。

タイトルとURLをコピーしました