Do You Need to Know React as a WordPress Developer?

The short answer is, it depends. If you’re a WordPress developer who only works with themes and plugins that don’t use JavaScript heavily, then you might not need to learn React. However, if you’re developing custom themes or plugins, or if you’re working with WordPress’s new Gutenberg editor, then knowledge of React can be very beneficial.

Why React?

React is a JavaScript library for building user interfaces, developed by Facebook. It allows developers to create large web applications that can update and render efficiently in response to data changes.

WordPress’s new Gutenberg editor is built using React. This means that if you want to extend the editor by creating custom blocks, you’ll need to know React.

Creating a Simple Carousel Block with React

Let’s create a simple carousel block using React. A carousel is a slideshow for cycling through a series of pictures. We’ll break down the process into small, easy-to-understand steps.

Step 1: Setting Up Your Development Environment

Before we start coding, we need to set up our development environment. We’ll need Node.js and npm (which comes with Node.js) installed on our computer. We’ll also need a code editor, like Visual Studio Code.

# Check if Node.js is installed
node -v

# Check if npm is installed
npm -v

If these commands return a version number, it means Node.js and npm are installed. If not, you’ll need to download and install Node.js.

Step 2: Creating a New Plugin

In your WordPress installation, navigate to the wp-content/plugins directory. Here, create a new directory for your plugin. Let’s call it my-carousel-block.

Inside this directory, create a new file called my-carousel-block.php. This will be the main file of our plugin.

PHP

<?php
/**
 * Plugin Name: My Carousel Block
 * Description: A simple carousel block for Gutenberg, built with React.
 * Version: 1.0
 * Author: Your Name
 */

This header comment makes WordPress recognize our plugin.

Step 3: Enqueueing Our Block’s Assets

In the same my-carousel-block.php file, let’s enqueue our block’s JavaScript and CSS files.

PHP

function my_carousel_block_enqueue() {
    wp_enqueue_script(
        'my-carousel-block-editor-script',
        plugins_url('block.build.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(plugin_dir_path(__FILE__) . 'block.build.js'),
        true
    );

    wp_enqueue_style(
        'my-carousel-block-editor-style',
        plugins_url('editor.css', __FILE__),
        array('wp-edit-blocks'),
        filemtime(plugin_dir_path(__FILE__) . 'editor.css')
    );
}

add_action('enqueue_block_editor_assets', 'my_carousel_block_enqueue');

This code tells WordPress to load our block’s JavaScript and CSS files when the block editor is loaded.

Step 4: Creating the Block with React

Now, let’s create our block. In your plugin directory, create a new directory called src. Inside src, create a new file called block.js. This is where we’ll write our React code.

const { registerBlockType } = wp.blocks;

registerBlockType('my-carousel-block/carousel', {
    title: 'Carousel',
    icon: 'images-alt2',
    category: 'layout',
    edit: () => <div>A simple carousel block.</div>,
    save: () => <div>A simple carousel block.</div>,
});

This code registers a new block in Gutenberg. The edit function defines what the block looks like in the editor, and the save function defines what the block looks like on the front end.

Step 5: Building the Block

Finally, we need to build our block. In your plugin directory, create a new file called webpack.config.js. This is our Webpack configuration file.

JavaScript

const path = require('path');

module.exports = {
    entry: './src/block.js',
    output: {
        path: path.resolve(__dirname, ''),
        filename: 'block.build.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
        ],
    },
};

This configuration tells Webpack to take our block.js file, transpile it with Babel, and output the result to block.build.js.

To build the block, run the following command in your terminal:

npx webpack

This will create a new file called block.build.js in your plugin directory. This file contains the built version of our block.

And that’s it! You’ve created a simple carousel block with React. While this block doesn’t do much yet, it serves as a starting point for creating more complex blocks.

Conclusion

As a WordPress developer, learning React can open up new possibilities for extending WordPress, especially with the new Gutenberg editor. While it’s not strictly necessary, it’s a valuable skill to have in your toolkit.

Remember, the best way to learn is by doing. Try creating your own blocks, and don’t be afraid to make mistakes. Happy coding!

Note: This is a simplified example and might not be suitable for production use. For a complete guide on creating Gutenberg blocks, check out the official WordPress Block Editor Handbook.

Disclaimer: This blog post is a general guide and does not guarantee that the reader will become proficient in React or WordPress development. It is always recommended to refer to official documentation and tutorials for comprehensive learning and professional development.

: Download and install Node.js : Official WordPress Block Editor Handbook