7

Searching on Google and the sites archives under the query React I've found a few interesting questions:

and reading the theme development documentation that states:

At the very minimum, a WordPress Theme consists of two files:

  • style.css
  • index.php

so in the React portion if index.html was replaced with index.php and syle.css was placed on the main level with the stylesheet header. Would there be any reason why the front end of the site wouldn't work?

The React app would call the API so I don't see what the issue would be if I called http://foobar.com/wp-json/wp/v2/posts/. I would add a PNG for the theme but per research I haven't found a better alternative and I'm trying to deter from having a WP instance on a sub-domain and a React site on the main-domain. Would there be anything that would cause issues in a React-WordPress theme?

6

Can a theme be built in React?

You can use React in a theme yes, if your theme only has the one template and relies on JS to render the entire frontend and navigate, pull in data, then I don't see how it's any different if you use or don't use React

Would there be any reason why the front end of the site wouldn't work?

You'd have to account for various URLs and loading data in your react app, but at that point it's a React problem, not so much a WP problem.

The React app would call the API so I don't see what the issue would be if I called http://foobar.com/wp-json/wp/v2/posts/

No problem here

The one concern I have is that you'll need to manage routing yourself as you click around the application, and make sure that when you visit something that isn't the homepage on the first load, that it loads the correct content. But that's a React Router problem ( assuming thats the library you use for routing )

WP instance on a sub-domain and a React site on the main-domain.

This sounds like a great way of unnecessarily complicating things. Just have the theme serve the React app. Loading resources from within a theme is the same problem if it's React or jQuery or backbone, and the browser loads them the same way. Just tell your JS where the theme URL is.

Would there be anything that would cause issues in a React-WordPress theme?

This is an extremely open ended question and would depend on what you're trying to do.

In all honesty it sounds like you're looking for reassurance. Remember, React is javascript. You can use javascript in themes, and you can call the REST API from javascript in a theme. It doesn't matter what UI framework is powering that code, if it's React, Vue, jQuery, vanilla JS, angular, it's all JS.

If you want to handle loading posts and rendering them in your javascript then great, you can do that. If you choose React as the means to do that then that's up to you.

There are a few obvious things you'll need to do though:

Just keep in mind that you'll want to call wp_footer and wp_head, so you'll need a header.php and footer.php, you'll also want a functions.php so you can enqueue your JS and styles.

None of that is React specific though, every theme should do that. You might also want to enqueue the WP API script so that it passes the REST API url over. Again that's not specific to a React application.

But most importantly, there is no such thing as a React theme. There are themes that just happen to use React. It's easy to think of it as something different, but it's really just JS in a rather empty looking theme at the end of the day

  • I think my issue is with the maintenance. If I do it all under one domain, as you mentioned, I'll have to also include footer.php, header.php, functions.php and index.php. If I do the sub and main setup then its simple but I hate the idea of not having it all under one domain. – DᴀʀᴛʜVᴀᴅᴇʀ Mar 22 '18 at 19:34
  • Just load your React code in functions.php via enqueue, and have the entry point in index.php, and a minimal footer.php and header.php to make sure all the right hooks are fired – Tom J Nowell Mar 22 '18 at 19:36
  • that area is what I'm also unsure how to do. – DᴀʀᴛʜVᴀᴅᴇʀ Mar 22 '18 at 19:37
  • 4
    header.php: <html><head><?php wp_head(); ?></head><body> etc. None of those steps are React theme steps, they're theme basics 101. Just create a minimal theme that has no styling or content, and put a react app in the middle – Tom J Nowell Mar 22 '18 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.