live demo

1. Easy to Use
   Git clone this repository in wp-content/plugins/ and npm run bootstrap, npm run dev, that's all the steps

2. Integrate with WordPress RestFul API
   By default, the API_URL would be {site_url}/wp-json} which is set in inc/admin.php

3. CRUD utility function
   Default with getPost Example, check more utilities

4. Integrate with JWT
   We use usefulteam/jwt-auth in composer, every time a WordPress user logged in, he will get JWT (for call API, if the user has enough capability) automatically.

5. HMR (Hot Module Reload) for PHP
   By using vite-plugin-live-reload, the page will auto reload while PHP files changed

6. 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

Tech stacks (knowledge you need to have)

1. Vite - build tool
2. React v18
3. TypeScript - compile project with type safe
4. Tailwind v3 - you can install any UI library, like Ant Design, MUI, Chakra...etc
5. SCSS
6. React Query v4 - managing API status

1. React Router v6 - front-end router

1. usefulteam/jwt-auth - get JWT if a wordpress user is logged in

1. Clone this repository into /wp-content/plugins.

   cd {your-project}/wp-content/plugins git clone https://github.com/j7-dev/wp-react-plugin.git cd wp-react-plugin

2. Install dependencies:

   ⭐ You must have Composer installed

   npm run bootstrap # This will run `npm install` & `composer install` npm run dev

3. Activate the plugin from WordPress admin /wp-admin.

   

4. Visit your site's homepage and see the rendered application on the footer 🚀🚀🚀

   

5. Click Count, Get Post Example button to ensure the State and the WordPress API works

   

6. Check the admin page, you will see a new post type My App and a new menu My App

   

7. Click Add New, you will see a React App in the metabox

   

8. 🎉🎉🎉 Enjoy the dev 🎉🎉🎉

npm run build

After you build the project will apply .env.production and enqueue the hashed assets in js/dist folder.

the files in js/dist is EXACT the files of your plugin, you can only upload the js/dist if you don't want to share the src source code

path: js\src\api\resources

{ resource: string, // ↑ WordPress RESTFUL API Endpoint like: posts, users, products args?: { [key: string]: any }, // ↑ Check the WordPress RESTFUL API Endpoint args config?: any // ↑ This is Axios Config, see more info in https://axios-http.com/ // ex: change headers config for special use }

The created Resource id

const createPost = await createResource({ resource: 'posts', args: { title: 'Post Created by API', status: 'publish', }, })

{ resource: string, // ↑ WordPress RESTFUL API Endpoint like: posts, users, products id: number, args?: { [key: string]: any }, // ↑ Check the WordPress RESTFUL API Endpoint args (url params) }

WordPress Object

// get the post with id = 200 const getPost = await getResource({ resource: 'posts', id: 200, })

{ resource: string, // ↑ WordPress RESTFUL API Endpoint like: posts, users, products args?: { [key: string]: any }, // ↑ Check the WordPress RESTFUL API Endpoint args (url params) }

WordPress Object Array

// get the all posts that author_id = 1 const getPosts = await getResources({ resource: 'posts', args: { author: 1, }, })

{ resource: string, // ↑ WordPress RESTFUL API Endpoint like: posts, users, products id: number, args?: { [key: string]: any }, // ↑ Check the WordPress RESTFUL API Endpoint args (url params) }

Update Status

// update the title with post_id = 200 const updatePost = await updateResource({ resource: 'posts', id: 200, args: { title: 'Update Title by API', }, })

{ resource: string, // ↑ WordPress RESTFUL API Endpoint like: posts, users, products id: number, }

Delete Status

// delete the post with id = 200 const deletePost = await deleteResource({ resource: 'posts', id: 200, })

{ resource: string // WordPress RESTFUL API Endpoint like: posts, users, products id: number queryOptions?: { // please visit React Query for more detail staleTime?: number cacheTime?: number refetchOnWindowFocus?: boolean refetchOnMount?: boolean refetchOnReconnect?: boolean refetchInterval?: number retry?: boolean | number retryDelay?: number enabled?: boolean } }

WordPress Object

// get the post with id = 200 const post = useOne({ resource: 'posts', id: 200, }) // get the user with id = 1 const user = useOne({ resource: 'users', id: 1, })

{ resource: string // WordPress RESTFUL API Endpoint like: posts, users, products args?: Record<string, any> // please visit WordPress RESTFUL API Handbook for more detail queryOptions?: { // please visit React Query for more detail staleTime?: number cacheTime?: number refetchOnWindowFocus?: boolean refetchOnMount?: boolean refetchOnReconnect?: boolean refetchInterval?: number retry?: boolean | number retryDelay?: number enabled?: boolean } }

WordPress Object Array

// get all posts that author_id = 1 const posts = useMany({ resource: 'posts', args: { author: 1, }, })

Welcome to open issue and start a discussion 🎉🎉🎉

If this project is useful for you, please give me a github star ⭐

Help Me to Build More Stunning Project 🤟

1. Inspired by Vite for WP
2. API design Inspired by Refine
3. WordPress REST API Handbook