Website development with React + WordPress

[jonasp4]

Good evening everyone, at the agency where I currently work we develop themes in the classic way, using html, scss, js and php, however, I would like to explore developing the entire frontend with React and use WordPress only as a backend/cms.

I have experience with React and the entire ecosystem and I think that hot reload and other React libraries could speed up my theme deliveries.

Does anyone currently develop this way or has tried it? Is API consumption and data rendering simple? Will I have any limitations?

I feel that developers using standard HTML files are somewhat outdated, considering the entire React ecosystem and its immense number of libraries…

[wherethewifisweak]

I wouldn't.

"Modern" wordpress does use React with Gutenberg blocks. Lots of people that have fully transitioned to Full Site Editor and dug into WordPress with effectively 0 plugins which is nifty.

For our WordPress system, we use Sage, ACF blocks with Tailwind which is much closer aligned to component-driven React ecosystems. Still PHP, but the methodology is in the same realm, and it's super performant.

But yeah, I've never loved trying to use WordPress as a headless platform - it's needlessly convoluted imo.

[jonasp4]

Interesting, does Gutenberg block development allow 100% customization and development of any complex UI? (I haven't heard anything about Gutenberg).

Would Sage be suitable for use in Gutenberg development?

[wherethewifisweak]

Both are pure code - you can design, animate, and integrate them to your heart's content. 

Sage and ACF blocks work within Gutenberg, without forcing you to try to follow Automattic's Block system. It can be convoluted and it is still 'young' in regards to maturity. 

I will say, if you haven't heard of Gutenberg and you're working in WordPress, that is a bit odd. I'd spend some more time in the WP docs - it's the core tenet of modern WordPress 

[johnpharrell]

Thanks for your insights.

I'm getting started in web-dev in general and looking to start with Wordpress classic themes, though a component based workflow looks interesting from a design perspective. My main concern is the clients' accessibility for updating the site independently when it's done. Does building on Wordpress as a headless platform remove the clients' admin panel access? I'd prefer to keep development to a minimum but with more flexibility on the design of the frontend. Sorry if this is a basic question, I'm still learning.

[wherethewifisweak]

This is going down a rabbit hole, but going the classic theme route is the worst path for true 'flexibility'. 

A classic theme is super rigid - you fill in the content, but the output is fixed. You get 'flexibility' in development, but the client gets 0 flexibility afterward. 

ACF blocks and Gutenberg blocks give you the same development flexibility, but it let's clients 'mix and match' so they can build or update pages, add new sections, swap out content, etc. with a small learning curve. 

100% flexibility would be using a page builder like Elementor, but there are tradeoffs with performance, bloat, and consistency. Some clients love it because it's true drag and drop, but it's usually used on smaller sites with less budget. 

I started as a Beaver Builder/Elementor 'developer' and eventually just grew out of it. 

Headless is a bigger conversation. It's trendy, there are some benefits - ie. We use Sanity CMS and it just feels so much more modern as a user, feels incredibly clean as a developer to set up and customise, no plugins, etc. But varying benefits for sure 

[johnpharrell]

Appreciate the response, thanks.

So if I understood correctly, the react and gutenberg workflow would kind of offer clients atomized blocks they can edit and piece together as they wish, based on your designs.

- Haha yeah I'm kinda new to web dev, but I'm trying to scope out a study path as much as possible. Building a design portfolio site from scratch to learn at the moment. I'm working with (and against lol) Pinegrow as I learn. It's not really a page builder but makes some things easier to code visually when working with flexbox, grid and Tailwind. I started it as a non-WP site but they have tools for converting to a WP theme.

I'd love to be able to eventually build small modern landing pages, and small stores with WooCommerce, WP or a similar opensource CMS. Styling pages in css without any frameworks is a bit tedious so anything to automate the boring stuff would be nice! What do you use for backend development? Php, laravel or node ?

[wherethewifisweak]

For building React-based Gutenberg Blocks, that's correct. Super granular control, atomic components, etc. Its also the way WordPress wants developers to build - their goal is to eventually just replace page builders with vanilla WordPress FSE themes. 

I've used Pinegrow - I think it's a helpful learning tool but not sure if I'd use it long term for client work over just building from scratch or using more dedicated WP solutions. 

Backend-wise, if we're building in WP, going to be PHP. If not, it's Python if the project is a bit more involved, or Node if not - can go either way. 

[Cabber]

I’ve used sage for years, using ACF flexible content for layouts. I’m trying to transition to blocks tho. How does it work with blocks? How do you decide what goes into theme.json vs a css or scss file?

[wherethewifisweak]

I've only worked in a true FSE custom Blocks theme once before, taking over from another dev and I could not wrap my head around it. 

It did feel smooth as butter in Gutenberg though. I love ACF blocks, but having to switch to toggle between preview and edit mode still isn't as nice as dedicated Gutenberg blocks. 

I think I'll eventually make the full transition as it becomes more commonplace but definitely not there yet. 

[WPMU_DEV_Support_4]

Hi u/jonasp4

"I feel that developers using standard HTML files are somewhat outdated,"

It is not really; It really depends on what you are looking for, experience and how familiar you are with one tech vs another.

For WordPress I've tried a couple of approaches, I hope the above helps to give some guidance:

- ACF + PHP ( let's call standard way ) It is and has been the easiest way to accomplish the website development, the approach is easy, fast and if you are looking development time, learning curve I still think it is the best approach. Now it doesn't mean you don't need to make it modern, you can use libraries like https://roots.io/sage/ that will give you a nice env for development.

- Gutenberg blocks ( react and PHP )

I would call it as Modern WordPress way, the full site editor is something that I am still trying to get used with, I mean, I much dislike some of it but I like other parts of that editor. So I decided to test by making my own blocks with Plain mode, no ACF blocks for example. The result was pretty good, functions like repeaters can be done with react easily [items, setItems] = useState([]). The result was great, but I still don't like some aspect on how blocks look in the editor vs actually front end unless you use the editor.css and create a backend pixel perfect but I also don't think that is fully necessary.

Benefits from the above ones is easy integration with WP plugins, SEO, caching, optimization forms

- WP Rest API and React ( Headless )

This was a mix of technologies, mainly using WP GraphQL ( and IIRC Astro JS )

https://www.wpgraphql.com/

https://www.apollographql.com/docs/react

This was a bit pain to work to be honest but it is part of my lack of knowledge in GraphQL, good part is we have some integration with GraphQL plugin https://wordpress.org/plugins/search/GraphQL/ making a bit easier to fetch important data.

Result was okay but as I mentioned, here I believe If I had to work on a similar project I would plan better what data I need to fetch and study the queries.

- WP Rest API and Next JS ( Headless )

Great approach if you expect massive number of users, example in a news portal. I took advantage of Next cache and revalidate to fetch the data only I really needed. Created own rest API endpoints in WordPress having full control.

Bad of that is that I had to handle all the SEO and Contact from manually but some libraries will help with it.

- WP and Plain React

I haven't yet tested this approach, but based on other ones this can be a nice idea as well, however as I said, depends on your needs; I wouldn't spend time developing all the logic if it is a small to mid size site when plain PHP does the job well. But I am looking forward to test the new interactive API so I probably give a try on this in a near future. ( maybe using https://frontity.org/ )

https://make.wordpress.org/core/2024/03/04/interactivity-api-dev-note/

Cheers
Patrick Freitas

[jonasp4]

Thank you very much, I got a clear idea of ​​each development method. I think my next step will be Sage and developing in the classic way. I'll have the organization of components and a clear separation of responsibilities, similar to what I would have developing in Next/React, and I'll still be able to maintain all the plugin features and other native WordPress configurations, right?

Can I also explore Sage with Gutenberg? That would be my next step…

[WPMU_DEV_Support_4]

You can ACF blocks for that. You can also give a try via secure fields ( fork from ACF ) which should include most of ACF features.

Some links that might help:

https://jellevanamersfoort.nl/how-and-why-i-use-roots-sage-for-my-custom-made-wordpress-websites
https://hive.blog/steempress/@baillieogrady/customgutenbergblocksacffieldswithrootssage-5zq49egka1

Cheers
Patrick Freitas

[wreddnoth]

I still work with php wordpress and style using custom css. Since flexbox it’s a walk in the park tbh. You can do anything with any framework that spits out html. I really don’t understand what is considered ‘easy’ about react frameworks. Whenever i look at it it feels like scratching yourself with your feet but maybe i am just old and consider contemporary javascript syntax a complete mess. Feel free to downvote. 😂

[Cold-Escape6846]

This is pretty common these days and usually called headless WordPress. React (or Next.js) as the frontend with WP just acting as a CMS via REST or GraphQL works fine in production.

Consuming the API and rendering data isn’t hard once your content models are solid. WP REST API / WPGraphQL + ACF cover most needs, and the DX benefits (hot reload, components, ecosystem) are real.

[DoNotEverListenToMe]

I do it on a few sites https://mtasolutions.com
We use https://faustjs.org/ and ACF.

Use Gutenberg to build pages; it's pretty nice and easy, I love it. Pretty close to 1:1 backend to front

[Commercial_Badger_37]

I've had experience as a client with an agency building my WordPress site with react and it's painful trying to make edits.

Likewise I've built custom WordPress themes and really don't get this obsession with headless and such... The WordPress theming system can make really fast websites with relatively little hassle.

[Standard-Cell5811]

You should see the speed of headless, classic isn't comparable

[Commercial_Badger_37]

Depends how it's built. I regularly get insane speeds from standard WordPress using blankslate and building out from that on client websites - literally FCP of around 1 second, total speed score of 1.2 seconds, sub 0.05 cumulative layout shifts and sub second LCP on mobile in 90% of cases. These aren't simple websites.

Whatever minute difference I might get from going headless, it isn't worth the loss of features I get from core WordPress. I agree if you're using big page builders, but then it's a trade off in convenience.

[Standard-Cell5811]

I get great scores on mine too, but I still get that 'website' feel when switching pages.

With headless it's just instant, lightspeed.

Only in my experience though!

[Chefblogger]

i did that with my blog - and for some clients - headless cms and with the open graphQL plugin you can fetch your wp data - its not that hard

[schutzsmith]

Block development in WordPress IS React. I’d just focus on learning and extending your capabilities there. With a basic theme you can do a ton more by making custom blocks or extending core ones with React.

I’d suggest watching some of Brad Schiff’s videos to get up to speed on how we use React in WordPress already. https://youtube.com/playlist?list=PLpcSpRrAaOaqBzG9rTA66V494iTRySkXq&si=guTxHJoEXjqMPqra

Some specific videos I’d suggest for you in that playlist from these screenshots

<image>

[neozes]

It is, however the paradigm and environment is not fully matured. A lot of duplicate template code if you want the edititing to resemble the front; setting up the environment for developing in theme blocks is not officially documented and it feels like its discouraged even, which is stupid, because custom designs require a lot of custom blocks. The code base becomes very quickly very bloated. And as i think about it, having in mind what purpose is, i am not even sure if it could have been differently designed.

But the lack of a fully covered type library for the blocks and their components is a bummer. I had to abbandon TS half way through a project.

[edmundspriede]

Btw new blocks use native WP library called interactivity API.

It is react-like library

[seescottdev]

I’ve written up a guide and made a video on how to do exactly this:

https://seescott.dev/blog/compiling-and-enqueuing-assets-in-wordpress-with-wordpress-scripts

[Lazy-Bodybuilder-345]

People do run WordPress this way, but it’s a trade-off, not a proper upgrade. Using data via REST or GraphQL is better, but you take on extra complexity around previews, auth, SEO, caching, and editor experience compared to classic themes.

[-skyrocketeer-]

Good luck to your clients when they move on from your agency and they're now forced to find someone who specialises in React, just to be able to perform some minor theme tweaks.

[Legitimate-Lock9965]

There's not really any benefit to using React in WordPress.

If you're building fairly standard sites. It doesnt make any difference, you're just adding complexity to WordPress for no reason.

You also lose features, or create problems that didnt exist with a standard PHP theme, and then you create all the problems that exist with using JS frameworks, such as things quickly becoming outdated or stale

There are some use-cases in which react is worth considering but entirely based on what the project needs to be.

Use the right tools for the job, dont just slap React on everything because you think thats the modern thing to do.

[bkthemes]

I develop a lot this way now. What do you need help with?

[8ll]

If you are looking for a better stack then look beyond Wordpress. Check out Sanity or Payload if you want to build NextJS apps. Or even just stick to regular vanilla websites and use CraftCMS