title: Render reactjs components with razor in index.cshtml
body: <p>This is a demo of CRUD(Create,Update,Delete) MVC 5 app + Entity Framework + Reactjs</p>
  
  <p>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. </p>
  
  <p>What should I do?</p>
  
  <p>Customer View Index:</p>
  
  <pre><code>&lt;h2&gt;Index&lt;/h2&gt;
  
  &lt;div id="root"&gt;
  
  &lt;/div&gt;
  
  &lt;p&gt;
      @Html.ActionLink("Add New Customer", "Create")
  &lt;/p&gt;
  &lt;table class="table"&gt;
      &lt;tr&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.Name)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.Address)
      &lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
  &lt;/tr&gt;
  
  @foreach (var item in Model)
  {
      &lt;tr&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Name)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Address)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
              @Html.ActionLink("Details", "Details", new { id = item.Id }) |
              @Html.ActionLink("Delete", "Delete", new { id = item.Id })
          &lt;/td&gt;
      &lt;/tr&gt;
  }
  </code></pre>
  
  <p></p>
  
  <p>Reacjs.jsx    </p>
  
  <pre><code>class Table extends React.Component {
      render() {
          return (
              &lt;div className="Table"&gt;
                  @Html.ActionLink("Add New Customer", "Create")
              &lt;/div&gt;
          );
      }
  }
  ReactDOM.render(
      &lt;Table /&gt;, document.getElementById('root')
  );
  </code></pre>