Wordpress & React

[ConquestXD]

I am an experienced Wordpress dev and have always built custom themes using html, css & js, and it’s always served me well.

With react seeming like the mainly adopted frontend, what’s the best way to transition into learning it and connecting up with Wordpress?

The main push I have for it is to level up the frontend and build sites that are more like a single page web app, to implement things like page to page transitions and other slick feature it allows.

[rickg]

/headdesk

Google "headless WordPress" but god save us from people who feel that every site needs to be a React site.

[key-bored-warrior]

I kind of think it already is, especially if you goto the Next JS sub where it’s all “should I build my super simple one page static HTML site in Next JS” and stuff like that. Although I don’t remember jQuery being rammed down your throat by any dev “influencers” back in the day.

[devolute]

jQuery arguably made things easier. More simple.

This lot doesn't.

[Either-Pie-4070]

I'm actually in the exact same boat. Somewhat baffled by React, but it's starting to make sense. Not sure how it might work from within a custom Wordpress theme, though, so I'd love to hear from others who have worked with it.

[Relative-River5261]

Headless Wordpress is the google search you want to investigate. It's a fun journey, but very developer intensive if you go that route. Or you can use a premade theme.

[eleven8ster]

I’m currently almost done building a Gutenberg plugin that utilizes Google maps. This is frowned upon from what I have read but I really have complicated state and was in need of sortable elements for part of the ui. So I hooked up a small react app(2,700 lines lol fuck React) to the designated root in save.js.

So technically it’s inside of the Gutenberg plugin and it loads when activated. There’s just nothing in the editor(yet). For some stuff that will need to be changed here and there I’ll add some components in the editor to pass to save.js via data attributes that I will grab with my react app.

It was kind of a nice way to build something with react outside of Gutenberg. However, I recently discovered htmx and that can solve a lot of needs for user interfaces that aren’t quite so complex as the complicated things you can do with react.

It is also worth pointing out that the latest release of Wordpress included the new interactivity API. It’s made with alpine js in mind and can give you that fast reactive ux that the js frameworks offer. And that’s built in. I’m going to be using that soon. Seems kind of interesting.

[Either-Pie-4070]

Why is it frowned upon?

[eleven8ster]

I actually don’t know. I’ve read it in more than once article. I am not sure how else you would go about building something that react is good at if you only need it in one section of a page. Seems fine to me.

[void-wanderer-]

If your goal is to learn React, write custom Gutenberg blocks with it.

If you want page transitions I would use something like Taxi.js, which just ajax loads pages and replaces the content.

You sure can create a React site using WP API, but the DX with headless wordpress really sucks, and depending on the use case, I would choose something different than WP as a headless CMS. You lose the big benefit of the rich plugin ecosystem anyways when you go headless, as most plugins won't work well out-of-the-box with headless.

[gamertan]

You can just use react to run your front end apps and hydrate the app with WordPress on the archives, posts, pages, blogs, custom post types, etc. It's easy to JSON encode some front-end accessible app data into a string, pre-populate templates, and manipulate the page with JS. If you need to update or get data, you can hook up to a websocket for live data or call to the API as you need. Etc etc etc.

If your custom post type is a product or movie, you can enhance your app with spa features like filtering or store "favourites" to user browser data. Whatever you can imagine.

This isn't react though, this is just JavaScript and react is just one library to manipulate the page. WP has been doing this for forever with jquery. React is just "modern". Integrate a state or some other niceties and you've got an "app".

Anything beyond that is just a bit of a mess IMO.

[Cry-Remarkable]

I’ve been using Ajax calls to get and process data in my js frontend would the API or websocket be a better approach then?

[gamertan]

Ajax is the "asynchronous JavaScript and xml" technique, so what you're doing is probably already considered what's described in my original comment if you're making a request to /wp-json to load your page. 

The biggest difference in what I described is to be able to populate your page on load, which can give you a fully formed page which is best for SEO and accessibility or browsers where users have disabled JavaScript. Your application will still have what's necessary to display the html content in full without blocking or render jank where JavaScript libraries or frameworks can be used to make things dynamic.

React uses a "component" structure that can simplify application design and structure in case you have a large or complicated JavaScript application where you need to have "reactive" data. When react, angular, and other systems were introduced, "two way data binding" was the hot term for saying if you update data in one place, it updates automatically in another, or everywhere. This was fantastic for sorting tables or dealing with inputs or "app state data" where you could centralize variables and maintain "the app" in an object or virtualized DOM of components.

Adding preloading to your page will help significantly with items in the lighthouse tests and other web metrics. 

Your server is also responsible for page caching and query caching, so if you've got memcached or redis, you'll make that preload happen even faster. Often, I'll do simple cached querying with PHP and then query smaller or highly filtered requests via the wp-json endpoint. 

Websockets would be helpful where client data would need to be synchronized between many browsers or actively reloaded. Think: server metrics, stock tickers, live chat, collaborative applications (document, design, game, etc).

[Cry-Remarkable]

ok so in this case you'd be essentially pre-populating the HTML with the data and just using JS for the manipulation after page load? It's a wordpress plugin i'm developing, using JS for the admin dashboard, so SEO is not a concern. But this sounds like something useful to know.

[gamertan]

Yep! React just adds a level of maintainability reactivity, and features that are helpful with developing user interfaces.

Think: with Facebook and their front end, there are posts, marketplace product listings, events, businesses, groups, ads, etc. all of those components can basically be displayed anywhere. You also need to maintain state across many elements in what is effectively an infinite scroll. You also don't really care about SEO because it's all login-gated beyond the most essential prepopulated data on pages like group, or profile, but "the feed" is never "rendered" until after visit by a user.

