Understanding ReactPress

Disclaimer: This page is still a work in progress. Nevertheless, it should already provide valuable information.

ReactPress acts as a bridge between WordPress and React. It embeds a React app into one or more WordPress pages. ReactPress configures React apps in a way that they work on a WordPress page without problems.

It embeds the React app in a way that the React app is hosted inside your WordPress environment, not on a separate web server. Furthermore, images, CSS, and JavaScript files are loaded from the right location to reflect the WordPress environment.

It is important to understand that any React app embedded with ReactPress is still a normal React app. Al state handling needs to be done by the React app itself. If it wants to communicate with WordPress, it needs to use the REST-API or GraphQL-API (needs a third-party plugin).

What context does ReactPress provide for the embedded React app?

For convenience, ReactPress provides a global JavaScript Object reactPress with 3 properties:

  1. api
  2. user
  3. usermeta

The api-property provides two pieces of information:

{
  "nonce": "9d5c5273a0",
  "rest_url": "https://rockiger.com/wp-json/"
}

The user-property is a JSON representation of WordPress’s User object. For security reasons, the encrypted password is removed. The user-property looks like this:

{
  "data": {
    "ID": "1",
    "user_login": "john",
    "user_nicename": "john",
    "user_email": "john@foobar.com",
    "user_url": "",
    "user_registered": "2019-11-09 11:32:24",
    "user_activation_key": "",
    "user_status": "0",
    "display_name": "John"
  },
  "ID": 1,
  "caps": {
    "administrator": true
  },
  "cap_key": "wp_ddpwnsxcei_capabilities",
  "roles": [
    "administrator"
  ],
  "allcaps": {
    "switch_themes": true,
    "edit_themes": true,
    ...
    "administrator": true
  },
  "filter": null
}

Depending on the login state and the installed plugins, the exact form of the User-object does vary.

Lastly, ReactPress provides the metadata of a user. Most entries in the usermeta-object are created by third-party plugins. If the user is logged out, its value is false otherwise, it looks like this:

{
  "nickname": [
    "Marco"
  ],
  "first_name": [
    "Marco"
  ],
  "last_name": [
    ""
  ],
  "description": [
    ""
  ],
  "rich_editing": [
    "true"
  ],
 ...
}

How do I determine the login status of a user in my React app?

ReactPress provides a global JavaScript object reactPress. It provides 3 properties: api, user, usermeta. If the user is logged out user.ID will be 0 and usermeta will be false.

How do I use the WordPress API from my React app?

The WordPress REST API serves as a gateway for applications to communicate with your WordPress website by sending and receiving data in the form of JSON (JavaScript Object Notation) objects. It allows your React app to create innovative interfaces for managing and publishing your website’s content.

For convenience, ReactPress provides information about the WordPress API in the global JavaScript Object reactPress. The api-property provides two pieces of information:

1. the nonce of the current user (this can be an anonymous user) for authentication
2. the current url to the API of the WordPress installation.

With this information, we can add a new post to your WordPress site

Sure, here is an example of a POST request using the JavaScript fetch function to send data to the WordPress REST API:

const data = {
  title: 'My New Post',
  content: 'This is the content of my new post.',
  status: 'publish'
};

fetch(`${reactPress.rest_url}wp/v2/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-WP-Nonce': reactPress.nonce
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => { // do something })
  .catch(error => { // handle error });

This example creates a new post on your WordPress site with the specified title, content, and status. The browser’s fetch function is used to send the POST request to the specified endpoint, in this case https://your-site.com/wp-json/wp/v2/posts. The X-WP-Nonce header is sent with the request to authenticate the user.

The Content-Type header should be set to application/json to indicate that the data being sent is in JSON format. The data is stringified by JSON.stringify() method and sent in the body of the request.

It’s important to note that the current user needs to have the proper permissions create a new post.

I see a blank page after starting my React dev server.

This usually means the index.html in your React project is empty. If the index.html is empty, the cause is usually insufficient access rights. Your WordPress/PHP installation must be able to access the URL of the page where your app is embedded. This is often a problem with Docker environments.

Another reason could be some error during writing if PHP doesn’t have the capabilities to write files.

How do I make react-router work

To make client-side routing work, follow this guide: Client-Side Routing with ReactPress

Where do I go for support on your plugin?

Please visit our support forum and search for your problem. If you can’t find any help there, feel free to create another topic.

Is ReactPress compatible with my theme?

ReactPress should work with every traditional theme. Block themes are not supported yet. Depending on the page template you choose, you will have a clean slate without any styling or a normal page that inherits the styling of your theme.

You can then style your React app with every styling solution for React that best fits your needs.

After creating a React app, building and deploying it, I can’t see the React logo on the page.

It seems your buildpath is not set properly. Make sure that the build option in your package.json looks like this:

...
"build": "PUBLIC_URL=/wp-content/reactpress/apps/[appname]/build react-scripts build"
...