如何在PhpStorm中为WordPress Gutenberg创建React.js文件

Question

因此，我正在学习如何与Gutenberg一起工作，并且我相信其中许多教程都在.jsx中展示了它们的代码。我已经做了很多查找，但是不确定我是否做对了。

我尝试过使用TypeScript文件，当我在其中粘贴React代码时，它会询问我是否要切换到React文件格式。我说是的，它会创建一个.jsx文件，然后将其编译为.js文件。

但是，我在WordPress中粘贴的代码给我一个错误：

  

无效的正则表达式：缺少/

我不确定是否要正确设置文件，或者是否有其他错误。我在下面粘贴了我的代码

.JSX

const { registerBlockType } = wp.blocks;

registerBlockType('base-theme/tile-block', {
    title: "Tile Block",
    icon: 'welcome-write-blog',
    category: 'common',
    edit() {
        return (
            <div>Only the editor will show this</div>
        );
    },
    save() {
        return (
            <div>Only the front end will show this</div>
        );
    }
});

.JS编译

var registerBlockType = wp.blocks.registerBlockType;
registerBlockType('base-theme/tile-block', {
    title: "Tile Block",
    icon: 'welcome-write-blog',
    category: 'common',
    edit: function () {
        return Only;
        the;
        editor;
        will;
        show;
        this < /div>;
    }
});
save();
{
    return Only;
    the;
    front;
    end;
    will;
    show;
    this < /div>;
    ;
}
;