locked
Angular or React? RRS feed

  • Question

  • User-1322569703 posted

    That's the way I have my website at Angularjs, but considering going to React. This is how I work on .net core 2.0 and it is such that I know a user that I should send something to the database. How do I want to do it in the best possible way? or would you just recommend me to keep angularjs 1.x? or should I try updating to Angular 6+?

    Saturday, June 2, 2018 11:42 PM

Answers

  • User-474980206 posted

    That is, what I have in my view content .cshtml ie email, password etc .. should I have a jsx file in order to validate the content?

    react is a javascript component library. you would have no react markup in the view. typically, you would have a view like:

    @model MyPageModel
    
    <script>var pageModel = @Html.Raw(JsonConvert.SerializeObject(Model));</script>
    <div id="reactContent"></div>
    <script src="@Url.Content("~/js/mypage.js"></script>
    
    

    all view markup would be in a .jsx file. the validation would also be there. its pretty easy to generalize the view (pass the script name for the page), and only have 1 shared view for all pages. or if you used create-react-app to create the boilerplate, you don't need any mvc views or just the home/index view which includes the react script and the div.

    here is minimal react page:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
        <meta name="theme-color" content="#000000">
        <base href="/" />
        <link rel="manifest" href="/manifest.json">
        <link rel="shortcut icon" href="/favicon.ico">
        <title>My Title</title>
        <link href="/static/css/main.css" rel="stylesheet">
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <script type="text/javascript" src="/static/js/main.js"></script>
    </body>
    </html>

     


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 8, 2018 8:36 PM

All replies

  • User1163516801 posted

    It's a complex question, and actually it has no answer. Chosing Angular (2+) or React depends on your own project and requirement. 

    As Angular has more features out of the box than React. This can be both a good and a bad thing, depending on how you look at it.

    For Angular, some of standard features:

    • Dependency injection
    • Templates, based on an extended version of HTML
    • Routing, provided by @angular/router
    • Ajax requests by @angular/http
    • @angular/forms for building forms
    • Component CSS encapsulation
    • XSS protection
    • Utilities for unit-testing components.

    For React:

    • No dependency injection
    • Instead of classic templates it has JSX, an XML-like language built on top of JavaScript
    • XSS protection
    • Utilities for unit-testing components.

    And there is a post for much more detailed comparison between Angular and React, refer to React vs Angular: An In-depth Comparison for more.

    And here is the official post for how to get started with SPA on asp.net core.

    <audio controls="controls" style="display: none;"></audio>

    Monday, June 4, 2018 6:23 AM
  • User-474980206 posted

    What is driving your change?

    sending data to the server will be very similar. angular you use its ajax library, with react you will probably use jQuery's or the native browser fetch (with a pollyfill for old browsers). this is where the two are most similar. 

    Monday, June 4, 2018 2:58 PM
  • User-1322569703 posted

    That's how I've considered using React for the website. This is for example when you log in that it says in the top "You are now logged in" or "You are now on the homepage and ready to log in to the"

    Thus, it must also be ensured that you have filled in the content that I require. For example, have you provided email, first name <g class="gr_ gr_14 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="14" data-gr-id="14">and</g> password, etc., and, at the same time, please tell us if you need something to be able to access the site.

    At the same time, however, I have also considered Angular (+2)

    Just because my current js is in Angularjs 1.x.

    Considering React much more compared to Angular (+2)

    I run them .net core 2.0 and I have no idea how to "check" if the content is null or not, for example, this input.

    <div class="col-md-4" style="margin-bottom:7px;">
                    @Html.LabelFor(i => i.Email)
                    @Html.TextBoxFor(u => u.Email, new
               {
                   @class = "form-control",
                   @required = "",
                   @placeholder = "Din e-mail",
                   @ng_model = "email",
               })
                </div>

    I just think it's going to be "best" in a way that I'm throwing myself in the React instead of Angular (+2)

    Thursday, June 7, 2018 9:27 PM
  • User-474980206 posted

    if you want validation with react, the simplest is to use a form library.

    no redux:

       https://codesandbox.io/s/zKrK5YLDZ

    redux:

        https://redux-form.com/7.3.0/examples/simple/

    Friday, June 8, 2018 2:58 PM
  • User-1322569703 posted

    That is, what I have in my view content .cshtml ie email, password etc .. should I have a <g class="gr_ gr_3 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="3" data-gr-id="3">jsx</g> file in order to validate the content?

    Friday, June 8, 2018 4:54 PM
  • User-1322569703 posted

    If I need to have input, etc. over to <g class="gr_ gr_3 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="3" data-gr-id="3">jsx</g> file, well, I just have to go up in Angular (+2) eg tag version 4.

    Friday, June 8, 2018 5:57 PM
  • User-474980206 posted

    That is, what I have in my view content .cshtml ie email, password etc .. should I have a jsx file in order to validate the content?

    react is a javascript component library. you would have no react markup in the view. typically, you would have a view like:

    @model MyPageModel
    
    <script>var pageModel = @Html.Raw(JsonConvert.SerializeObject(Model));</script>
    <div id="reactContent"></div>
    <script src="@Url.Content("~/js/mypage.js"></script>
    
    

    all view markup would be in a .jsx file. the validation would also be there. its pretty easy to generalize the view (pass the script name for the page), and only have 1 shared view for all pages. or if you used create-react-app to create the boilerplate, you don't need any mvc views or just the home/index view which includes the react script and the div.

    here is minimal react page:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
        <meta name="theme-color" content="#000000">
        <base href="/" />
        <link rel="manifest" href="/manifest.json">
        <link rel="shortcut icon" href="/favicon.ico">
        <title>My Title</title>
        <link href="/static/css/main.css" rel="stylesheet">
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <script type="text/javascript" src="/static/js/main.js"></script>
    </body>
    </html>

     


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 8, 2018 8:36 PM