"Hello World" example using ReactJS in asp.net mvc

Monday, February 01, 2016 Sourav Mondal ReactJS

Introduction

This is our first post about ReactJS. Here I have explained a little about ReactJS and What we will learn in this series "ReactJS in ASP.NET MVC application" part by part.

This is the first part of this series. In this post, I will show you very simple "Hello World" example using ReactJS in asp.net mvc application, where we will create a ReactJS components for show some static message fetching from server side in our web page.

Server rendered pages are not optional in ReactJS and its one another important features. For make our first example simple I did not use this features in this post. But we will see that very soon.

Just follow the following steps in order to implement "Hello World" example using ReactJS in asp.net MVC application.

Here In this article, I have used Visual Studio 2013

Step-1: Create New Project.

Go to File > New > Project > ASP.NET Web Application (under web) > Entry Application Name > Click OK > Select Empty template > Checked MVC (under "Add folders and core references for" option) > OK

Step-2: Create an MVC Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Here I have created a controller named "HomeController"

Step-3: Add new action into your controller for getting the view, where we will implement our first ReactJS component.

Here I have added "Index" Action into "Home" Controller. Please write this following code

public ActionResult Index()
{
    return View();
}

Step-4: Add view for your Action & design for implement ReactJS component.

Right Click on Action Method (here right click on Index action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.
HTML Code

@{
    ViewBag.Title = "Index";
}
<h2>Hello World - ReactJS</h2>
@* HTML for show reactjs component *@

<div id="helloworldcontainer">

</div>
@* ReactJS javascript (JSX) code *@
    @* Jquery library *@
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        @* ReactJS library *@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
        @* JSX converter (JSX to native javascript) *@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

@* Here we will create our first ReactJS Component *@

<script type="text/babel">
    var HelloWorldComponent = React.createClass({
        getInitialState : function(){
            return {
                serverMessage : ''
            };
        },
        componentDidMount : function(){
            //Fetch data from server
            $.get('/home/getmessage', function(result){
                if(this.isMounted){
                    this.setState({
                        serverMessage : result
                    });
                }
            }.bind(this));
        },
        render : function(){
            return (<h1>{this.state.serverMessage}</h1>);
        }
    
    });

    ReactDOM.render(<HelloWorldComponent/>,document.getElementById("helloworldcontainer"));
</script>

Here you can see, I have included react.js, react-dom.js and browser.min.js, and then written few line of js code inside a script node with type set to text/babel. If you see carefully, I have written
<h1>{this.state.serverMessage}</h1>(XML syntax) inside render method, which is called JSX. browser.min.js parse JSX to native javascript code.

Here I have created a React component named "HelloWorldComponent", which contain following 3 methods

getInitialState - Invoked once before the component is mounted. The return value will be used as the initial value of this.state.
componentDidMount - It's a reacts Lifecycle Methods. Invoked once on the client, after rendering occurs. setTimeout or setInterval, or send AJAX requests, perform those operations in this method.
render - This method is required. It always returns a single child element or null or false. Here in this example, we returning <h1> HTML tag with server-side message (JSON data from server-side)

Step-5: Add an another MVC action for return JSON data for showing in ReactJS component.

public JsonResult getmessage()
{
    return new JsonResult { Data = "Hello World. I am from server-side", JsonRequestBehavior = JsonRequestBehavior.AllowGet};
}

Step-6: Run application.

Live Demo Download