Building React web apps that play nice with Salesforce
Let me be honest with you—we've seen this scenario play out dozens of times. A company has invested heavily in Salesforce, built complex workflows, automated processes, and trained their entire team on the platform. Then someone in leadership says, "Our customer-facing portal looks dated. Can we make it more modern and branded?"
The knee-jerk reaction is often to build something completely separate, which inevitably leads to data silos, broken workflows, and a maintenance nightmare. Or worse, companies try to force Salesforce's native UI to do things it wasn't designed for, resulting in a Frankenstein's monster of customizations that nobody wants to touch.
You don't have to choose between a beautiful, modern user experience and your existing Salesforce investment. React web apps can integrate seamlessly with Salesforce while preserving every automation, workflow, and business rule you've spent years perfecting.
The key is understanding that integration isn't just about moving data back and forth—it's about creating a unified system where your custom frontend becomes an extension of Salesforce, not a replacement for it.
Why React + Salesforce makes perfect sense?
React has become the go-to choice for building modern web applications, and for good reason. Its component-based architecture, virtual DOM, and massive ecosystem make it incredibly powerful for creating custom user interfaces. But when it comes to Salesforce integration, React offers some specific advantages that make it particularly well-suited for the job.
First, React's flexibility allows you to create completely custom UI components while still leveraging Salesforce's robust backend capabilities. You're not limited by Salesforce's Lightning Design System (though you can certainly use it), and you can create interfaces that truly reflect your brand identity. This is crucial for customer-facing applications where brand consistency can make or break the user experience.
The component-based nature of React also aligns perfectly with Salesforce's modular approach to data and functionality. You can build React components that map directly to Salesforce objects, creating a natural architectural alignment between your frontend and backend systems. This makes the codebase more maintainable and easier for developers to understand.
Performance is another major factor. React's virtual DOM ensures that UI updates are fast and efficient, which is critical when you're dealing with real-time data from Salesforce. Users expect modern web applications to be responsive, and React delivers on that expectation while still maintaining full integration with your Salesforce backend.
Perhaps most importantly, React's vast ecosystem of libraries and tools makes it easier to handle the complex requirements of enterprise applications. Need form validation? There's a library for that. Want to implement real-time updates? React has you covered. This ecosystem richness means you can build sophisticated applications without reinventing the wheel.
The integration possibilities are also expanding rapidly. Salesforce has been investing heavily in new APIs, including GraphQL capabilities that make data fetching more efficient than ever. React applications can take full advantage of these modern API patterns, creating more performant and maintainable integrations.
We actually just did this.
Consero is a company that hosts exclusive, invitation-only events for senior-level executives. When they came to us, they were struggling with a patchwork of systems: Salesforce pages for backend management, manual PDFs for event information, and an outdated mobile app that was more frustration than solution.
The challenge wasn't just technical—it was strategic. Consero had invested years in building sophisticated Salesforce workflows for event management, attendee tracking, and post-event analysis. These workflows included complex automations, custom objects, and integrations with their marketing automation platform, Pardot. Throwing all of that away to build something from scratch would have been both expensive and risky.
Instead, we built a modern React application using Next.js that seamlessly integrated with their existing Salesforce infrastructure. The key was treating Salesforce not as a constraint, but as a powerful backend service that could support a much better frontend experience.
The technical approach was straightforward but effective. We used custom APEX code to create APIs that exposed exactly the data and functionality our React application needed, while preserving all of Consero's existing business logic. This meant that when an attendee registered for an event through our beautiful, branded interface, all of Consero's existing automations—email sequences, internal notifications, reporting updates—continued to work exactly as they had before.
One of the most interesting challenges was integrating with Salesforce's Pardot forms. Consero relied on Pardot's flexibility for creating complex, multi-section registration forms that could be customized for different events. Rather than rebuilding this functionality from scratch, we found a way to dynamically generate our React form components based on Pardot's form structure. This preserved Consero's workflow flexibility while delivering a much better user experience.
The results speak for themselves: a 4x increase in event management efficiency, 80% reduction in manual workflows, and thousands of attendees benefiting from the enhanced user experience. But maybe, and most importantly, Consero's team didn't have to learn new systems or abandon their existing processes. The React application became a natural extension of their Salesforce environment, not a replacement for it.
What made this project successful wasn't just the technology—it was the approach. We spent significant time in discovery, understanding not just what Consero wanted to build, but how their existing systems worked and why they worked that way. This allowed us to design an integration that enhanced their capabilities rather than disrupting them.
It lets you preserve your investment in Salesforce.
This is where the rubber meets the road. You've spent years building workflows, automations, and business processes in Salesforce. The last thing you want is for a shiny new React application to break everything you've worked so hard to create.
The secret is understanding that preservation doesn't mean replication. You don't need to rebuild every Salesforce feature in React—you need to build React features that work harmoniously with Salesforce. This requires a deep understanding of how your existing systems work and a careful approach to integration design.
Start with your data model. Salesforce's custom objects, fields, and relationships represent years of business logic refinement. Your React application should respect this structure, even if it presents the data differently to users. When a user creates a record through your React interface, it should create the same Salesforce record with the same field values that would be created through the native Salesforce interface. This ensures that all your existing validation rules, workflow rules, and process builders continue to function correctly.
Automation preservation is particularly critical. Many organizations have complex Process Builder flows, workflow rules, and triggers that fire when certain conditions are met. Your React application needs to ensure that these automations continue to work exactly as they did before. This means understanding not just what data to send to Salesforce, but when and how to send it to trigger the appropriate automated processes.
For the Consero project, we spent considerable time mapping their existing automations. When an attendee registered for an event, it triggered a complex sequence: updating the attendee record, creating activity records, sending confirmation emails through Pardot, updating capacity counters, and notifying event coordinators. Our React application had to ensure that all of these automations continued to fire correctly, even though the user experience was completely different.
Integration with Salesforce's security model is another crucial consideration. Salesforce's field-level security, object permissions, and sharing rules represent important business requirements. Your React application needs to respect these constraints, not circumvent them. This might mean that different users see different interfaces or have access to different functionality based on their Salesforce permissions.
The approach we recommend is to create custom APEX classes that serve as integration points between your React application and Salesforce's core functionality. These classes can encapsulate complex business logic, ensure that security rules are enforced, and provide a stable API for your React application to consume. When business requirements change, you can update the APEX code without necessarily changing your React application, and vice versa.
Documentation becomes critical in this context. You need to maintain clear documentation of how your React application interacts with Salesforce, which automations depend on specific data patterns, and how changes to either system might affect the other. This documentation isn't just for your development team—it's for your Salesforce administrators who need to understand how their changes might impact the React application.
The goal is to create a system where your React application feels like a natural extension of Salesforce, not a separate system that happens to share some data. When done correctly, users shouldn't even be aware that they're working with two different systems—the experience should feel seamless and integrated.
Some lessons we've learned over time.
1. Ignoring Salesforce Governor Limits
Salesforce has strict limits on API calls, DML operations, and query complexity. Many React developers, coming from environments without these constraints, build applications that work fine in development but hit governor limits in production. The solution is to design your integration with these limits in mind from the beginning. Bulk operations, efficient querying, and smart caching aren't optional—they're requirements.
2. Over-Engineering the Data Layer
It's tempting to build a complex abstraction layer that completely hides Salesforce from your React application. While some abstraction is good, too much can create performance problems and make debugging nearly impossible. Keep your abstractions simple and transparent. Your React developers should understand that they're working with Salesforce data, even if they don't need to know all the details.
3. Neglecting Mobile Experience
Salesforce's mobile experience has improved significantly, but many custom React applications still provide a poor mobile experience. Remember that many Salesforce users are mobile-first, especially in sales and field service scenarios. Your React application needs to work just as well on a phone as it does on a desktop.
4. Insufficient Error Handling
Salesforce APIs can fail in many different ways, and each failure mode requires different handling. Network timeouts need retries, validation errors need user feedback, and permission errors need graceful degradation. Build comprehensive error handling from the beginning—it's much harder to add later.
So, what's next?
The landscape of React-Salesforce integration is evolving rapidly, and several trends are worth watching.
GraphQL is becoming increasingly important. Salesforce's new GraphQL API allows for more efficient data fetching, reducing the number of API calls required and improving performance. React applications can take advantage of GraphQL's ability to fetch exactly the data they need in a single request, rather than making multiple REST API calls.
Artificial Intelligence integration is another major trend. Salesforce's Einstein platform is becoming more sophisticated, and React applications can leverage these AI capabilities to provide smarter user experiences. Imagine a React application that uses Einstein's predictive capabilities to suggest next actions or automatically populate form fields based on historical data.
Real-time capabilities are also improving. Salesforce's Platform Events and Change Data Capture features enable true real-time integration, allowing React applications to respond immediately to changes in Salesforce data. This opens up possibilities for collaborative applications where multiple users can see changes in real-time.
The development experience is getting better too. Salesforce's CLI tools and development environments are becoming more React-friendly, making it easier to build and deploy integrated applications. The rise of headless CMS patterns is also influencing how we think about Salesforce integration, treating Salesforce as a headless backend for custom frontend experiences.
Building React web apps that integrate properly with Salesforce isn't just about connecting two systems—it's about creating a unified experience that leverages the best of both platforms. When done correctly, you get the flexibility and modern user experience of React combined with the robust business logic and automation capabilities of Salesforce.
The key is to approach integration as a design challenge, not just a technical one. Understanding your users' needs, your business processes, and your existing Salesforce investment will guide you toward an architecture that enhances rather than replaces your current capabilities.
The future of enterprise applications is hybrid—combining the best of custom development with the power of platforms like Salesforce. React provides the perfect bridge between these worlds, enabling experiences that are both beautiful and functional.