Try our conversational search powered by Generative AI!

Using React.JS in EpiServer 9


Hi all,

On our new EpiServer 9 project, we want to use React.js for front end. Has anybody used React.js with EpiServer MVC before? Any feedback/experience/issues/concerns shared here would be really appreciated.

thanks guys..

Aug 26, 2016 2:25

We are using ReactJS.NET ( on a project and so far its working very well.

Sep 22, 2016 14:26

With using ReacJS.Net, did you need to rewrite the view processor so that you could still have the same content editing experiencing with the UI?

Sep 22, 2016 15:01

Hi Steven,

As for now we only use it on certain pages/components who is kinda automated where we don't need to focus on the "on page editing".

Backend builds the model through the controller and pass it to a react component in the razor view:

@Html.React("componentName", Model) 

and frontend do the rest.

In the long term we want to explore a little bit more and try to find a nice way to achieve as you describe :)

Sep 23, 2016 9:51

Anyone can share more details about this approach? I am following tutorial but so far I wasn't able to make it running.

I was able to run react.js with regular MVC project without any issue (non Episerver template). 



Edited, Apr 01, 2017 1:20
<p>I have sucessfully used React for certain parts of an Episerver&nbsp;site - typically&nbsp;list filtering, add to cart and more (similar approach as @Tim above).&nbsp;<br /><br /></p> <p>I recommend using it for certain user interactive parts of the site,&nbsp;as&nbsp;you would limit the&nbsp;<span>content editing experiencing if you use it everywhere.</span></p>
Apr 03, 2017 11:33

Hi Mari. Could you share your project structure/code here so that I can follow your example. Somehow react syntact (using < ) is not recognzed for me.



Apr 04, 2017 1:20

We're using React for everything view related and we've replaced Razor with React as our view layer. We've done this in a way that still enables the same editor experience/on page edit as you would with Razor.

It hasn't been easy to make it work with on page edit like this, but it's certainly possible.

Apr 04, 2017 7:42

Thank you for the feedback Anders. Now I understand it is doable with reasonable efforts.

To Tim, Mari and Anders :) 

It will be great for all EPiserver users if you guys can share your solutions and we can somehow come up with some guidance for React with EPiserver. Maybe you can upload your sandbox/demo project to Github and share it.



Edited, Apr 04, 2017 20:14
<p>Unfortunately I can't share how we've implemented it. We're fairly sure that we are alone (for now) in solving it. It's currently a competitive advantage for us.</p> <p>But if you come work for us I'll tell you all about it. :)</p>
Apr 04, 2017 20:20

Hi Anders. Thank you for your feedback and respect your decision. But it is really against open source and share the benefit trend out there. For example React.js itself is a result of sharing Facebook's internal code and I believe collective communitive efforts are the main reason that React.js (all other open source framework) is so good :)

I hope many other developers here have a similar approach :).



Apr 04, 2017 21:20

I hear you! And I hope that we can open source it sometime but it's not something we're looking to do right now.

But it's not the React side of things that has been a challenge, it's figuring out how on page edit works and how to hook into that.

If on-page-edit/doing it the Epi way doesn't matter you can just build a React site like you would with any other backend technology.

I'd be happy to answer concrete questions about integrating a library like React with Episerver if you have any.

Apr 04, 2017 22:09
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.