Geek Answers Handbook

ReactJS.NET MVC Tutorial not working?

I am trying to set up a new project in Visual Studio, which will be MVC 5 with a one-page application written in ReactJS. So I followed the tutorial on the ReactJS website .

I got to the first part where you run the project, and I received a syntax error due to JSX (the browser seems to want to interpret it as vanilla JavaScript, which makes sense). So I added type="text/jsx"a script to the tag.

In general, my HTML / JSX looks like this:

HTML output using the 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')
);

- ? , type="text/jsx" script. , - , JSX JS, , , .

Chrome Developer Tools.

+4
3

- :

  • script , :

    <script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>

  • JSX:

    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>

, HTML Razor :

<!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>

, .

Update:

@DanielLoNigro :

, ReactJS.NET, JSXTransformer . , JSX Web.config( .jsx).

+6

.jsx web.config:

<handlers>
  <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified"/>
  <remove name="Babel" />
  <add name="Babel" verb="GET" path="*.jsx" type="React.Web.BabelHandlerFactory, React.Web" preCondition="integratedMode" />
</handlers>

= "text/jsx" script.

+3

, , , ASP.NET MVC 5, ​​ASP.NET, .

ASP.NET MVC 4 5: https://reactjs.net/getting-started/tutorial_aspnet4.html ASP.Net: https://reactjs.net/getting-started/tutorial.html

ASP.NET MVC 5, :

:

  • MVC 5.
  • NuGet:

Install-Package react.js

Install-Package React.Web.Mvc4

, "" ""

  1. Scripts .jsx :

Tutorial.jsx

, .

  1. .jsx:

var CommentBox = React.createClass({ 
    render: function() { 
        return (
          <div className="commentBox">
            Hello, world! I am a CommentBox.
          </div>
        ); 
     } 
   }); 

ReactDOM.render(
    <CommentBox />, 
     document.getElementById('content') 
);
Hide result
  1. Index, Home , :
@{ Layout = null; }
<html>

<head>
  <title>Hello React</title>
</head>

<body>
  <div id="content"></div>
  <script src="@Url.Content(" ~/Scripts/react/react.js ")"></script>
  <script src="@Url.Content(" ~/Scripts/react/react-dom.js ")"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
  <script src="@Url.Content(" ~/Scripts/Tutorial.jsx ")"></script>
</body>

</html>

, , : ", ! - .

+1

More articles:


All Articles