Render reactjs components with razor in index.cshtml - asp.net-mvc

Question

This is a demo of CRUD(Create,Update,Delete) MVC 5 app + Entity Framework + Reactjs
I'm trying to convert the tags below into reactjs components and render whole page but the problem is the razor lines. When rendering it just shows the text.
What should I do?
Customer View Index:
<h2>Index</h2>
<div id="root">
</div>
<p>
#Html.ActionLink("Add New Customer", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.Address)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Address)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
#Html.ActionLink("Details", "Details", new { id = item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
</tr>
}
Reacjs.jsx
class Table extends React.Component {
render() {
return (
<div className="Table">
#Html.ActionLink("Add New Customer", "Create")
</div>
);
}
}
ReactDOM.render(
<Table />, document.getElementById('root')
);