Skip to content

TFTomSun/AspNetCore.RazorReact

Repository files navigation

BuildStatus for Build 1.0.21

Build status Test status NuGet NuGet Dowloads

Razor React

This project is based on DotNetify.React and provides tag helpers for defining react components within ASP.NET Core Razor Pages.

Features

  • No javascript, no JSX required
  • typesafe client side bindings
  • very simple to setup

Samples

  • The source code of an sample web app can be found here

Getting Started

  • Create a ASP.NET Core 2.0 Web Application (No React, No MVC, simple Web Application)

  • Install this nuget package

  • Extend the Startup.cs file:

        public void ConfigureServices(IServiceCollection services)
        {
            services.UseRazorReact(); // <--- Add this line
            services.AddMvc();
        }
        
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseBrowserLink();
            }
            else
            {
                app.UseExceptionHandler("/Error");
            }
    
            app.UseStaticFiles();
            app.UseRazorReact(); // <--- Add this line
    
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
            });
            
        }
  • Create the react component HelloWorld.cs

         public class HelloWorld : ReactComponent<HelloWorld>
    {
        private Timer _timer;
        public string Greetings => "Hello World!";
        public DateTime ServerTime => DateTime.Now;
    
        public HelloWorld()
        {
            _timer = new Timer(state =>
            {
                Changed(nameof(ServerTime));
                PushUpdates();
            }, null, 0, 1000);
        }
        public override void Dispose() => _timer.Dispose();
    }
  • Replace the content of the Index.cshtml razor file

    @page
    @addTagHelper "*, TomSun.AspNetCore.RazorReact"
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
    }
    <react-scripts/>
    
    <react component-type="@typeof(HelloWorld)">
        <div>
            Hi @HelloWorld.Bind(x => x.state.Greetings)<br />
            Server time is: @HelloWorld.Bind(x => x.state.ServerTime)
        </div>
    </react>
  • Run your app. (Hint: IE11 is currently not supported, because of a bug in dotNetify/signalR)

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages