Using React components in Sitecore

 PROBLEM BACKGROUND

Do you need to incorporate a React component into Sitecore?   Is your team using SXA or a similar technology which provides out of the box components that your building your site with?   Are you NOT using Sitecore JSS / headless yet? 

We are developing a new site in Sitecore 10.  We wanted any component that interacts with our CRM data to be written in React.   We are NOT using Sitecore JSS but we are using Sitecore SXA. 

The question becomes,  how can we incorporate a new Sitecore rendering that will use React as the front end technlogy.  How will we get the rendering and datasource parameters successfully passed down to the React component?

One approach I've seen on several Sitecore sites, blog posts, etc is to use ReactJS.Net.    That solution works but feels like overkill to include a React component.  

• You get to maintain ReactJS.Net components in your solution,
• You need to have javascript engines on your server and in your local solution to allow for server compiliation of your React components.
• You need to insert ReactJS.Net into the Sitecore pipeline.  

Incorporating ReactJS.Net into Sitecore to render React components feels like an instance of I have a hammer,  and everything I see is a nail.  So I will use my hammer to beat this nail.   It feels like overkill to me.  

If you just want your React component to be initialized with the rendering and datasource parameters tied to the Sitecore rendering,  then below is a solution that can work for you.

PROPOSE SOLUTION   

STEP 1:    Exposing a way to instantiate the react component under the Javascript window object.

1. Create your React component.  
2. Create a function that can instantiate your React component.and add this function to the window object.  Putting the function under an object will avoid collisions with other components. 

  Here is an example of what an index.js file would look like:  

STEP 2:   In your razor view, instanstiate the React component, passing rendering and datasource parameters to the React component.

Here is an example of what this looks like:

This solution requires you to build your react component locally as your developing it. This can be done using various ways.  I use the terminal that can be opened by right clicking on a project file in VS, then using npm to build the React component.  You could also add a post build event to your project, which builds the React component.    How / when you build your React component during your development process isn't something I will dive into.

In your CI / CD process incoporate steps to compile your React component.  You want the compiled React component to get deployed and referenced by your Razor view.

Notice in the example razor view,   I added a delay when loading the React component in the EE.  This was because the React component would not load until all  EE JS events and functionality was loaded.  Time permitting I will go back and resolve this issue in a more elegant fashion.

This solution is working well for us.  It avoids the overhead of incorporating ReactJS.Net into the Sitecore pipeline.