Do You Need to Know React as a WordPress Developer?

Josh Pollock
Josh Pollock
Share

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.

Gutenberg is a JavaScript-driven interface. Specifically, it is built using Facebook’s open-source user interface library “React”. This post explains a little bit about creating your own custom blocks for use in the Gutenberg editor using JavaScript. You do not have to use JavaScript to create blocks. Advanced Custom Fields (ACF) recently announced a neat looking system for creating custom blocks with PHP.

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 jQuery.html() or jQuery.val(), React creates a virtual representation of the DOM. We call this a virtual DOM or VDOM. The VDOM is a JavaScript object that represents the structure of the DOM. Whenever your React code communicates to React a change in any of the data, the VDOM is recalculated. After that React calculates the difference between the DOM as it existed before the change and after the change. Then React (really ReactDOM or React Native) updates just the parts of the DOM that needs changed. How it does this doesn’t matter really.

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.

Do I Need To Know React To Develop With Gutenberg?

So, this brings us to the big question, do you need to learn React? No, you do not. None of this matters unless you want to make your own blocks. If you just want to use the blocks provided by core or plugins, you never need to make your own block types.

No. But…

You can create a basic block without knowing much JavaScript. Take a look at this basic example block, simplified from the official Gutenberg examples:

( function( blocks, element ) {
    var el = element.createElement;
    blocks.registerBlockType( 'namespace/block-name', {
        title: __( 'Example: Basic', 'gutenberg-examples' ),
        icon: 'universal-access-alt',
        category: 'layout',
        edit: function() {
            return el(
                'p',
                {},
                'Hello World, step 1 (from the editor).'
            );
        },
        save: function() {
            return el(
                'p',
                {},
                'Hello World, step 1 (from the frontend).'
            );
        },
    } );
}(
    window.wp.blocks,
    window.wp.element
) );

The one thing that might be new is using wp.createElement — in this example, it is in the variable “el” — to create HTML. That’s a fancy way to create an html element of the type “p”. I’ll cover that in my next article in this series.

WordPress has an abstraction layer over React, so all you really do need to know are a few functions: wp.createElement, which creates HTML and setAttribute(), which is used to update your block attributes.

I recommend going through the Creating Blocks section of the Gutenberg handbook and then looking over the examples repo as well as the example code from the WordCamp Miami 2018 Gutenberg workshop. That’s all code you can use without digging into React at all.

Yes, If…

If you need to make just simple blocks, maybe with one or two controls, then you do not need to know React more than those two concepts I mentioned before. But, if you want to create a more complex block, share components between Gutenberg and other React apps, for example, a wp-admin settings screen or mobile app for your plugin.

React is a really fun library to play with and proficiency with React is a very marketable skill to have. More importantly, once you learn React, you can more easily understand the more advanced Gutenberg concepts — state management, unit tests, etc.

How To Learn React For WordPress and Gutenberg

This is the start of series on React development for Gutenberg. Next time I’ll cover React basics, and then how to apply them in Gutenberg blocks. From there, we’ll make dynamic blocks then look at state management and testing.

I have a list of Gutenberg developer talks on my site that you might find useful. In this series, I’ll be explaining React concepts, but if you want to learn JavaScript and React deeply, Wes Bos and Zac Gordon have great courses on React and JavaScript to get you started.

Frequently Asked Questions (FAQs) about React and WordPress Development

What are the benefits of using React in WordPress development?

React is a powerful JavaScript library that allows developers to build user interfaces with a high degree of interactivity. It’s component-based architecture allows for code reusability, making development faster and more efficient. Additionally, React’s virtual DOM optimizes rendering and improves app performance. When used in WordPress development, it can enhance the user experience by making the website more dynamic and responsive.

How can I integrate React with WordPress?

React can be integrated with WordPress through the WordPress REST API. This allows you to fetch data from your WordPress site and use it within your React application. You can create custom endpoints in your WordPress theme or plugin, and then use HTTP requests to retrieve or send data to these endpoints from your React app.

What is a headless WordPress CMS and how does it relate to React?

A headless WordPress CMS is a WordPress setup where the front-end (the part users interact with) is decoupled from the back-end (where content is managed). This allows developers to use any technology they prefer for the front-end, including React. This setup can provide more flexibility and performance improvements, as the front-end can be hosted separately and optimized independently from the back-end.

Can I use React with existing WordPress themes?

Yes, you can use React with existing WordPress themes. However, this requires a good understanding of both WordPress and React, as you’ll need to modify the theme’s code to integrate React components. Alternatively, you can use a theme specifically designed for use with React, such as a headless WordPress theme.

What is Frontity and how does it relate to WordPress and React?

Frontity is a free and open source framework for building WordPress themes with React. It provides a simplified way of connecting WordPress and React, handling much of the complex configuration for you. Frontity also optimizes your React theme for server-side rendering, improving performance and SEO.

Are there any drawbacks to using React with WordPress?

While React can greatly enhance a WordPress site’s interactivity and user experience, it does come with a steeper learning curve compared to traditional WordPress development. It also requires a different hosting setup, especially for headless WordPress sites, which can add complexity.

Do I need to know React to be a WordPress developer?

While knowing React is not a requirement to be a WordPress developer, it can be a valuable skill. As WordPress continues to evolve, more and more parts of it are being built with React. Knowing React can open up more opportunities for you as a WordPress developer.

How can I learn React for WordPress development?

There are many resources available to learn React, including online tutorials, courses, and documentation. To specifically apply React to WordPress development, you can explore resources like the official WordPress REST API documentation, or tutorials on integrating React with WordPress.

Can I use other JavaScript libraries or frameworks with WordPress?

Yes, while React is commonly used with WordPress, especially since the introduction of the Gutenberg editor, you can use any JavaScript library or framework that you prefer. This includes Vue.js, Angular, and many others.

What is the future of React and WordPress?

The future of React and WordPress looks promising. With the introduction of the Gutenberg editor, which is built with React, and the growing popularity of headless WordPress setups, it’s likely that the use of React in WordPress development will continue to increase.