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.

Have you tried putting the script references in About.cshtml too? — Dunken
– Dunken, Commented Apr 2, 2014 at 8:58
Do you have enclosed this tag after reference the React script ?, Better to see and tried this demo github.com/facebook/react/tree/master/examples — Anirudha Gupta
– Anirudha Gupta, Commented Apr 2, 2014 at 9:21

Daniel Lo Nigro · Accepted Answer · 2014-04-04 21:32:14Z

10

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!

edited Apr 4, 2014 at 21:32

answered Apr 3, 2014 at 6:33

Daniel Lo Nigro

3,43430 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kieran Ojakangas Over a year ago

Hey, it looks like I can't use the React or ReactInitJavaScript HTML helpers in my Razor views... I've tried following several StackOverflow and other posts and finally ended up posting my own. Can you take a gander and see if you can give your two cents? I was able to follow the CommentBox tutorial RIGHT up to the last optimization challenge. :)

Paul Knopf · Accepted Answer · 2016-03-07 04:33:42Z

0

Take a look my project, a starter template for using React in .NET.

https://github.com/pauldotknopf/react-dot-net

This project solves many issues that are present in the other projects (NodeServices and ReactJS.NET), including truely isomorphic applications with matching server/client routing.

answered Mar 7, 2016 at 4:33

Paul Knopf

9,80424 gold badges83 silver badges158 bronze badges

Collectives™ on Stack Overflow

How to use React with ASP.NET MVC

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related