This article on whether you need to know React as a WordPress developer was originally published by Torque Magazine, and is reproduced here with permission.
The new WordPress content editing system Gutenberg will be powering the WordPress post editor in WordPress 5.0. Gutenberg is a “block-based” editor. When creating content, everything is a block. If you have a post that is one paragraph, one header, and then two paragraphs, that’s four blocks.
Gutenberg comes with a set of default “core” blocks — paragraph, header, recent posts, image, blockquote, etc. If you’re using Gutenberg to create content, you use those blocks or custom blocks that are provided by WordPress plugins you install on your site.
What Is React?
In front-end development, the least performant things you do are reading and writing from the DOM. A very hard thing to do, consistently across browsers, is referencing and updating the DOM. React provides a better system for this, by implementing a reactive programming model and a virtual DOM abstraction.
Instead of interacting with the DOM directly, for example using
How Is React Being Used in Gutenberg?
React is a library for creating reusable components. Because they are reusable, we can compose interfaces out of components. It is an open-source project created at Facebook.
Everything is a block. Text, images, galleries, widgets, shortcodes, and even chunks of custom HTML, no matter if it’s added by plugins or otherwise. You should only have to learn to master a single interface: the block interface, and then you know how to do everything. – Gutenberg Handbook
Blocks are the basic unit of Gutenberg. We compose content out of one or more blocks.
Components are the atomic unit of React, we compose React apps out of components. Gutenberg is created with React, so each block is composed of one or more components.
It’s important to note, and I’ll cover this more in this series of posts, but Gutenberg adds a thin abstraction layer over React. In our Gutenberg code, we’ll use wp.createElement instead of
React.createElement. It works the same, but when React’s API changes, WordPress can decide when to support those changes and provide a backward-compatibility wrapper or decided not to.
This is good planning for the future, but for now, it’s just React.
The post Do You Need to Know React as a WordPress Developer? appeared first on SitePoint.