WP React Kit - WordPress Plugin development kit with React JS and WP scripts

N/A

Posted 2 years ago

Total View - 1643

WP React Kit - WordPress Plugin development kit with React JS and WP scripts

Github URL: https://github.com/ManiruzzamanAkash/wp-react-kit

A simple starter kit to work in WordPress plugin development using WordPress Rest API, WP-script, React, React Router, Tailwind CSS, PostCSS, Eslint, WP-Data, WP-Data Store, React Components, React CRUD, i18n, PHPUnit Test, JestUnit Test, e2e Test and PHP OOP plugin architecture easily in a minute.

 

What's included?

  1. WordPress Rest API
  2. WP-script Setup
  3. React
  4. React Router
  5. TypeScript
  6. Tailwind CSS [Nested + ]
  7. Scss
  8. PostCSS
  9. Eslint
  10. WP-Data
  11. WP-Data Redux Store [Redux Saga, Generator function, Thunk, Saga Middleware]
  12. React Components
  13. React CRUD Operations [Continuing...]
  14. Internationalization - WP i18n
  15. PHPUnit Test [Test + Fix]
  16. JestUnit Test
  17. Jest-Pupetter e2e Test
  18. PHP OOP plugin architecture [Traits + Interfaces + Abstract Classes]

 

Quick Start

# Clone the Git repository
git clone https://github.com/ManiruzzamanAkash/wp-react-kit.git

# Install PHP-composer dependencies [It's empty]
composer install

# Install node module packages
npm i

# Start development mode
npm start

# Start development with hot reload (Frontend components will be updated automatically if any changes are made)
npm run start:hot

# To run in production
npm run build

After running start, or build command, there will be a folder called /build will be generated at the root directory.

 

Activate the plugin

You need activate the plugin from plugin list page. http://localhost/wpex/wp-admin/plugins.php

 

Run PHP Unit Test

./vendor/bin/phpunit

 

Run Jest Unit Test

npm run test:unit

 

Run Jest-Pupeteer e2e Test

WordPress core doc link: https://make.wordpress.org/core/2019/06/27/introducing-the-wordpress-e2e-tests/

Requirements:

  • Must have docker installed and running by ensuring these commands -
npm run env:stop
npm run env:start

Normal e2e test

npm run test:e2e

Interactive e2e test

npm run test:e2e:watch

 

PHP Coding Standards - PHPCS

Get all errors of the project:

vendor/bin/phpcs .

Fix all errors of the project:

vendor/bin/phpcbf .

 

Browse Plugin

http://localhost/wpex/wp-admin/admin.php?page=jobplace#/

Where, /wpex is the project root folder inside /htdocs.

Or, it could be your custom processed URL.

 

 

 

 

 

Tags: WP React Kit - WordPress Plugin development kit with React JS and WP scripts

Review

Not reviewed yet