{"id":46928573,"url":"https://github.com/j7-dev/wp-react-plugin","last_synced_at":"2026-03-11T04:02:55.551Z","repository":{"id":110166640,"uuid":"591011550","full_name":"j7-dev/wp-react-plugin","owner":"j7-dev","description":"WordPress starter template with React.js framework, support to PHP 8.0.0","archived":false,"fork":false,"pushed_at":"2024-04-22T10:46:02.000Z","size":1738,"stargazers_count":23,"open_issues_count":5,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-22T12:15:04.414Z","etag":null,"topics":["axios","react","rest-api","typescript","vite","wordpress","wordpress-plugin","wordpress-rest-api","wordpressplugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/j7-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-01-19T18:20:07.000Z","updated_at":"2024-05-12T02:00:14.160Z","dependencies_parsed_at":null,"dependency_job_id":"8f159f00-fad7-450b-a664-a4c29d483217","html_url":"https://github.com/j7-dev/wp-react-plugin","commit_stats":null,"previous_names":["j7-dev/wp-react-plugin"],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/j7-dev/wp-react-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j7-dev%2Fwp-react-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j7-dev%2Fwp-react-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j7-dev%2Fwp-react-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j7-dev%2Fwp-react-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/j7-dev","download_url":"https://codeload.github.com/j7-dev/wp-react-plugin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j7-dev%2Fwp-react-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30370277,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T21:41:54.280Z","status":"online","status_checked_at":"2026-03-11T02:00:07.027Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","react","rest-api","typescript","vite","wordpress","wordpress-plugin","wordpress-rest-api","wordpressplugin"],"created_at":"2026-03-11T04:02:54.438Z","updated_at":"2026-03-11T04:02:55.547Z","avatar_url":"https://github.com/j7-dev.png","language":"TypeScript","readme":"# WP React Plugin\n\n## 💻 `npx create-wp-react-plugin`\n\n\u003e The easiest way to develop a React base WordPress Plugin\n\n\u003cbr\u003e\u003cbr\u003e\n\n🚧live demo\n\n\n## 📹 demo video\nhttps://github.com/j7-dev/wp-react-plugin/assets/9213776/efb5b3ae-b8d0-408c-8e66-7e6f9e933877\n\n\n\n## ⚡Features⚡\n\n1. Easy to Use\u003cbr\u003e\n\n    ```bash\n    cd \u003cyour-WordPress-project\u003e/wp-content/plugins\n    npx create-wp-react-plugin \u003cyour-plugin-name\u003e\n    ```\n\n   cd to `wp-content/plugins/` in your WordPress project\n   and `npx create-wp-react-plugin \u003cyour-plugin-name\u003e`, that's all the steps\n\n\t 🚩 we use pnpm by default for now\n\n2. CRUD utility function\u003cbr\u003e\n   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)\n\n3. HMR (Hot Module Reload) for PHP\u003cbr\u003e\n\tBy using `vite-plugin-live-reload`,  the page will auto reload while PHP files changed\n\n4. Multi-React-App in one plugin\u003cbr\u003e\n\tBy 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`\n\n5. Plugin Update Checker\n\tOnce you publish a release on Github, the user installed your plugin will receive a notification in `wp-admin/plugins.php`\n\n6. Plugin Dependencies Checker\n\tDoes your plugin rely on another plugin like WooCommerce, Learndash etc...?\n\tBy defining the `$required_plugins`, we can easily manage plugin dependencies.\n\n7. 1-click release\n\tSimply 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\n\tsee more configuration in [release-it](https://www.npmjs.com/package/release-it)\n\n---\n\n## Before getting start\n\nYou MUST have `nodejs v18+` and `composer` installed\n\nHere are tech stacks (knowledge you need to have) we used\n\n#### Front-end\n\n1. [Vite v5](https://vitejs.dev/) - build tool\n2. [React v18](https://beta.reactjs.org/)\n3. [TypeScript v5](https://www.typescriptlang.org/docs/) - compile project with type safe\n4. [Tailwind v3](https://tailwindcss.com/) - you can install any UI library, like Ant Design, MUI, Chakra...etc\n5. [SCSS](https://sass-lang.com/documentation/syntax)\n6. [React Query v5]([https://tanstack.com/query/v4](https://tanstack.com/query/latest/docs/framework/react/overview)) - managing API status\n\n#### Front-end (Optional)\n\n1. [React Router v6](https://reactrouter.com/en/main) - front-end router\n\nWe highly recommend you to use Hash router in WordPress, so you won't get conflict with WordPress Permalink\n\n\n#### Back-end\n\nLibraries we used\n\n```js\n\"kucrut/vite-for-wp\": \"^0.8.0\", // the core of vite integrated with wp\n\"yahnis-elsts/plugin-update-checker\": \"^5.3\", // update checker\n\"j7-dev/tgm-plugin-activation-forked\": \"^1.0\", // check plugin dependency, forked from TGMPA\n\"micropackage/singleton\": \"^1.1\", // singleton pattern\n\n// php code standard\n\"squizlabs/php_codesniffer\": \"@stable\",\n\"wp-coding-standards/wpcs\": \"@stable\",\n\"dealerdirect/phpcodesniffer-composer-installer\": \"@stable\"\n```\n\n---\n\n## Dev\n\n```bash\ncd wp-content/plugins/\u003cyour-plugin-name\u003e\npnpm dev\n```\n\nSure we have HMR when you change the front-end content\n\n---\n\n## Build Before you release\n\n```bash\ncd wp-content/plugins/\u003cyour-plugin-name\u003e\npnpm release:build-only\n```\n\nThis 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 `\u003cyour-plugin-name\u003e`\n\nI often use this command to test my release version plugin on my test site.\nWe can move to next step after checking everything works well.\n\n---\n\n## Release\n\n```bash\ncd wp-content/plugins/\u003cyour-plugin-name\u003e\npnpm release # this will git tag a patch version, you can choose `pnpm release:minor` or `pnpm release:major`\n```\n\nThis command will build the release version and publish the plugin `zip` file to Github.\nThe user installed your plugin will receive a notification.\n\n---\n\n## Any Suggestion ?\n\nWelcome to open issue and start a discussion 🎉🎉🎉\n\nIf this project is useful for you, please give me a github star ⭐\n\n---\n\n## Buy Me a Coffee ☕\n\n[Help Me to Build More Stunning Project 🤟](https://api.payuni.com.tw/api/period/U00521125/DxZBpmEGzO)\n\n\n---\n\n## Reference\n\n1. Inspired by [Vite for WP](https://github.com/kucrut/vite-for-wp)\n2. API design Inspired by [Refine](https://refine.dev/)\n3. [WordPress REST API Handbook](https://developer.wordpress.org/rest-api/reference/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj7-dev%2Fwp-react-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fj7-dev%2Fwp-react-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj7-dev%2Fwp-react-plugin/lists"}