The React development mode provides useful warnings and errors. It’s therefore useful when developing Gutenberg blocks.
However Gutenberg loads the minified production build of React by default, as it it offers better performance.
WordPress 5.0 Update
WordPress 5.0 contains a regression that does not allow React to be loaded in development mode, as described in this article, see Trac Ticket #45535. As a work around, you can download this code snippet, and enable it as a MU Plugin, or place it somewhere else in your custom code.
Enabling Script Debug
To use the React development mode in Gutenberg, you need to set the
SCRIPT_DEBUG constant in your
wp-config.php file to true.
define( 'SCRIPT_DEBUG', true );
As a result, Gutenberg will load the development version of React, and all other third party script dependencies.
Verifying the React Build
To verify which version of React is running, you can use the React Developer Tools for Chrome. It adds an icon to the browser that changes depending on which React version is running.
If you are on a website using the React production build, the icon will have dark background:
However of the development build of React is loaded, the icon will have an orange background:
You are now ready to start developing your own Gutenberg blocks. If you’re not yet familiar with developing custom Gutenberg blocks, consider reading this guide for learning Gutenberg development in 6 days.