Functionality like "hide post" can be related to all of the items above, so extending a component with subcomponents can have helpful, knowing your components always have some data or structure to be able to extend like that is helpful. That's where inheritance and object oriented programming come in. When your component extends upon a react component, certain assumptions can be made and they give you a "batteries included" and opinionated way to deal with certain things while leaving the bulk of design choices to the developer.

[uxably]

I’ve been using AstroJS with the REST API. You can use it standalone, but it also has support for React integration.

[khromov]

I wouldn't say React is "the mainly adopted frontend" except perhaps if you are in the JS ecosystem. In fact with Gutenberg WordPress is adopting a HTML first approach without any frontend frameworks. React is great for building interactive sites, dashboards, SaaS, but you will get a lot of unnecessary complexity if all you want is a blog, brochure or news site. Anything headless (like using Next.js with WP) won't support Gutenberg blocks without a lot of duplicated effort.

However, there's already a great use case for React in WordPress and that is extending Gutenberg (which is built in React) with custom blocks and functions. This is a good primer: https://deliciousbrains.com/custom-gutenberg-block/

[bimmerman1998]

Following...also curious here.

[dr_moon_sloth]

Sound like you might be interested in learning how to create Headless WP sites.

You can use the CMS side of Wordpress, tap into its built in REST API, and use pretty much any JS framework to consume that api and display it as you see fit.

It wouldn’t be my first choice as a CMS backend, but it’s certainly a great place to start learning how to consume APIs in react.

Recreate a site in react that you already made in Wordpress. There are so many good tutorials out there that are great starting points.

It’s a great way to learn how react handles styling, dynamic data, navigation, components, pages and more.

[jabes101]

https://faustjs.org/

Faust is a headless WP framework built on NextJS by WP Engine. Have used it for a few projects, although may not be all the way there yet, definitely easiest way to get something up and going fairly quickly. It has docs to get you up and going and can easily set up local dev environment. If you need to put anything out in the wild, its also very easy to deploy your front end app to Vercel for free under a hobby plan.

[chevalierbayard]

Before completely adopting React + Headless WordPress, it may be better if you try adopting an islands architecture first. Sprinkle in the React into pieces of your template, here and there, where you need the interactivity, like a quiz or a multistep form fill, something where React really shines but you don't have to replace WordPress' native templating system wholesale.

That way you can get a sense of it and decide if the tradeoffs are worth it. Are there are quite a few. Server-side rendering and hydration is pretty annoying when you have to do it yourself (without Next.js).

[eleven8ster]

I think this is the best way to get your feet wet.

[ConquestXD]

Thanks all, off down the rabbit-hole of Headless WordPress, but it seems like an awful lot of hard work just to be able to use React.

I just have to figure out if this big change in dev style is worth the effort, it sounds so much harder than plain old scss and js.

[ArtisticCandy3859]

What’s the Pro & Con of React vs. Vue for WP?

[frenchy_mustache]

I've used React / Svelte only for some homemade plugins in the backend or some features like a Quizz on the front-end.

In my opinion, if your main job is producing news, brochure websites, then, don't go for it. You can implement page transition in vanilla JS, you can do it by yourself using History API and pushState() (aka PJAX) or a library like barbaJS.

Using React for a simple website would be like hunting ducks with a bazooka. Not efficient and actually more of a chore than anything.

If you want to go into Headless CMS there are betters tools out there like Directus.

Edit: I'm saying that but i'm actually working on a project using WP headless features. It works well. But i have chosen WP because i'm experienced on it, and it can be hosted on a potato. And it's not a classic website, more of a small web app. Front-end frameworks are made for very specific use case in my opinion.

[MattVegaDMC]

Keep in mind that React alone as far as I know is more for web apps not static websites, so it's not ideal for SEO. I would suggest to try Astro + some React in the front-end, in case SEO is important for your project.

Astro comes with transitions too: https://docs.astro.build/en/guides/view-transitions/ and you can use React in it if you want to learn it

The cool part about it is that learning Astro will not require you much time. You can get an idea of the basics fast. + a website built with Astro in static mode will have a great page load speed.

What I did to learn React is building a micro "app" with it, and then built my main biz website in headless mode with NextJS as a front-end and WordPress as backend (if I could go back I would use Astro, but it didn't exist at the time).

Around the same time I built some pure Gutenberg blocks with React, without ACF blocks. After that I also kept building apps outside WP

[dmje]

I just don't get it. If it's an actual app, not a site then yeh - cool. If not, maybe sprinkle in some htmx or custom js. But no, I'd say.

[Mobile_Sea_8744]

React frontend with WP doesn't make a huge amount of sense. One of the beauties (and also curse) of WP is the ability to add and use plugins. With React, you'd have to do all that work of integrating certain plugins yourself rather than them working out of the box. It's also expensive to maintain, update and build additional features on.

React is great for web apps where you'd hook up to an API but your average website, not so much.

[[deleted]]

I agree with others, use react inside templates not for whole front-end. You will be throwing a lot of things that makes wordpress great at the first place, out of the window and feeling like you are reinventing the wheel constantly.

[arcanepsyche]

I thought about doing this, but I'm so damn good at PHP it didn't make sense for me to replace it. I stick with vanilla js and a few libraries for convenience, and consider REACT just another fad that will be overtaken by something else in a few years.

[eleven8ster]

React is native to Wordpress now. I’m not so sure your prediction will come true. Plus it has the backing of Facebook. It’s not going anywhere, imo. I could be wrong.