I’m about to start with a new project and would like to incorporate React as I want to learn more about it and this specific project would be perfect to get started as it’s not that time sensitive and pretty straight forward.
To take care of SEO I’ve gathered that I need to go the Isomorphic route (this is entirely new to me) to render JS server side. I found this but I can’t figure out how I apply this in a WordPress based web app? I’ve been googling for information about how to work with WordPress and React, but there’s literally no information about it. Could anyone with a little more insight provide me with some tips and pointers?
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
What you could do is use WordPress as a REST API server, and use React as a client for that. Now you can have WordPress deliver your assets, but you could also put it in a subdirectory, and treat it only as an API app with a CMS admin area, while putting your site files in the root, by-passing configuring a theme at all. (SEO would become a separate concern here that you’d have to solve, depending on the type of app you are developing.)
Alternatively, you could use React.js to only ‘enhance’ the theme (like for a comments section), but you’d mostly be a PHP/WordPress dev at that point.
Isomorphic is like Meteor.js, and projects like that, that let you specifically avoid PHP (and avoid WordPress). Mutually exclusive really. If you are really interested in isomorphic, try Meteor.js and avoid using WordPress altogether.
Moving the core WordPress software over to newer technologies like this will take time, but if you add plugins such as WordPress REST API you should have everything you need to be able to get started with React in WordPress.
Relevant reading: http://wesbos.com/wordpress-calypso-react/
I’ve been building an app in Rails that uses react JS heavily. It’s a good project to work on because it’s giving me the baseline understanding on how React works. Knowing what I know about React, I’d highly recommend not using it with WP until you get a grasp on it initially, I think it’ll make your learning process much longer trying to hack it into WP.
Combining React with WordPress feels like taking a supercar off-roading. Maybe learn to drive the supercar first.
Here’s an example I just came across today.
USTWO.com have built the site with the same requirements and their source is available here.
The also have a nice description on how they set it up. See diagram below.
Disclaimer: This is not really an answer but more of a reference link that should be added as a comment, if only I had enough credits 🙂
What you are trying to do is best achieved by putting a node.js server in front of the wordpress API. You need node.js on the server to do server-side react.
Here is some code that shows how to render wordpress content as React components on the server and to attach the same React components on the client.
Note that in this scenario you get the benefits of wordpress for content creation but not for publishing. You need to implement publishing from scratch as React components.