ReactJS Applications

If you want to create a more complex ReactJS application, you can use the resources/apps/ folder.

First of all, you need to install the dependencies as described in the Assets section.

Feel free to also install any other dependencies you need. You could install Mantine UI, React Router, etc.

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

[
  'menu_title' => 'React Application',
  'route' => [
    'get' => 'ReactAppController@index',
  ],
],

Create the Controller

By using the php bones command, you can create a controller and a view at the same time. Run the following command:

php bones make:controller ReactAppController

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

<?php
 
namespace WPKirk\Http\Controllers;
 
if (! defined('ABSPATH')) {
    exit;
}
 
use WPKirk\Http\Controllers\Controller;
 
class ReactAppController extends Controller
{
 
  public function index()
  {
      return WPKirk()
        ->view('react-app' )
        ->withAdminAppsScript('app'); 
  }
 
  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.

withAdminAppsScript()

The withAdminAppsScript() method is used to load the ReactJS application. The first parameter is the name of the application and the second parameter indicates whether the CSS modules should also be loaded. The default value is true.

return WPKirk()
  ->view('react-app' )
  ->withAdminAppsScript('app', false); // without CSS modules

You may also create a global variable that can be used in the ReactJS application.

return WPKirk()
  ->view('react-app' )
  ->withAdminAppsScript('app', true, 'ReactApp', [
    'tab' => 'settings',
  ]);

The above example will create a global variable called ReactApp with the value { tab: 'settings' }.

Create the view

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

<h1>React Application Example</h1>
<div id="react-app"></div>

💡

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

Create the React Application

In your resources/apps/ folder, create a new file called app.jsx and add the following code:

const { render } = wp.element;
 
// core styles are required for all packages
import '@mantine/core/styles.css';
import classes from './app.module.scss';
 
import { Route, Routes, BrowserRouter } from 'react-router-dom';
import { MantineProvider } from '@mantine/core';
import { Demo } from './components/Demo';
 
const MyApp = () => {
  return (
    <MantineProvider>
      <h2 className={classes.title}>Say Hello, Mantine Application</h2>
 
      <BrowserRouter basename="/wp-admin/">
        <Routes>
          <Route path="/admin.php" element={<Demo />} />
        </Routes>
      </BrowserRouter>
    </MantineProvider>
  );
};
 
render(<MyApp />, document.getElementById('react-app'));

The above code is just an example. You may create any complex ReactJS application. Here we’re using the Mantine UI library as well as React Router. In addition, we’re using other components in the components folder.

- - - app.jsxMain ReactJS
    - app.module.cssCSS module
    - - Demo.jsxReactJS

Start the development server

Now, you can start the development server by running the following command:

npm run start:apps

That’s all

ReactJS Application

Production Build

Obviously, once completed, remember to run the build command:

npm run build:apps

See it in action

See it in action in your browser

ReactJS Components Blade Template

ReactJS Applications

Create the Menu