Asp.net 组件未定义_Asp.net_Reactjs_Asp.net Core

Asp.net 组件未定义

asp.net reactjs asp.net-core

Asp.net 组件未定义,asp.net,reactjs,asp.net-core,Asp.net,Reactjs,Asp.net Core,所以我想用react js建立一个asp.net core 1.0项目。我遵循以下步骤来设置项目。我正在尝试构建和使用我的第一个组件。唯一不同的是我使用了ES6脚本，而不是教程中显示的旧语法。这是我的密码 Startup.cs public void ConfigureServices(IServiceCollection services) { // Add framework services. services.AddSingleton<

所以我想用react js建立一个asp.net core 1.0项目。我遵循以下步骤来设置项目。我正在尝试构建和使用我的第一个组件。唯一不同的是我使用了ES6脚本，而不是教程中显示的旧语法。这是我的密码

Startup.cs

    public void ConfigureServices(IServiceCollection services)
    {
        // Add framework services.
        services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
        services.AddReact();
        services.AddMvc();
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseBrowserLink();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }
        app.UseReact(config =>
        {
            // If you want to use server-side rendering of React components,
            // add all the necessary JavaScript files here. This includes
            // your components as well as all of their dependencies.
            // See http://reactjs.net/ for more information. Example:
            //config
            //  .AddScript("~/Scripts/First.jsx")
            //  .AddScript("~/Scripts/Second.jsx");

            // If you use an external build too (for example, Babel, Webpack,
            // Browserify or Gulp), you can improve performance by disabling
            // ReactJS.NET's version of Babel and loading the pre-transpiled
            // scripts. Example:
            //config
            //  .SetLoadBabel(false)
            //  .AddScriptWithoutTransform("~/Scripts/bundle.server.js");
        });
        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });
    }

Home/Index.cshtml

 @{
Layout = null;
 }
<html>
<head>
    <title>Hello React</title>
</head>
<body>
<div id="content"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="@Url.Content("~/js/tutorial.jsx")"></script>
</body>
</html>

@{
布局=空；
}
你好，反应

/js/tutorial.jsx

class App extends Component {
    render() {
       return (<div>test</div>);

   }

}
ReactDOM.render(<App/>,document.getElementById('content'));

类应用程序扩展组件{
render（）{
返回（测试）；
}
}
ReactDOM.render（，document.getElementById（'content'））；

问题是我得到了错误“未捕获引用错误：未定义组件”。如果我尝试在tutorial.jsx中导入React和ReactDOM，我会在代码“Component”中得到错误“Uncaught SyntaxError:Unexpected token import”

应该将“Component”定义为“React.Component”

class App extends React.Component {
   render() {
       return (<div>test</div>);
   }
}

ReactDOM.render(<App/>, document.getElementById('content'));

类应用程序扩展了React.Component{
render（）{
返回（测试）；
}
}
ReactDOM.render（，document.getElementById（'content'））；

有时尝试这样做：

导入React，{Component}来自'React'
class App extends React.Component {
   render() {
       return (<div>test</div>);
   }
}

ReactDOM.render(<App/>, document.getElementById('content'));