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

理解不足でしたーーー。

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

【WordPress】 React JSX記法は Babel をインストール

たろReactのJSX記法とかBabelってなに？こんな疑問を解決します。本記事の内容ReactのJSX記法とBabelの関係を知るJSX記法で実装した場合はコンパイルが必要コンパイルの方法を紹介WordPressでReact開発を行うにあ...

tarovlog.com

2021.03.05

【WordPress】記事ごとにReactを有効にする

記事ごとでReactを使った実装を記録しておきたいケースがこれから増えそうだなと思い、Cocoonデフォルトの「カスタムCSS」や「カスタムJavaScript」を真似て、「カスタムReact」を作ってみました！！あまり参考にされる方はいな...

tarovlog.com

2021.03.04

ですが、コンパイル済みのコードであれば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を使うことは宣言済みです。

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

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

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

あとがき

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

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

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