ReactJS.NET MVC tutorial doesn't work?

后端未结

关注

 4  1867

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.

相关标签:

4条回答

盖世英雄少女心

2021-01-12 10:02

This is how the .jsx handler can be registered in 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>

and in this case there is no need to have type="text/jsx" in script tag.

0 讨论(0)

忘掉有多难

2021-01-12 10:09
The first thing you need to ensure is that you are indeed creating an ASP.NET MVC 5 application and not an ASP.NET Core, as the tutorials are different.

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

If you are creating an ASP.NET MVC 5 application then follow the steps below:

Steps:
1. Create a new MVC 5 project.
2. In the package manager console, install the following NuGet packages:
Install-Package react.js

Install-Package React.Web.Mvc4

You will notice that a folder called 'react' will be created in 'Scripts'
1. In the Scripts folder create a new '.jsx' file and name it:
Tutorial.jsx

This is your where your react code will go.
1. Copy the following code into your newly created '.jsx' file:
```
var CommentBox = React.createClass({ 
    render: function() { 
        return (
          <div className="commentBox">
            Hello, world! I am a CommentBox.
          </div>
        ); 
     } 
   }); 

ReactDOM.render(
    <CommentBox />, 
     document.getElementById('content') 
);
```
1. In your Index view, which is in the Home folder under views, place the following code:
```
@{ 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>
```
Now if you run the application you should get the following in your browser window: 'Hello, world! I am a CommentBox.'
0 讨论(0)
发布评论:

提交评论
- 加载中...
时光说笑

2021-01-12 10:15
I figured it out - the tutorial is missing two things:
1. The script inclusion should be done thus, with a type declaration:
  
  <script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
2. 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).
0 讨论(0)
发布评论:

提交评论
- 加载中...
执念已碎

2021-01-12 10:19

For me, even though my system was 64bit, I had to install JavaScriptEngineSwitcher.V8.Native.win-x86instead of JavaScriptEngineSwitcher.V8.Native.win-x64 and it solved the problem. It will interesting to hear why should I have to install x86 package.

PS: Mind you, that was for ASP.Net MVC though.

0 讨论(0)
发布评论:

提交评论
- 加载中...