Make ReactJS work in Sitecore Environment

 

In today’s front end landscape, the JavaScript technology is playing a very important role in UI and UX.   It is changing very quick and new technology is coming out every month. Currently you probably know the two most popular JS libraries: Angular and React. In Sitecore development, JQuery is very popular adopted pretty much from beginning as part of .Net development. So question is, can we have most modern JS libraries like Angular and React work with Sitecore?

Yes. Before going to the detail, I’d like to simply compare the difference between Angular and React in a high level. In my opinion, Angular is more like a framework. To take it’s advantage, the entire system is better designed to work in Angular way. But React is more like a design pattern. It solves front-end view only and system can be designed in its own way. So to work with Sitecore, I prefer React personally, especially with ReactJS.Net.

The best practice of Sitecore is component-based design or modular architecture. In a Sitecore .Net MVC environment, the base UI element is rendering which is a group of data model, business controller, logic action and view. React is component-based too. It builds encapsulated components that manage their own state, then compose them to make complex UIs. React components implement a render() method that takes input data and returns what to display. You can see both Sitecore and React use the similar term to describe UI element “Rendering” or “Render”.

ReactJS.Net makes .Net developers to work with React and JSX much easier. Thanks Babel to transform JSX to JavaScript and cached server side automatically on-the-fly. It supports ECMAScript 6 features, Server-side rendering and ASP.Net bundling and minification.

Here is a sample I applied React in Sitecore. There is an application which splits traffic flow randomly by percentage. The visitors IP information are stored in database. The requirement is, streaming the traffic split information at real time and display in a grid with additional information by looking up MaxMind Geo data service. It has a drop down search box for filtering the results.

  • Use NuGet to install the ReactJS.NET (MVC 4 and 5) package.
  • Create MVC controller, action and view
  • Create React component in JSX with proper name space for self-contained scope to avoid conflict variables defined globally.
    • main.jsx
      var Traffics = trafficMonitorApp.Components.Traffics
      
      ReactDOM.render(
       <Traffics url="/Home/Traffics" pollInterval={5000} />,
       document.getElementById('content')
      );

      react3

  • Similar to MVC view and partial view, split React component to structured renders for better management.

react2

  • Load data from server-side action initially or retrieve from Web API through AJAX call at real time.
  • Bundle the JSX files in BundleConfig.cs.react1
  • Invoke the JSX bundle from view.
    @Scripts.Render("~/bundles/main")
  • Define the rendering in Sitecore as normal controller or view rendering.

Here is the completed component:

react4

This entry was posted in Information Technology, ReactJS, Sitecore. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s