Skip to Content
✨ WP Bones 1.9.6 is out! Check the Release Notes →

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.



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.

Create the Menu

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

Last updated on