locked
where i can find tutorials and docs about using React js with asp.net core mvc RRS feed

  • Question

  • User-540818677 posted

    i built many web applications using asp.net core MVC. now i want to start using React js inside my new asp.net core MVC, but i fail to find tutorials and documentation about creating CRUD operations using Asp.net core MVC + react js. so can anyone advice of such docs?

    second question, when i use React js with Asp.net core MVC , will react js be the "View" component of the MVC framework?

    Tuesday, December 29, 2020 10:59 PM

All replies

  • User475983607 posted

    i built many web applications using asp.net core MVC. now i want to start using React js inside my new asp.net core MVC, but i fail to find tutorials and documentation about creating CRUD operations using Asp.net core MVC + react js. so can anyone advice of such docs?

    React is added to an existing MVC project similar to adding a jQuery reference in an existing MVC project.  This concept is covered in the official React documentation. https://reactjs.org/docs/add-react-to-a-website.html

    second question, when i use React js with Asp.net core MVC , will react js be the "View" component of the MVC framework?

    In the simplest of terms, React and MVC are UI frameworks that have data binding.  Typically, React or MVC is selected, not both,  when building a web project.  However, it is possible to add React components to an existing MVC project.

    The standard pattern is React with Web API.  Web API can host the React start up application.

    Anyway, .NET Core comes with React templates to get started. 

    https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-5.0&tabs=visual-studio

    The official React site also provides suggests for different toolchains you can use.

    https://reactjs.org/docs/create-a-new-react-app.html

    Tuesday, December 29, 2020 11:24 PM
  • User-540818677 posted

    johnjohn123123

    i built many web applications using asp.net core MVC. now i want to start using React js inside my new asp.net core MVC, but i fail to find tutorials and documentation about creating CRUD operations using Asp.net core MVC + react js. so can anyone advice of such docs?

    React is added to an existing MVC project similar to adding a jQuery reference in an existing MVC project.  This concept is covered in the official React documentation. https://reactjs.org/docs/add-react-to-a-website.html

    johnjohn123123

    second question, when i use React js with Asp.net core MVC , will react js be the "View" component of the MVC framework?

    In the simplest of terms, React and MVC are UI frameworks that have data binding.  Typically, React or MVC is selected, not both,  when building a web project.  However, it is possible to add React components to an existing MVC project.

    The standard pattern is React with Web API.  Web API can host the React start up application.

    Anyway, .NET Core comes with React templates to get started. 

    https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-5.0&tabs=visual-studio

    The official React site also provides suggests for different toolchains you can use.

    https://reactjs.org/docs/create-a-new-react-app.html

    thanks for the reply. but i am a bit confused . You said that i can add React JS inside visual studio project similar to how i add jQuery, then you said that "Typically, React or MVC is selected, not both".. but since i can add React Js inside MVc this means that i can use them together is this correct?

    Wednesday, December 30, 2020 12:49 AM
  • User-474980206 posted

    Typically if you use react, then you are building an SPA. In this case the .net core is webapi. There is even a template for this, that creates a project with a react SPA, and a webapi.

       dotnet new react

    the project uses the react-scripts to build the react application, and includes a sample api call. so you can follow along with any react tutorial. 

    if you are an azure user, then there is a new azure static web app. This hosts a react application, and supports azure functions as the api. There is a github template to build one of these. Currently only github is supported for CI and deploy. I’ve been using this for newer react applications.

    https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=react

     

    Wednesday, December 30, 2020 4:57 AM
  • User1686398519 posted

    Hi johnjohn123123, 

    You can create a React app first, and then add it to the ASP .NET Core MVC App.

    You can click this link to learn how to add React App to .NET Core MVC App.

    Best Regards,

    YihuiSun

    Wednesday, December 30, 2020 7:24 AM
  • User475983607 posted

    johnjohn123123

    thanks for the reply. but i am a bit confused . You said that i can add React JS inside visual studio project similar to how i add jQuery, then you said that "Typically, React or MVC is selected, not both".. but since i can add React Js inside MVc this means that i can use them together is this correct?

    I think you misunderstand due to not reading the linked tutorial(s) before posting.  The React library can be added to any web page by adding a file reference.   This is approach is illustrated in the first tutorial and takes maybe 5 minutes to complete.  Just a few copy and paste code blocks.

    There is also a React template provided by the ASP.NET Core SDK which sets up a Visual Studio toolchain for building a React application.  This option is used if you are creating a new project rather than integrating React into an existing web project. Usually this approach is used when you plan to build an SPA as explained in the linked tutorials and reference documentation.  

    At this point, I think your confusion stems from not understanding React fundamentals.  I recommend taking the time to go through a few React tutorials without worrying about MVC.  Once you get a grip on React's one way binding, you'll realize the CRUD operations are just controller actions that return JSON rather than HTML in MVC.  Since you're already have MVC experience, crafting actions to do CRUD operations will be trivial.  All you have to do in React is call the action using the browser's fetch API.  Again, covered in the linked tutorials you asked for but did not read.

    Wednesday, December 30, 2020 12:24 PM
  • User-474980206 posted

    Before you go an farther you need to pick the tool chain you will use to build the react app. 

    • vanilla js skipping the jsx support. Just a reference to the react libraries (not common)
    • react-scripts. 
    • you own Babel build 
    • you own webpack with babel build
    • typescript with jsx support.
    Wednesday, December 30, 2020 5:57 PM