Page Comparison

...

1. Open the selected widget template file

2. Uncomment, if necessary, the part of the markup designated as React template. This should include a div element with attribute data-component="react-app" or data-component="react-app-bootstrap". It should be an empty div element. Comment the part marked as Vue template.
   The React template is looking like this:
   

   Code Block

   // React template @Html.Script(Url.WidgetContent("assets/build/js/vendor.bundle.js"), "bottom", false) @Html.Script(Url.WidgetContent("assets/build/js/main.js"), "bottom", false) @Html.StyleSheet(Url.WidgetContent("assets/build/css/vendor.css"), "head") @Html.StyleSheet(Url.WidgetContent("assets/build/css/main.css"), "head") @Html.StyleSheet(Url.WidgetContent("assets/dist/react-hawksearch.css"), "head") @Html.StyleSheet(Url.WidgetContent("assets/dist/react-hawksearch-override.css"), "head") <div data-component="react-app-bootstrap" data-client-guid="@Model.ClientId" data-hawksearch-tracking-api="@Model.TrackingUrl" data-hawksearch-base-api="@Model.HawksearchBaseAPI" data-hawksearch-search-api="@Model.HawksearchSearchingAPI" data-hawksearch-autocomplete-api="@Model.AutocompleteUrl" data-tracking-events="@Model.TrackingEvents" data-index-name="@Model.HawksearchIndexName" data-json-params="@Model.Data" data-show-searchbox="@Model.ShowSearchBox.ToString()" data-current-culture="@Model.CurrentCulture"> </div> <script data-translations="react-mappings" type="application/json"> { "Telerik.Sitefinity.Events.Model.Event": "@Html.HtmlSanitize(Html.Resource("EventTypeDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Libraries.Model.Image": "@Html.HtmlSanitize(Html.Resource("ImageTypeDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Libraries.Model.Video": "@Html.HtmlSanitize(Html.Resource("VideoTypeDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Libraries.Model.Document": "@Html.HtmlSanitize(Html.Resource("DocumentTypeDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.News.Model.NewsItem": "@Html.HtmlSanitize(Html.Resource("NewsItemDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Blogs.Model.BlogPost": "@Html.HtmlSanitize(Html.Resource("BlogPostDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Lists.Model.ListItem": "@Html.HtmlSanitize(Html.Resource("ListItemDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Pages.Model.PageNode": "@Html.HtmlSanitize(Html.Resource("PageNodeDisplayName", "HawkWidgetsResources"))" } </script> <script data-translations="react-translations" type="application/json"> { "Narrow Results": "@Html.HtmlSanitize(Html.Resource("NarrowResults", "HawkWidgetsResources"))", "Search Results": "@Html.HtmlSanitize(Html.Resource("SearchResults", "HawkWidgetsResources"))", "Search Results for": "@Html.HtmlSanitize(Html.Resource("SearchResultsFor", "HawkWidgetsResources"))", "Sort By": "@Html.HtmlSanitize(Html.Resource("SortBy", "HawkWidgetsResources"))", "Enter a search term": "@Html.HtmlSanitize(Html.Resource("EnterKeyword", "HawkWidgetsResources"))", "Quick Lookup": "@Html.HtmlSanitize(Html.Resource("QuickLookup", "HawkWidgetsResources"))", "Clear All": "@Html.HtmlSanitize(Html.Resource("ClearAll", "HawkWidgetsResources"))", "Clear": "@Html.HtmlSanitize(Html.Resource("Clear", "HawkWidgetsResources"))", "No Results": "@Html.HtmlSanitize(Html.Resource("NoResults", "HawkWidgetsResources"))", "Loading": "@Html.HtmlSanitize(Html.Resource("Loading", "HawkWidgetsResources"))", "You've Selected": "@Html.HtmlSanitize(Html.Resource("YouSelected", "HawkWidgetsResources"))", "response_error_generic": "An error occurred while searching for your results. Please contact the site administrator." } </script>

3. Save, re-build and refresh the page.