Server-Side Rendering without MVC

[marcselman]

Please add support for Server-Side Rendering without MVC.
Right now Html.React is dependant on MVC.

Thank you

[Daniel15]

What server-side technology are you using? Are you using WebForms, ServiceStack, or something totally different?

Html.React is a pretty small wrapper around IReactEnvironment: https://github.com/reactjs/React.NET/blob/master/src/React.Web.Mvc4/HtmlHelperExtensions.cs

You can do the same thing yourself without using MVC by using the IReactEnvironment implementation directly:

var environment = React.AssemblyRegistration.Container.Resolve<IReactEnvironment>();
var component = environment.CreateComponent(componentName, props);
return component.RenderHtml();

And use environment.GetInitJavaScript() to get the JavaScript to initialise the components client-side.

Whichever technology you're using should be able to have a nice wrapper around this.

[marcselman]

Great!
Thanks, that's exactly what I was looking for.

[fgaleano]

@Daniel15 Is this answer still relevant today? I'm looking to use ReactJS.NET with WebForms. But I've noticed the HtmlHelperExtensions.cs file is no longer in the repo. I'm new to .NET so I'm not sure what this means. Could you follow up? Thank you!

[Daniel15]

Still relevant, although you should use ReactEnvironment.Current instead of React.AssemblyRegistration.Container.Resolve<IReactEnvironment>().

HtmlHelperExtensions.cs still exists, it just moved around a bit: https://github.com/reactjs/React.NET/blob/b486cda6937262dbe891a344fb8f53d6f5d20888/src/React.AspNet/HtmlHelperExtensions.cs

[fgaleano]

@Daniel15 Thanks! I'll give that a try.

[gin93r]

@Daniel15

I'm having an issue that I think is similar to this. Using the ReactEnvironment.Current seemed to work, but now I get Could not find a component named 'PageContent'. Did you forget to add it to App_Start\ReactConfig.cs?

This is with a fresh webforms project (I'm also new to asp.)

~/Scripts/components/helloWorld.jsx

var PageContent = React.createClass({
    render: function () {
        return (
            <div>
                Hello world from {this.props.user}
            </div>
        );
    }
});

ReactConfig.cs : ReactSiteConfiguration.Configuration.AddScript("~/Scripts/components/helloWorld.jsx");

Default.aspx.cs:

var env = React.ReactEnvironment.Current;
var om = new { user = "React User" };
var rc = env.CreateComponent("PageContent", om);

PageContent.Text = rc.RenderHtml();

I'm not sure what else I need to do. Thoughts?

If I navigate to /Scripts/components/helloWorld.jsx it does seem to render.

[fgaleano]

@gin93r If the code you posted is matches your setup, then you forgot to add module.exports = PageContent on your helloword.jsx file.

Out of scope comment, if you're going to build your whole UI with React, I strongly recommend using Webpack.

[gin93r]

@fgaleano Thanks. I did forget to put that in, however, doing so has not changed the outcome. I'm still getting the missing component exception.

[gin93r]

Ok I figured it out. It's because I created a Website using Web Forms and not a Web Application using Web Forms.

[fgaleano]

@gin93r Interesting. I'm new to .NET so I'm not sure what are the differences between the 2. Something to keep in mind if I ever do another one of this. Thanks for the update!

[VahaC]

Hi i'm trying to use React SSR with Kentico (CMS based on Web Forms) and receive an error

Could not find a component named 'PageContent'. Did you forget to add it to App_Start\ReactConfig.cs?

here is my code

/CMSScripts/Custom/components/helloWorld.jsx

var PageContent =  React.createClass({
  render: function() {	
    return (
      <div>
        Hello world from {this.props.user}
      </div>
    );
  }	
});

react web part

using CMS.PortalEngine.Web.UI;
using CMS.Helpers;
using React;
using System;

public partial class CMSWebParts_VahaC_ReactWebPart : CMSAbstractWebPart
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var env = AssemblyRegistration.Container.Resolve<IReactEnvironment>();
        var objectModel = new { user = "React User" };
        var reactComponent = env.CreateComponent("PageContent", objectModel);

        PageContent.Text = reactComponent.RenderHtml();
    }
}

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ReactWebPart.ascx.cs" Inherits="CMSWebParts_VahaC_ReactWebPart" %>
    Page Content Here:
    <asp:Literal ID="PageContent" runat="server"></asp:Literal>
    <div id="content">
        <asp:Literal ID="app" runat="server"></asp:Literal>
    </div>
    <asp:PlaceHolder runat="server">
        <script src="~/CMSScripts/Custom/lib/react.js"></script>
        <script src="~/CMSScripts/Custom/components/helloWorld.jsx"></script>
    </asp:PlaceHolder>

\App_Start\ReactConfig.cs

using React;

[assembly: WebActivatorEx.PreApplicationStartMethod(typeof(ASP.ReactConfig), "Configure")]

namespace ASP
{
	public static class ReactConfig
	{
		public static void Configure()
		{
            //ReactSiteConfiguration.Configuration
            //             .AddScript("~/CMSScripts/Custom/components/helloWorld.jsx")

            ReactSiteConfiguration.Configuration = new ReactSiteConfiguration()
                .AddScript("~/CMSScripts/Custom/components/helloWorld.jsx");

        }
    }
}

What is wrong with my code? Why it doesn't work?