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?
- WordPress Rest API
- WP-script Setup
- React
- React Router
- TypeScript
- Tailwind CSS [Nested + ]
- Scss
- PostCSS
- Eslint
- WP-Data
- WP-Data Redux Store [Redux Saga, Generator function, Thunk, Saga Middleware]
- React Components
- React CRUD Operations [Continuing...]
- Internationalization - WP i18n
- PHPUnit Test [Test + Fix]
- JestUnit Test
- Jest-Pupetter e2e Test
- 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