Getting Started React.js In MVC

React.js

React is an open source JavaScript library, created by Facebook to build complex, interactive UI in Web and mobile Applications. It is considered as the V in MVC. It is currently one of the most popular JavaScript libraries and it has a strong foundation and large community behind it.

Advantage of React.js,

1. React uses virtual DOM, which is JavaScript object. This will improve app performance, since JavaScript virtual DOM is faster than the regular DOM.
2. React can be used on client and Server side.
3. Component and Data patterns improves the readability, which helps to maintain larger apps.
4. React can be used with other frameworks.

Getting Started,

• Create a new Project. Open Visual Studio 2015.
• Go to File -> New -> Project.
• Select Web in the installed templates.
• Select ASP.NET MVC 5 Web Application.
• Enter the name and choose the location.
• Click OK.

Right click on your solution and click Manage NuGet Package Manager, as shown below-


Now, search React.Web.Mvc4 and click Install button.



Now, let’s create a new JavaScript file and give the extension .JSX, as given below-



Add code in .JSX file, as given below-

var Articles = React.createClass
({
    render: function()
    {
        return ( < div className = "article" > < h1 > Fav Articles < /h1>  < ArticleList / > < ArticleForm / > < /div> );
    }
});
var ArticleList = React.createClass
({
    render: function()
   {
        return ( < div className = "articleList" > Hello, World!Article List. < /div> );
    }
});
var ArticleForm = React.createClass
({
    render: function()
  {
        return ( < div className = "articleForm" > Hello, World!Article Form. < /div> );
    }
});
ReactDOM.render( < Articles / > , document.getElementById('content'));

If you want to render only one var, write, as given below-

ReactDOM.render
(
  React.createElement(ArticleForm, null
),
  document.getElementById('content'));

Now, add references of. JSX file and other supporting Java scripts.

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/React/react.min.js"></script>
<script src="~/Scripts/React/react-dom.min.js"></script>
<script src="~/Scripts/React/JSXTransformer.js"></script>
<script src="~/Scripts/articles.jsx" type="text/jsx"></script>
<div id="content"></div>

Output



Conclusion

This blog shows the basic starting part of React.JS in MVC. In my next articles,  we will learn deeply about React.JS. If you have any question or comments, drop me a line in C# Corner comments section.