CODEWITHSUNDEEP
asp.netreactjsasp.net-core
Sujit.Warrier
Sujit.Warrier

Reputation: 2869

Component not defined

So I want to set up an asp.net core 1.0 project with react js. I followed the following tutorial to set up the project. I am trying to build and use my first component. The only difference I made was I used ES6 script instead of the old syntax shown the tutorial. Here is my code.

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?}");
        });
    }

Views/_Viewimports.chtml

   @using ReactTest
   @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
   @using React.AspNet

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'));

The problem is i get the error 'Uncaught ReferenceError: Component is not defined'. If I try to import React and ReactDOM in tutorial.jsx I get the error 'Uncaught SyntaxError: Unexpected token import'

Upvotes: 0

Views: 1401

Answers (1)

Elumalai Kaliyaperumal
Elumalai Kaliyaperumal

Reputation: 1520

In your code 'Component' should be defined as 'React.Component'

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

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

Upvotes: 1

Related Questions