\/\/ JSX syntax\nedit: function( props ) {\n return (\n <div className={ props.className }>\n Hello World!\n <\/div>\n );\n}<\/code><\/pre>\n\n\n\nBut that code won’t run, you need to convert them<\/strong> into normal syntax:<\/p>\n\n\n\n\/\/ Converted to normal syntax\nedit: function( props ) {\n return element.createElement( 'div', {\n className: props.className\n },\n 'Hello World!'\n );\n}<\/code><\/pre>\n\n\n\nFollow the steps below to learn how to convert them!<\/p>\n\n\n\n
Step 1: Install Node JS<\/h2>\n\n\n\n\nDownload Node JS<\/a><\/div>\n<\/div>\n\n\n\nSelect the LTS Version as recommended and install it.<\/p>\n\n\n\n
Check if it’s successfully installed by running this command:<\/p>\n\n\n\n
node -v<\/code><\/pre>\n\n\n\nIf you see the version number, then you’re good to go. Otherwise, try restarting your computer first.<\/p>\n\n\n\n
Step 2: Create Config File<\/h2>\n\n\n\n
For this example, we are assuming our theme structure looks like this:<\/p>\n\n\n\n
my-theme\/\n\u251c\u2500\u2500 js\/\n\u251c\u2500\u2500 jsx\/\n\u2502 \u2514\u2500\u2500 my-block.js\n\u251c\u2500\u2500 index.php\n\u251c\u2500\u2500 page.php\n\u251c\u2500\u2500 ...<\/code><\/pre>\n\n\n\nThe folder \/jsx<\/code> is where our pre-compiled javascript lies. Later it will be compiled into \/js<\/code>.<\/p>\n\n\n\nNow, create a config file named package.json<\/code> in your theme’s root folder:<\/p>\n\n\n\n{\n \"name\": \"my-block\",\n \"private\": true,\n \"author\": \"Henner Setyono (https:\/\/pixelstudio.id\/blog)\",\n \"devDependencies\": {\n \"@wordpress\/components\": \"^9.5.0\",\n \"@wordpress\/scripts\": \"^9.0.0\"\n },\n \"scripts\": {\n \"watch\": \"wp-scripts start jsx\/my-block.js --output-path=js\",\n \"build\": \"wp-scripts build jsx\/my-block.js --output-path=js\"\n }\n}<\/code><\/pre>\n\n\n\nImportant<\/strong>: Adapt the scripts<\/code> part to fit your project.<\/p>\n\n\n\nYou can also define multiple JS:<\/p>\n\n\n\n
\"watch\": \"wp-scripts start jsx\/my-block.js jsx\/other-block.js --output-path=js\",<\/code><\/pre>\n\n\n\nStep 2b (Optional): Create Sample JavaScript<\/h2>\n\n\n\n
If you don’t have any script to compile, use this sample to try:<\/p>\n\n\n\n
import { registerBlockType } from '@wordpress\/blocks';\nimport { RichText } from '@wordpress\/block-editor';\n\nregisterBlockType( 'my\/custom-block', {\n\ttitle: 'Custom Block',\n\ticon: 'universal-access-alt',\n\tcategory: 'layout',\n\tattributes: {\n\t\tcontent: {\n\t\t\ttype: 'array',\n\t\t\tsource: 'children',\n\t\t\tselector: 'p',\n\t\t},\n\t},\n\texample: {},\n\tedit: ( props ) => {\n let atts = props.attributes;\n\n\t\treturn (\n\t\t\t<RichText\n\t\t\t\ttagName=\"p\"\n\t\t\t\tclassName={ props.className }\n value={ atts.content }\n\t\t\t\tonChange={ ( newContent ) => {\n setAttributes( { content: newContent } );\n } }\n\t\t\t\/>\n\t\t);\n\t},\n\tsave: ( props ) => {\n let atts = props.attributes;\n\n\t\treturn (\n\t\t\t<RichText.Content tagName=\"p\" value={ atts.content } \/>\n\t\t);\n\t},\n} );<\/code><\/pre>\n\n\n\nStep 3: Install Dependencies<\/h2>\n\n\n\n
Open command prompt \/ terminal in your theme and run this command:<\/p>\n\n\n\n
npm install<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/06\/compile-jsx-npm-install.jpg\")
There are a lot of WARNING but you can safely ignore them<\/figcaption><\/figure>\n\n\n\nAfter finish, you will see \/node_modules<\/code> folder. If you use Git, make sure to ignore this folder.<\/p>\n\n\n\nStep 4: Compile!<\/h2>\n\n\n\n
Run this command to compile your JS everytime it changes:<\/p>\n\n\n\n
npm run watch<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/06\/compile-jsx-watch.jpg\")
Compiling the JS everytime it changes<\/figcaption><\/figure>\n\n\n\nAfter you finished developing your custom block, run this command to minify<\/strong> it:<\/p>\n\n\n\nnpm run build<\/code><\/pre>\n\n\n\n
\n\n\n\nConclusion<\/h2>\n\n\n\n
The main reason to use JSX is to make your code cleaner and easier to read<\/strong>. Yes, the setup process can be confusing, but it’s worth the effort.<\/p>\n\n\n\nTo learn how to make custom Gutenberg block, read our tutorial<\/a>. It uses normal syntax, but you can replace it with our sample JS above.<\/p>\n\n\n\n