Estimated reading time:
Well the last post was getting a bit long, so I decided to split it up! Please read it here if you haven’t already.
We left Sitecore with a new rendering type called
React Controller Rendering, we have a
JsxViewEngine and finally a
JsxView that takes our model from the controller action and passes it to ReactJS.net to create the React component.
But we have a few questions hanging still. First we need to register our
jsx file somewhere, otherwise this becomes just a server side component and we lose a lot of the fun bits with React.
As with a lot of things in Sitecore, pipelines and processors are great things to hook into. To register our
jsx files we will use the
mvc.getPageRendering pipeline. This pipeline is executed once per page, and in the args contains a list of all the renderings on the page.
So for each rendering, we check if it is a
Jsx Controller Rendering and then we use the
Jsx File field from that rendering to register the script with React. Notice too that we are building a bundle at the same time. This bundle will be used later. But we have to do both these things to run the code server side and client side.
Now we have all the component parts (pun intended!), we can create our first React Controller Rendering. For this I chose the FAQ Accordion in the Habitat project as its a nice example of component parts. First I re-factored the view rendering into a new
React Controller Rendering. The controller returns an
ActionResult. We get the FAQ items from the repository and build the view model. Then we can return a new
JsxResult - to simplify this process I added a an extension method to the
Controller class to return the
The controller action code is now:
Now all we need is our
jsx file that contains the React component:
Note that we are setting the fields by using
dangerouslySetInnerHTML - this allows us to support the page editor when rendering the fields. Also note that when creating the model, the fields need to be rendered into a string property that we can pass through to the React component.
This is the code to build the FaqItems:
It’s hard to get everything here in the post, so please checkout my fork of Habitat with this integration enabled. Specifically the React Foundation Layer, and the modified FAQ Accordion rendering. Just follow the normal steps to install Habitat and you should be able to see the accordion rendering at http://habitat.dev.local/en/Modules/Feature/FAQ.
Here is the rendering running with dev tools open so you can see the react markup:
So far we have had some excellent results from the renderings we have created with React. Next steps we are going to look at the performance of the react renderings and how they cope with caching. Also I want to do a bit more to enable dynamic placeholders.
Well thats all for now - I’m sure I didn’t cover everything, so please ask any questions in the comments or on the Sitecore slack community.
- Alex Shyba & Jacob Christensen for previous posts and inspiration
- Justin Laster at Lightmaker for collaborating and putting up with constant questions on what might be the best way of doing this!