Introduction

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 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.