Just think how fancy it would be to use React with Sitecore. This means that Sitecore needs to be a headless architecture. Working with React can be a tough proposition as you have to overcome tons of workarounds to make it work. Instead of using the general aspx or cshtml view, we are going to render using React.
So, you might be thinking will it hamper the analytics capabilities of Sitecore? Nope, it won’t. The whole website will work seamlessly and this is why we are here.
Why React will work seamlessly on Sitecore?
Before we dive deep into the topic, we should explore why they would work in the first place. The reasons are as below.
- Component-based approach: Both React and Sitecore are component based. This architectural similarity is extremely useful and will enable you to use React seamlessly.
- Sitecore components can be used with other front end frameworks including React.
- React’s DOM calculations are efficient enough to work with Sitecore.
- Sitecore will support React’s server-side computation, improving SEO.
The Different approaches
Now that we have a clear understanding of how React and Sitecore interact, it is now time to check how they can work with each other. We are not going to go through any tutorial, but listing a few of them and learning the gist about them. For you as a developer, we recommend choosing an approach that fits your style and needs. Once done, you should be able to use React and Sitecore together efficiently.
Alex Shyba approach
Sitecore Nuts & Bolts approach
Sitecore Nuts and Bolts approach is a little different. Their tutorial aims to improve on Alex Shyba Approach by enabling manipulation before rendering. Alex Shyba’s approach only
renders the frontend without any sort of manipulation ability. He uses JsxViewEngine to render the frontend using React. This tutorial covers all the small details and would help you to learn how React can be used on Sitecore.
We hope that today you learned how Sitecore and React together. It is not hard at all, but you need to do take care of some tricks here and there. So, which approach are you going to use? Comment below and let us know.