Menu
I'm trying to setup a new project in Visual Studio that is going to be MVC 5 with a single page app written in ReactJS. So I followed the guide on the ReactJS website.
I got to the very first part where you run the project, and I got a syntax error because of the JSX (the browser seemed to want to interpret it as vanilla JavaScript which makes perfect sense). So I added type="text/jsx" to the script tag.
In total, my HTML/JSX looks like this:
HTML output by Razor view
<!doctype html>
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="content"></div>
<script src="http://fb.me/react-0.12.2.js"></script>
<script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
</body>
</html>
Tutorial.jsx
var CommentBox = React.createClass({
render: function() {
return (
<div className="comment-box">
Hello, world! I am a CommentBox.
</div>
);
}
});
React.render(
<CommentBox />,
document.getElementById('content')
);
I don't understand - what have I done wrong? I've followed the tutorial to the letter aside from adding type="text/jsx" to the script tag. I'm assuming something needs to be included to handle transforming the JSX into vanilla JS, but the tutorial doesn't seem to mention this.
I'm not getting any errors at all in the Chrome Developer Tools console.
307
ReactJS.NET makes it easier to use Facebook's React and JSX from C# and other . NET languages, focusing specifically on ASP.NET MVC (although it also works in other environments). It supports both ASP.NET 4 (with MVC 4 or 5), and ASP.NET Core MVC. It is cross-platform and can run on Linux via Mono or .
The ASP.NET Core with React project template provides a convenient starting point for ASP.NET Core apps using React and Create React App (CRA) to implement a rich, client-side user interface (UI).
React works well with C#. The combination delivers robust apps. React is also one of the most liked libraries by the developer community.
React is a great choice for building a frontend on an ASP.NET Core backend. It's quick to get up and running, even when adding it to an existing non-React frontend. Facebook will ensure it will continue to develop and be well supported for many years to come. The React community is also massive.
I figured it out - the tutorial is missing two things:
The script inclusion should be done thus, with a type declaration:
<script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
The JSX transformer needs to be included:
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
So the full HTML output by the Razor view should look like this:
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="content"></div>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
</body>
</html>
Looks like they need to update their tutorial.
Update:
Commenter @DanielLoNigro added this helpful tip:
Actually if you're using ReactJS.NET, you don't need to use the client-side JSXTransformer. Just ensure that the JSX handler is configured in your Web.config file (there should be a handler for .jsx).
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With