Using Syncfusion + React in a pure ASP.Net MVC environment (without node.js)

[Lamar]

Hello,

I'm a Syncfusion newbie and also a react.js newbie. I've been using knockoutjs for years and have just recently decided to start using Syncfusion and because of the native support for React decided it's a good time to start learning React as well.

I'm confused about how to get started. All the documentation I can find tells me I need to install node.js and use NPM to install Syncfusion+React. Why is that? I don't understand where node even comes into the picture here unless it's solely used for package management.. And if that's the case, why would Syncfusion have done it that way instead of using Nuget like the rest of Syncfusion?

Thanks in Advance!

Lamar

[Gurunathan A]

Hi Lamar,  

Thanks for using Syncfusion product. 

We recommending you to use Node based environment to work on React JS application since it would be easy and good performance at run time than direct script referring way.  

https://www.logisticinfotech.com/blog/why-prefer-reactjs-and-nodejs/ 

https://medium.com/@etherealm/node-and-react-a-brief-introduction-99b672262fed 

Please let us know if any concerns.  

Regards, 

Gurunathan  

[Lamar]

Thanks GuruNathan,

I understand that node.js may be fast but I have an entire existing website built in ASP.Net MVC that I want to start using Syncfusion/React with.  I can't just start over on a whole new platform.

Lamar

[Gurunathan A]

Hi Lamar, 

Thanks for contacting us.  

We have created the React JS sample with System JS sample using CDN links as per request without using NPM packages. But here, module injection will not be work with our components.  

Please refer the below code snippet added in system.config.js 

(function (global) { 

  System.config({ 

    paths: { 

      // paths serve as alias 

    }, 

     

    // map tells the System loader where to look for things 

    map: { 

      'react': "https://unpkg.com/[email protected]/dist/react.min.js" 

      'react-dom': 'https://unpkg.com/[email protected]/dist/react-dom.min.js', 

      "@syncfusion/ej2-base": "https://cdn.syncfusion.com/ej2/ej2-base/dist/ej2-base.umd.min.js", 

      "@syncfusion/ej2-buttons": "https://cdn.syncfusion.com/ej2/ej2-buttons/dist/ej2-buttons.umd.min.js", 

      "@syncfusion/ej2-react-base": "https://cdn.syncfusion.com/ej2/ej2-react-base/dist/ej2-react-base.umd.min.js", 

      "@syncfusion/ej2-react-buttons": "https://cdn.syncfusion.com/ej2/ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", 

    }, 

     

    bundles: { 

         

      }, 

       

    // packages tells the System loader how to load when no filename and/or no extension 

    packages: { 

       

    } 

  }); 

})(this); 

 

Please refer the system file in html pages 

<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.2/system.min.js” script> 

        <script src="./systemjs.config.js"></script> 

BTW, we are also having EJ2 MVC components, you can check out the details from here.  

https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/visual-studio-2017/ 

https://ej2.syncfusion.com/aspnetmvc/Grid/GridOverview#/material 

 

Please let us know if any concerns.  

Regards, 

Gurunathan  

 

[Giorgio]

Lamar,

we are using such setup incapsulating the react part in a ViewComponent. It works pretty well.

You define a viewcomponent in Razor and from that component you can instantiate a react one. For example

@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.AspNetCore.Builder
@using Microsoft.AspNetCore.Localization
@using Microsoft.Extensions.Options
@using FrontEnd.Infrastructure
@using Newtonsoft.Json;
@model LineGridModel
@inject IViewLocalizer DefaultLocalizer
@inject IOptions LocOptions

@{
    var requestCulture = Context.Features.Get();
    var cultureName = requestCulture.RequestCulture.Culture.Name;
    var Localizer = DefaultLocalizer.WithCulture(requestCulture.RequestCulture.Culture);
    var items = JsonConvert.SerializeObject(Model.Items);
    var currentItems = JavaScriptConvert.BaseEncode64(items);
    var config = JavaScriptConvert.BaseEncode64(Model.ColumnConfigJson);
    var id = Model.Id;
    var appId = Model.Id + "_app";
    var currentUser = Model.CurrentUser ?? "CV";
}

The linegridcomponent is a bundle with webpack. In any case you need npm. You create you reacr app and inside viewcomponents you expose the react part.

[Sabitha Rajamani]

Hi Giorgio, 

 

Thank you for the suggestion. 

 

Regards, 

Sabitha