https://github.com/j7-dev/wp-react-plugin
WordPress starter template with React.js framework, support to PHP 8.0.0
https://github.com/j7-dev/wp-react-plugin
axios react rest-api typescript vite wordpress wordpress-plugin wordpress-rest-api wordpressplugin
Last synced: 5 days ago
JSON representation
WordPress starter template with React.js framework, support to PHP 8.0.0
- Host: GitHub
- URL: https://github.com/j7-dev/wp-react-plugin
- Owner: j7-dev
- License: gpl-2.0
- Created: 2023-01-19T18:20:07.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-22T10:46:02.000Z (almost 2 years ago)
- Last Synced: 2024-04-22T12:15:04.414Z (almost 2 years ago)
- Topics: axios, react, rest-api, typescript, vite, wordpress, wordpress-plugin, wordpress-rest-api, wordpressplugin
- Language: TypeScript
- Homepage:
- Size: 1.66 MB
- Stars: 23
- Watchers: 1
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WP React Plugin
## 💻 `npx create-wp-react-plugin`
> The easiest way to develop a React base WordPress Plugin
🚧live demo
## 📹 demo video
https://github.com/j7-dev/wp-react-plugin/assets/9213776/efb5b3ae-b8d0-408c-8e66-7e6f9e933877
## ⚡Features⚡
1. Easy to Use
```bash
cd /wp-content/plugins
npx create-wp-react-plugin
```
cd to `wp-content/plugins/` in your WordPress project
and `npx create-wp-react-plugin `, that's all the steps
🚩 we use pnpm by default for now
2. CRUD utility function
Default with `getPost` Example, check [functions](https://github.com/j7-dev/wp-react-plugin/tree/master/js/src/api/resources) and [custom hooks](https://github.com/j7-dev/wp-react-plugin/tree/master/js/src/hooks)
3. HMR (Hot Module Reload) for PHP
By using `vite-plugin-live-reload`, the page will auto reload while PHP files changed
4. Multi-React-App in one plugin
By default, we render 2 React App, 1 is for front-end page, and 1 is for admin page. You can add more React App in `js/src/main.tsx`
5. Plugin Update Checker
Once you publish a release on Github, the user installed your plugin will receive a notification in `wp-admin/plugins.php`
6. Plugin Dependencies Checker
Does your plugin rely on another plugin like WooCommerce, Learndash etc...?
By defining the `$required_plugins`, we can easily manage plugin dependencies.
7. 1-click release
Simply type `pnpm release` and the command will execute a series of command in `release/.release-it.cjs`, like `pnpm build`, `composer install` etc..., and finally publish a release on github
see more configuration in [release-it](https://www.npmjs.com/package/release-it)
---
## Before getting start
You MUST have `nodejs v18+` and `composer` installed
Here are tech stacks (knowledge you need to have) we used
#### Front-end
1. [Vite v5](https://vitejs.dev/) - build tool
2. [React v18](https://beta.reactjs.org/)
3. [TypeScript v5](https://www.typescriptlang.org/docs/) - compile project with type safe
4. [Tailwind v3](https://tailwindcss.com/) - you can install any UI library, like Ant Design, MUI, Chakra...etc
5. [SCSS](https://sass-lang.com/documentation/syntax)
6. [React Query v5]([https://tanstack.com/query/v4](https://tanstack.com/query/latest/docs/framework/react/overview)) - managing API status
#### Front-end (Optional)
1. [React Router v6](https://reactrouter.com/en/main) - front-end router
We highly recommend you to use Hash router in WordPress, so you won't get conflict with WordPress Permalink
#### Back-end
Libraries we used
```js
"kucrut/vite-for-wp": "^0.8.0", // the core of vite integrated with wp
"yahnis-elsts/plugin-update-checker": "^5.3", // update checker
"j7-dev/tgm-plugin-activation-forked": "^1.0", // check plugin dependency, forked from TGMPA
"micropackage/singleton": "^1.1", // singleton pattern
// php code standard
"squizlabs/php_codesniffer": "@stable",
"wp-coding-standards/wpcs": "@stable",
"dealerdirect/phpcodesniffer-composer-installer": "@stable"
```
---
## Dev
```bash
cd wp-content/plugins/
pnpm dev
```
Sure we have HMR when you change the front-end content
---
## Build Before you release
```bash
cd wp-content/plugins/
pnpm release:build-only
```
This command will build the release version of your plugin without publish to Github in `release` directory, you can see a `zip` file and a directory with ``
I often use this command to test my release version plugin on my test site.
We can move to next step after checking everything works well.
---
## Release
```bash
cd wp-content/plugins/
pnpm release # this will git tag a patch version, you can choose `pnpm release:minor` or `pnpm release:major`
```
This command will build the release version and publish the plugin `zip` file to Github.
The user installed your plugin will receive a notification.
---
## Any Suggestion ?
Welcome to open issue and start a discussion 🎉🎉🎉
If this project is useful for you, please give me a github star ⭐
---
## Buy Me a Coffee ☕
[Help Me to Build More Stunning Project 🤟](https://api.payuni.com.tw/api/period/U00521125/DxZBpmEGzO)
---
## Reference
1. Inspired by [Vite for WP](https://github.com/kucrut/vite-for-wp)
2. API design Inspired by [Refine](https://refine.dev/)
3. [WordPress REST API Handbook](https://developer.wordpress.org/rest-api/reference/)