WordPress Plugin Development with React JS easily
Tags: react, wordpress, wordpressplugin, javascript
Published: 2022-04-22 05:41:19

Let's describe how to start working in WordPress with React JS.

WordPress plugin development is really a top paying job around the world and with React it's really getting more powerful nowadays.

Let's build a simple wordpress plugin with React JS.

**Step 1:**

Inside plugins directory, create a folder called - `jobplace` which is our plugin.

add composer setup by running - 
```sh
composer init
```

also run 
```sh
npm init
```

install `@wordpress/scripts` by running -
```sh
npm install @wordpress/scripts --save-dev
```

Add some command in `package.json` and final would be - 
```json

  "name": "jobplace",
  "version": "1.0.0",
  "description": "A Job posting platform made by WordPress",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/scripts": "^22.5.0"
  }
}
```

And `composer.json` would be -

```json
{
    "name": "akash/jobplace",
    "description": "A Job posting platform made by WordPress",
    "type": "wordpress-plugin",
    "license": "GPL-2.0-or-later",
    "autoload": {
        "psr-4": {
            "Akash\\Jobplace\\": "includes/"
        }
    },
    "authors": [
        {
            "name": "ManiruzzamanAkash",
            "email": "manirujjamanakash@gmail.com"
        }
    ],
    "require": {}
}
```

Add `webpack.config.js` - 
```js
const defaults = require('@wordpress/scripts/config/webpack.config');

module.exports = {
  ...defaults,
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};
```

Add a template file - `templates/app.php`

```html
<div id="jobplace">
    <h2>Loading...</h2>
</div>
```


**Main Plugin file - `job-place.php`**

```php
<?php
/**
 * Plugin Name:       Job Place
 * Description:       A Job posting platform made by WordPress.
 * Requires at least: 5.8
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            Maniruzzaman Akash
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       jobplace
 */

add_action( 'admin_menu', 'jobplace_init_menu' );

/**
 * Init Admin Menu.
 *
 * @return void
 */
function jobplace_init_menu() {
    add_menu_page( __( 'Job Place', 'jobplace'), __( 'Job Place', 'jobplace'), 'manage_options', 'jobplace', 'jobplace_admin_page', 'dashicons-admin-post', '2.1' );
}

/**
 * Init Admin Page.
 *
 * @return void
 */
function jobplace_admin_page() {
    require_once plugin_dir_path( __FILE__ ) . 'templates/app.php';
}

add_action( 'admin_enqueue_scripts', 'jobplace_admin_enqueue_scripts' );

/**
 * Enqueue scripts and styles.
 *
 * @return void
 */
function jobplace_admin_enqueue_scripts() {
    wp_enqueue_style( 'jobplace-style', plugin_dir_url( __FILE__ ) . 'build/index.css' );
    wp_enqueue_script( 'jobplace-script', plugin_dir_url( __FILE__ ) . 'build/index.js', array( 'wp-element' ), '1.0.0', true );
}
```

**Add React stuff - **

In src/index.js - 
```js
import App from "./App";
import { render } from '@wordpress/element';

/**
 * Import the stylesheet for the plugin.
 */
import './style/main.scss';

// Render the App component into the DOM
render(<App />, document.getElementById('jobplace'));
```

**`src/App.js`** - 
```js
import React from 'react';
import Dashboard from './components/Dashboard';

const App = () => {
    return (
        <div>
            <h2 className='app-title'>Job Place App</h2>
            <hr />
            <Dashboard />
        </div>
     );
}

export default App; 
```

**Add Dashboard Component - `src/components/Dashboard.jsx` **

```jsx

import React from 'react'

const Dashboard = () => {
    return (
        <div className='dashboard'>
            <div className="card">
                <h3>Dashboard</h3>
                <p>
                    Edit Dashboard component at <code>src/components/Dashboard.jsx</code>
                </p>
            </div>
        </div>
     );
}

export default Dashboard;
```

Add style in `src/style/main.scss` - 

```scss
#jobplace {
    .app-title {
        font-size: 1.5em;
        font-weight: bold;
        margin-bottom: 1em;
    }
} 
```

Now run - 
1. Activate the plugin
2. Run the wp-script
```sh
npm start
```

That's it.

**See the final demo -**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uquaffnyat5acpbnyqyz.png)


**Full Article and Github Link in more details explanation - **

https://devsenv.com/tutorials/start-wordpress-plugin-development-with-react-js-easily-in-just-few-steps