ReactJS Components

This document explains how to use simple ReactJS components in your WP Bones plugin. It covers creating a menu in the config/menu.php file, creating a controller using the php bones make:controller command, and setting up the controller to return a view with an admin script. The ReactJS components are stored in the resources/js/ folder, and dependencies need to be installed as described in the Assets section.

ReactJS Boilerplate on GitHub See ReactJS Boilerplate in Action

Overview

If you want to use simple ReactJS components in your plugin, you can use the resources/js/ folder. First of all, you need to install the dependencies as described in the Assets section.

First of all, let’s create a menu. Open the config/menu.php file and add the following code in the menu list:


[
  'menu_title' => 'Simple React Component',
  'route' => [
    'get' => 'SimpleReactController@index',
  ],
],

Create the Controller

By using the php bones command, you can create a controller and a view simultaneously. Execute the following command:


php bones make:controller SimpleReactController

This command will create plugin/Http/Controllers/SimpleReactController.php. Open the file and add the following code:


<?php
 
namespace WPKirk\Http\Controllers;
 
if (! defined('ABSPATH')) {
    exit;
}
 
use WPKirk\Http\Controllers\Controller;
 
class SimpleReactController extends Controller
{
 
  public function index()
  {
      return WPKirk()
        ->view('react' )
        ->withAdminScript('wp-react-component', ['wp-element']); 
  }
 
  public function store()
  {
    // POST
  }
 
  public function update()
  {
    // PUT AND PATCH
  }
 
  public function destroy()
  {
    // DELETE
  }
 
}

Maybe you will need to replace the namespace and the WPKirk() function.

Create the view

In the resources/views folder, create a new file called react.php and add the following code:


<h1>React Component Example</h1>
<div id="react-test"></div>

You may create any complex view. This is just an example.

Create the React Component

In your resources/js/ folder create a new file called wp-react-component.jsx and add the following code:


const { render, useState } = wp.element;
 
const WordPressButton = ({ children, primary, ...others }) => {
  return (
    <button className={`button ${primary ? 'button-primary' : ''}`} {...others}>
      {children}
    </button>
  );
};
 
const FlexContainer = ({ children, justifyContent, alignItems, gap }) => {
  return <div style={{ display: 'flex', justifyContent, alignItems, gap }}>{children}</div>;
};
 
const MyComponent = () => {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <h2>Hello, React World!</h2>
      <p>
        This is a simple React component rendered in a WordPress plugin. It is a counter that increments every time you
        click the button.
      </p>
 
      <FlexContainer gap={14} alignItems="center">
        <WordPressButton onClick={() => setCount(count + 1)}>Click me</WordPressButton>
        <span>{count}</span>
      </FlexContainer>
    </div>
  );
};
 
render(<MyComponent />, document.getElementById('react-test'));

In the resources/views folder, create a new file named react.php and insert the following code:


<div id="react-test"></div>

Starting the development server

To start the development server, execute this command:


npm run start

That’s it!

ReactJS Component

Production build

After completion, remember to execute the build command:


npm run build

ReactJS Boilerplate on GitHub See ReactJS Boilerplate in Action

ReactJS Components

Overview

Create the Menu

Create the Controller

Create the view

Create the React Component

Starting the development server

Production build

HIGHLIGHTS

RESOURCES

ECOSYSTEM