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.
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 SimpleReactControllerThis 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 startThat’s it!
Production build
After completion, remember to execute the build command:
npm run build
Nextra