Create documentation (videos)

[rockiger]

• Create an app
• Deploy an app
• use react-router

[TonyGravagno]

Whether for written docs or video, I'd like to see more of a "comfort zone" established in documentation for what a finished result would look like, and the handshaking with WP.

For example: In a site let's say there are two WP page-post-types that are linked from the home page. On one page is a tiny React app with nothing more than a MUI TextField and Button. "Enter your favorite color / Submit". On another page is a similarly tiny React app that retrieves all submissions and renders them in a loop on ListItemText. The apps are embedded in the pages via ReactPress shortcodes.

• I wonder about things like login status / nonce, and WP REST API usage in this topology for save and list.
• What is the Context available to the React app about the site and page? Does that come from the shortcode handling? Can we pass in context from the shortcode itself? (Of course we can, I don't know yet if this is built-in with ReactPress yet.) When the app is opened, do we need to query the server to retrieve state, maybe from a transient or DB read?
• What is the state of the app when the user leaves the WP page (via some other page link) and then they come back? Do we detect the page change, save state, and then refresh state on return? Or do we save state as we go, maybe in LocalStorage and refresh if we find the app is re-initializing with LocalStorage present?
• What is the recommended tooling for executing a PHP function in WP? In other words, to establish full client/server code integration, should we create a React hook like useWpFunction and pass requests through there and a normal fetch / wp-ajax / action ?
• If we can read some kind of state on React initialization, would it be reasonable to do all of the above with a single app that renders different components based on the shortcode attributes or the page where the shortcodes are located? Or do we need a separate React app for every shortcode? For example, [myApp op="input"] and [myApp op="output] ... versus [myAppInput] and [MyAppOutput] ?
• Can the React app access other DOM components on the WP-generated page? For example, we typically replace the 'root' node with but is the React app in this WP context aware of the rest of the DOM in the page? Or is it only aware of what's in its own specific container?

As you see, my challenge isn't really with WP or React, it's understanding what options are available after we have deployed a React app into a WP page with ReactPress. I suppose I'll learn when I read the code but I think it would help to have docs too.

Thanks!

[rockiger]

I will keep that in mind when I update the docs.

[rockiger]

@TonyGravagno I started work on a documentation page that answers your questions. It is far from finished, but maybe you want to have a look already.

[TonyGravagno]

Thank you Very much, Marco! That is a great start. Your page on routing is also very helpful, thanks.

Preface - I'm not looking for answers to specific questions here. I'm documenting the kinds of questions that I think of when I read that new doc page and anything else related to this plugin. And I hope the new docs/vids can answer all questions like these for ReactPress users.

All of my questions revolve around: At what point in the lifecycle does ReactPress stop providing additional value, requiring the React app to do things on its own? I believe the answer is that ReactPress embeds a React app in the content area of a page, and that's where it stops. Would that be correct?

Examples:

• Can a React app defined by ReactPress use @wordpress/element rather than importing react and react-dom? Are you adding these or any other scripts to the page? I don't think so.
• Is ReactPress "opinionated" about the API fetching library or any others? I don't think so.
• Would ReactPress have any conflicts with other packages like @wordpress/hooks? I don't think so.
• And for session persistence, if we use @wordpress/persistence, should we not use the user/usermeta data in the reactPress global object? I think the only data of use in reactPress would then be the nonce?

I think the answer to all of this is that ReactPress really does "draw the line" at inserting the React app into the page, and everything else is up to the developer. We use CRA, npm/yarn install, and do our imports, we integrate with WP through the REST API, and the only app integration that ReactPress provides is the static reactPress global on initial entry.

In my original question I asked about Context. Now I'm thinking we can useContext, @wordpress/persistence, or whatever other mechanism we want.

Finally, sorry if I missed this in existing info: Is there a hook or other mechanism that would allow us to add properties to reactPress, or to add another custom global that has our own initial statebag? I'm guessing we should hook the page load ourselves and enqueue a script - I just don't know if ReactPress already has a defined way of doing this.

Summary : I'm hoping docs and vids clarify what ReactPress does and does not enqueue into the page that is hosting an app.

Thanks again!