locked
ReactJS compare to JQuery inside ASP.NET MVC and Razor View !. RRS feed

  • Question

  • User1432971339 posted

    Hi Everybody,

    Kindly please let me know what is the benefit of ReactJS compare to JQUERY mixed with ASP.NET MVC ?. I know there is some such as React Native,but in case of being in need of an Application on the web, what is the point of using React inside ASP.NET MVC instead of JQuery for example ?.

    Thanks in advance
    Ali Kolahdoozan
    ——
    AliKolahdoozan@Gmail.com

    Tuesday, November 22, 2016 9:53 AM

All replies

  • User-271186128 posted

    Hi Ali Kolahdoozan,

    Kindly please let me know what is the benefit of ReactJS compare to JQUERY mixed with ASP.NET MVC ?.

    As we all known, jQuery is a JavaScript Library, it greatly simplifies JavaScript programming. ReactJS is an open-source JavaScript library for data rendered as HTML. 

    If you want to know the benefit to use ReactJS, I suggest you check its official document:

    ReactJS.NET makes it easier to use Facebook's React and JSX from C# and other .NET languages, focusing specifically on ASP.NET MVC (although it also works in other environments). It supports both ASP.NET 4 (with MVC 4 or 5), and ASP.NET Core MVC. It is cross-platform and can run on Linux via Mono or .NET Core. Take a look at the tutorial to see how easy it is to get started with React and ReactJS.NET!

    what is the point of using React inside ASP.NET MVC instead of JQuery for example ?.

    As for this issue, I suggest you could refer to the following links to use ReactJS in Asp.net MVC:

    https://reactjs.net/getting-started/tutorial_aspnet4.html

    http://techbrij.com/react-js-asp-net-mvc-introduction

    Best regards,
    Dillion

    Wednesday, November 23, 2016 2:15 AM
  • User1432971339 posted

    First of all, I should appreciate you because of your answer.In the second I should mention, all the samples and etc are about how to just show a simple HelloWord or something like that. Accessing all kind of data from Controller,Authentication and Authorization should be explained,when we have React inside MVC.When you do not wanna Redux and Flux and NPM somehow, somethings like Authentication seems so hard or impossible.We need to keep MVC conventions, but render the UI with Reactjs.

    Regards

    Ali

    Thursday, November 24, 2016 5:45 PM
  • User-271186128 posted

    Hi Ali,

    We need to keep MVC conventions, but render the UI with Reactjs.

    With reference the following code, we could find that when using Reactjs, it also uses JQuery Ajax to call the controller action method, then use Reactjs to render the result.

    var HelloWorld = React.createClass({
     
    getInitialState: function() {
        return { name:''};
      },
    componentDidMount: function() {
        $.ajax({
          url: this.props.url,
          dataType: 'json',
          success: function(data) {
            this.setState(data);
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
          }.bind(this)
        });
      },
        render : function(){
            return (
            <div> Hello {this.state.name} </div>
            );
        }
    });
     
    React.render(
        <HelloWorld url="/home/getname" />,
        document.getElementById('container')
    );

    Best regards,
    Dillion

    Wednesday, November 30, 2016 11:45 AM
  • User-474980206 posted

    while jQuery allows components, its has 3 main features:

    1) dom query
    2) dom modification 
    3) ajax

    done with cross browser api. while there are many UI components written in jQuery, it doesn't really allow building larger components out of smaller. jQuery-ui required a new component model model, but has other issues.

    react focuses on building ui components built of smaller components. it also focuses on a simple render model. that is to add an item to a list, you just re-render the list, using the same code as the original render.

    usually you would pick jQuery, when you you want to extend a UI, say add date control, or some simple effects. 

    if you decide you are going to write a dynamic UI in javascript, then you run into jQuery limitations, and will want a javascript framework. currently there are two popular approaches, angular and react. 

    if you use react, there is not much in the view. mine end up being a div and couple lines of javascript:

    <div id="PageContent"></div>
    
    <script>store.api.setPageModel("pageName",@(Model.ToJson()));</script>
    <script src="@Url.Content("~/app/pagename.js")"></script>
    


    note: if you are writing your website in node, then you also have the option of using react to render the html instead of a template engine.

    Sunday, December 4, 2016 8:59 PM