React for Kentico MVC widget

Hi,

Yes you can use react for Kentico widgets. We use reactjs.net for the rendering, this includes server side rendering. You could use the documentation there to setup your project. The next step is to create your widget and render the react component in the view.

@Html.React("ReactComponent", new
{
    items = Model.Items,
})

For rendering in the pagebuilder you need to include some javascript in the view of the widget to initialize the component when it is added in the pagebuilder. This is because in the pagebuilder widgets are added dynamically, and thus causing the '@Html.ReactInitJavaScript()' in the layout not initializing the react component in the widgets.

@if (Context.Kentico().PageBuilder().EditMode)
{
    @Html.ReactInitJavaScript()
}

Hi Arjan,

Thank you for the reply.

Can you give some examples on how to go about it as I am very new to Kentico 12 MVC widget.

Thank you again.

Hi Arjan,

I am looking into react component as inline editor of a widget. I have a widget "ReactWidget" which has 1 inline editor field. How do the Widget_editomode view and normal Widget view look like with react component.

My ReactWidget_EditMode partial view is a follows

And my ReactWidget partial view is as follows

Thanks in advance.

Hi,

What exactly do you mean by 'react component as inline editor'. Are you just trying to make a Kentico MVC widget? React is a javascript library for building UI (https://reactjs.org/). Or am I missing something? What do you want to achieve with React here?

If you want to create an inline editor for your Kentico widget you can use the kentico documentation here.

Hi,

The rendered component in the view to which the Model.Items is passed contains html tags as this value is inline editor generated from the widget in pagebuilder. I wanted to make those html tags work correctly in the react UI. Currently the Model.Items values are displayed as " <p.>Hello</p.><u.>World</u.> ". Ignore the '.'

@Html.React("ReactComponent", new { items = Model.Items, })

Also, I am getting into another problem in the cms editable area. I added that reactwidget and when I publised it and viewed in the public site, the editable area is no more but is same as public site. Is it something to do with js.

Thanks in advance

Hi,

For rendering html in your react component you need to use 'dangerouslySetInnerHTML'

So for example:

    <p dangerouslySetInnerHTML={{__html: rawHtml}} />

I don't understand your problem with the CMS pagebuilder and live site. Are you seeing not seeing the react component in the live site? What is the rendered html on the live site? Are you receveing errors?

Something that could help seeing the errors is turning clientside rendering only on on the reactjs.net component. That allows you to view errors in the chrome console.

Hi Arjan,

Thank you for your help. Problem with the cms was js related.

I have this thought, if rendering widgets in react would suffice the purpose react was developed for. As the widgets have controller, how would data be rendered dymanically without refreshig the page, when data of that widget is changed in the cms? Do you think developing widgets in react is a good approach.

What is your suggestion and how can we leverage react js in page builder development?

Thank you again for all this help.

Hi,

We used react in some components that need to be rendered dynamically. For example the search and filter component. The react component calls an endpoint on the MVC site containing the necessary data for the search/filter request. Then the correct information is returned and the react component renders the data client side.

I suggest using react when it provides useful client rendering. Though it brings some complexity to your site by adding it to your kentico project. As you need to set up server side rendering.