ReactJS Components

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.

New

Try the WP Bones ReactJS Boilerplate

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

See it in action

See it in action in your browser

Views ReactJS Applications

ReactJS Components

Create the Menu

Create the Controller

Create the view

Create the React Component

Starting the development server

Production build

See it in action

HIGHLIGHTS

RESOURCES

ECOSYSTEM