Basic Usage

DRAFT

Module configuration

Add ReactConfig.cs file to your project, which use WebActivator to call the Configure() method on application start. Specify required scripts using AddScriptsWithoutTransform() method. Note that scripts should be already compiled from .jsx to .js and optionally bundled.

using R7.Dnn.Extensions.React;
using WebActivatorEx;

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

namespace YourModule.React
{
    public static class ReactConfig
    {
        public static void Configure ()
        {
            DnnReact.AddScriptsWithoutTransform (
                "~/DesktopModules/MVC/YourModule/js/lib/bundle.js"
                "~/DesktopModules/MVC/YourModule/js/lib/Hello.js"
            );
        }
    }
}

Basic usage

To use server-side rendered React components in your views/controls you should provide React and ReactDOM scripts. In following samples they referenced as DNN JavaScript Libraries, provided by R7.Dnn.JavaScriptLibraries project.

MVC

Use ReactWithInit() extension method for DnnHelper to render React component code along with initialization script.

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MiniGalleryViewModel>

@using DotNetNuke.Web.Mvc.Helpers
@using DotNetNuke.Web.Client.ClientResourceManagement
@using DotNetNuke.Framework.JavaScriptLibraries
@using R7.Dnn.Extensions.React

@{
    JavaScript.RequestRegistration ("React");
    JavaScript.RequestRegistration ("ReactDOM");
    ClientResourceManager.RegisterScript (Dnn.DnnPage,
        "~/DesktopModules/MVC/YourModule/js/lib/Hello.js");
}

@Dnn.ReactWithInit("Hello", new {
    name = "John Doe"
})

WebForms

Use DnnReact.ReactWithInit() to render React component code along with initialization script.

<%@ Register TagPrefix="dnn" TagName="JavaScriptLibraryInclude" Src="~/admin/Skins/JavaScriptLibraryInclude.ascx" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
<%@ Import Namespace="R7.Dnn.Extensions.React" %>

<dnn:JavaScriptLibraryInclude runat="server" Name="React" />
<dnn:JavaScriptLibraryInclude runat="server" Name="ReactDOM" />
<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/MVC/YourModule/js/lib/Hello.js" />

<%= DnnReact.ReactWithInit ("Hello", new { name = "John Doe" }) %>