Sitecore is a .NET framework which utilizes the feature that the .NET framework has to offer. It is a complete package, and all a developer would need to create a functional website with proper content management capabilities baked in. However, if you fancy JavaScript, then you can do even more.

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.

  1. Component-based approach: Both React and Sitecore are component based. This architectural similarity is extremely useful and will enable you to use React seamlessly.
  2. Sitecore components can be used with other front end frameworks including React.
  3. React’s DOM calculations are efficient enough to work with Sitecore.
  4. 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

A clear and impressive approach have been listed on Sitecore’s blog on how React can be used. He cleverly uses ReactJS.NET, and WebForms to integrate React and Sitecore. The whole process is divided into thirteen steps. He also links to the project file so that you can play with it. In his project, Sitecore controls the rendering process, but it is done using JavaScript/React. His approach is also useful as the rendering is done on the server side.

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.

Conclusion

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.


About the Author

Shivprakash is technical project manger with 14 years of experience in development and maintenance of web product and applications. He is an expert in various architectural and design patterns, technical solutions, coding, designing, and documenting products. He is a Sitecore Certified Professional and expert in Microsoft .Net platform.
top