There are seemingly endless articles online for building web applications with React. Almost every single one assumes you are building a Single Page Application, from scratch, using React.

But to me, one of the most impressive things about React is that you can add React components to any web application without it being a SPA (and let’s be honest, there are very few necessary reasons to build a SPA). So you can get the benefits React without rewriting an entire front-end.

This series will cover how I introduced React into Booked, which is a server side rendered PHP application. Previously (and still in the majority of the application), jQuery and vanilla JavaScript is used for dynamic front-end components. I’ve added React at various levels – in some cases just a single small component on a page, in other cases there are “mini SPAs” embedded within the larger application.

Here’s what I’ll be covering

• The Tool Set and Build Process – The different tools I chose and how they were weaved into a PHP-centric build process
• Rendering Single Components – How small components are independently added to existing server side rendered pages
• Rendering “SPAs” – How entire pages are rendered as very small Single Page Applications
• Communicating Between Components – How React components communicate with each other and with legacy JavaScript components

The versatility of how React can be used to build new applications or augment existing ones is really powerful. Unfortunately, most information focuses on greenfield, single page applications. Hopefully this ends up being useful to other folks who want to make incrementally add React to existing applications.