Example implementations | WP React Starter

Example implementations

The TypeScript client-side comes with some example implementations so you can better understand how things work.

All the example implementations contain a server-side (PHP) implementation, too:

There is a PHP example implementation of a menu page, but it needs more coding not only on server-side. The entrypoint src/public/ts/admin.ts comes into game. It detects if the page is visible and automatically renders content with ReactJS. It includes - as mentioned previously - some notices and a todo list connected to a MobX store. We recommend to have a look at that files directly before we copy & paste all the stuff here again:

📁 ts
- 📁 components/*
- 📁 models/*
- 📁 store/*
- 📁 style
  - 📄 admin.scss
- 📁 utils/*
- 📄 admin.tsx

There is a PHP example implementation of a widget. A widget always needs a "visible part" so TypeScript together with ReactJS can do the job. We recommend to have a look at that files directly before we copy & paste all the stuff here again:

📁 ts
- 📁 style
  - 📄 widget.scss
- 📁 widget/*
- 📄 widget.tsx

You must determine if you need server-side rendered HTML output or ReactJS. It has something to do with SEO. If SEO is important to your plugin, it is recommend to use server-side rendering. For example, if you want to create a dashboard only for logged-in users you can surely use ReactJS.

REST endpoint

There is a PHP example implementation of a Hello World endpoint. In this case it is important to "type" that endpoint with TypeScript interfaces:

ts/wp-api/hello-world.get.tsx: Describes the GET request, parameters and response:

import {
    RouteLocationInterface,
    RouteHttpVerb,
    RouteResponseInterface,
    RouteRequestInterface,
    RouteParamsInterface
} from "@wp-reactjs-multi-starter/utils";

export const locationRestHelloGet: RouteLocationInterface = {
    path: "/hello",
    method: RouteHttpVerb.GET
};

export type RequestRouteHelloGet = RouteRequestInterface;

export type ParamsRouteHelloGet = RouteParamsInterface;

export interface ResponseRouteHelloGet extends RouteResponseInterface {
    hello: string;
}

To request the endpoint you can simply do this by:

const result = await request<RequestRouteHelloGet, ParamsRouteHelloGet, ResponseRouteHelloGet>({
    location: locationRestHelloGet
});

The resulting object will be of type ResponseRouteHelloGet and you can easily access result.hello.

PreviousUtils package NextAdd external library

Last updated 6 years ago

Sunbelt Computer Software

PL/B Language Development and Support

Example implementations

Menu page

Widget

REST endpoint