We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

5 Replies

GA Gurunathan A Syncfusion Team October 11, 2019 01:49 AM

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.  



Please let us know if any concerns.  

Regards, 
Gurunathan  



LA Lamar October 11, 2019 02:05 PM

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


GA Gurunathan A Syncfusion Team October 14, 2019 04:39 AM

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/react@15.5.4/dist/react.min.js" 
      'react-dom': 'https://unpkg.com/react-dom@15.5.4/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.  
 
Please let us know if any concerns.  
Regards, 
Gurunathan  
 



GI Giorgio October 23, 2019 10:09 AM

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.




SR Sabitha Rajamani Syncfusion Team October 24, 2019 03:48 AM

Hi Giorgio, 
 
Thank you for the suggestion. 
 
Regards, 
Sabitha 


Loader.
Live Chat Icon For mobile
Up arrow icon