React app container

[marijang]

What do you think what is best practice to add react app inside all of this:D

I need to handle user pages all with react planing to use redux...

[dingo-d]

Hi!

Well, it all depends on how you plan on using and where you plan on using React in your app.

React for settings pages in the admin

If you want to use it as admin pages, then you'll need to use the boilerplate as a plugin, expose a view where you'll have an element you'd initiate your React app in.

For instance, you could register a new admin page or subpage, and initialize the React app in it. I'm working on something similar atm: https://github.com/infinum/eightshift-gdpr/tree/plugin-rewrite. For now, I have placed my React part in the assets, and not in the blocks, but I will probably try to add components in the src/Blocks and then reuse them to create a settings page that is currently here: https://github.com/infinum/eightshift-gdpr/blob/plugin-rewrite/assets/scripts/settings/index.jsx.

React for the front end

Here you can go two ways:

First way

Use a theme as is, and then in the same theme add React app components in src/Blocks/components and maybe create a separate template where you'd initialize the app. I find this way to be a bit dirty. As you are making your life a bit complicated IMO. Not sure what the benefits would be to have your regular PHP powered server-side rendering with the React app. You could inject some React apps inside your site (we did this on one of the client projects). Again, depends on what you plan on doing.

Second way

The second way would be, the one I'd prefer if you'd want to use strictly React on the frontend, to go headless. That means, your backend would be powered by WordPress + WPGraphQL to expose the data and handle any kind of business logic stuff, while the front would be a separate React app (most likely Next.js for SSR). You'd still be able to use our blocks, libs, and all to build content, but you'd have to then see how to parse that content using WPGraphQL for the frontend app.

Hope this covers and answers some of your questions 🙂 .

All the best for the holidays and I wish you a happy New Year 🎄 .

[iruzevic]

As Denis said, you can go in multiple ways; it depends on what you need and wants to do.

One way is to go full headless, as Denis describes. The other way is to load the entire template as and React app, and you can then use backend components on the front end. Or you can load a separate small React App on the frontend by creating an app. To do this, you can create a block that you can load from the admin on request and then load the React App inside it and put the whole logic inside this one block. This way, we did this page: https://academy.infinum.com/apply/