How to use React with ASP.NET MVC

Question

I wanted to tryout React and started following the tutorial here Took the Internet template, added the required script references in _Layout.cshtml and placed the following script in About.cshtml.

This code with the '@' char is giving trouble:

<script type="text/jsx">
  /**
   * @jsx React.DOM
   */
  // The above declaration must remain intact at the top of the script.
  // Your code here
</script>

MVC says:

The name 'jsx' does not exist in the current context

Please provide some pointers

Regards.

Answer 1

I've just released ReactJS.NET which lets you easily compile JSX to JavaScript. With ReactJS.NET, you can put your code into a .jsx file (say /Scripts/HelloWorld.jsx) and then reference it via a script tag:

<script src="@Url.Content("~/Scripts/HelloWorld.jsx")"></script>

Additionally, ASP.NET Bundling and Minification and Cassette are both supported.

---

Original answer (pre 4th April 2014):

You need to escape the @ by writing it twice:

<script type="text/jsx">
  /**
   * @@jsx React.DOM
   */
  // The above declaration must remain intact at the top of the script.
  // Your code here
</script>

I'm currently working on some stuff to make it easier to use React from ASP.NET, which should be coming out very soon. This includes server-side compilation of JSX (both on the fly and via ASP.NET minification and combination) and optional server-side rendering of React components. Stay tuned!