Having come out of our tech meeting with instructions to choose a MV* javascript framework for future UI development I was initially overcome with a phenomena known as a Paradox of Choice .

Eventually the ailment passed and finally as an exercise I decided to see how easy it would be to pull out the razor engine rendering from an existing mvc.net web app UI and to replace it with ReactJS, without having to change the backend controller or logic.

It was fairly easy to integrate reactjs into the existing mvc.net application and within a short time I was able to replace the razor code with JSX (react javascript) using this this tutorial .

The task was to replace replace this simple  razor syntax with react JSX.

foreach (var order in @Model.PurchaseOrders)
{
<div class="col-md-6">Requisition: @order.Id</div>
<div class="col-md-6 ">Date created: @order.DateCreated.ToShortDateString()</div>
}

And here is what I came up with initially.

var RequisitionBox = React.createClass({
loadCommentsFromServer: function () {
var xhr = new XMLHttpRequest();
xhr.open('get', this.props.url, true);
xhr.onload = function () {
var data = JSON.parse(xhr.responseText);
this.setState({ data: data });
}.bind(this);
xhr.send();
},
getInitialState: function () {
return { data: [] };
},
componentDidMount: function () {
this.loadCommentsFromServer();
},
render: function() {

 return (
 <div className="requisition">
 <h1>Requistions List</h1>
 <div className="requisitionList">{requisitionNodes}
 </div>
 </div>
 );
 }
});

var Requistion = React.createClass({
 render() {
 return (
 <div> 
 <div className="col-md-6 "> Requistion:{this.props.Id}</div>
 <div className="col-md-6 ">{this.props.DateCreated}</div>
 </div>

 );
 }
});ReactDOM.render( document.getElementById('content') );

And that’s it !

Seems like a lot more code than the original 4 lines. Clearly I have done something wrong.

In part 2 I will look at how to refactor this code so that the React component is no longer responsible for fetching the data and also  how we can render the component server side to improve preformance. Or to give it it’s fancy name – Isomorphic Javascript .