ASP.NET MVC 5 With ReactJS

Viral Jain
7y
26.5k
0
5

Article

Introduction

React is a very popular front-end library developed by Facebook. It’s basically used for handling View layer for web and mobile apps. The biggest advantage of React JS is that it allows us to create reusable UI components. There are many popular JavaScript libraries in the market but React is the the most popular, and it has strong and large foundation and community behind it.

When we develop applications in MVC, we use JavaScript, jQuery, and HTML with it. Now, NuGet package team has provided in-built library package for Visual Studio for MVC 4, 5 and ASP.NET Core.

So now, you can directly download the NuGet Package for React.js for your MVC application from npm, and use it in your application easily.

Let’s start with a demo.

Create New Project -> File >> New >> Project.
Select “NET Framework 4.6.2” and Templates >> Visual C# >> Web >> ASP.NET Web Application. Call it ReactDemoSharp.

Now, in the “New ASP.NET Web Application” dialog, select Empty Template. I always recommend you use this template for new sites, as others include large amounts of unnecessary packages that may not even work for you.

Now, install React JS to newly created .NET project.
Right click on your project in the Solution Explorer.
Select “Manage Nuget Packages”.
Search For “ReactJS.NET" and install the Web.Mvc4)package.

Go to Solution Explorer, right click on the Controller folder, and click Add >> Controller.

Name the Controller as “HomeController” and select “Empty MVC Controller” as your template.
Now, once the Controller has been created, right-click on Return View() and click “AddView”.
In the AddView Dialog, fill the following details.
View name: Index
Create a strongly-typed View: Unticked
Create as a partial view: Unticked
Use a layout or master page: Unticked

Now, replace the content of new view file with the below code.
1. @{
2. Layout = null;
3. }
4. <html>
5. <head>
6. <title>Hello React</title>
7. </head>
8. <body>
9. <div id="content"></div>
10. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
11. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
12. <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
13. <script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
14. </body>
15. </html>

Now, we need to create the JavaScript file (Tutorial.jsx). Right click on your project and select Add >> New Folder, enter “Scripts” as folder name.

Right click on Folder and select Add >> New Item.

Select Web >> JSX File, and enter “Tutorial.jsx” as file name. Then, click “Add”.

React is all about modular, composable components, and basically it has a component structure.

Now, we will build CommentBox Component , which is just a simple <div>.

Add the below code to Tutorial.jsx.
1. var CommentBox = React.createClass({
2. render: function() {
3. return (
4. <div className="commentBox">
5. Hello, world! This is viral jain.
6. </div>
7. );
8. }
9. });
10. ReactDOM.render(
11. <CommentBox />,
12. document.getElementById('content')
13. );