

See the JavaScript Build Setup documentation for setting up a development environment using JSX syntax. You will find the majority of code and documentation across the block editor uses JSX. As your codebase grows in complexity it might be a good idea to switch to JSX. In many cases, it is perfectly fine to follow the same approach for simple plugins or experimenting. This code can run straight in your browser and does not require an additional build step. Webpack and babel are the tools that perform this transpilation step.įor simplicity, the JavaScript tutorial uses the Plain definition, without JSX. JSX makes it easier to read and write markup code, but does require a build step to transpile into code compatible with browsers. “JSX” doesn’t refer to a specific version of JavaScript, but refers to the latest language definition plus JSX syntax, a syntax that blends HTML and JavaScript. This step is commonly referred to as a build process.

Plain refers to JavaScript code compatible with WordPress’s minimum target for browser support without requiring a transpilation step. The Block Editor Handbook shows JavaScript examples in two syntaxes: JSX and Plain.

Browse: Home / Block Editor Handbook / How-to Guides / How to use JavaScript with the Block Editor / JavaScript Versions and Build Step JavaScript Versions and Build Step Edit
