ReactSharp - A C# library for building web user interfaces

React alternative to Blazor

Super Experimental - super unstable

Demo and Documentation

Examples

Counter.cs

publicclassCounter:ReactComponent{privateintvalue=0;voidIncrement(){SetState(()=>{value++;});}voidDecrement(){SetState(()=>{value--;});}publicoverrideobjectRender(){returnnewReactElement($@"<div>    <h4>Counter value:{value}</h4>    <p>        <button type='button' class='btn btn-primary' onclick='{newAction(Increment)}'>Increment</button>        <button type='button' class='btn btn-primary' onclick='{newAction((Decrement))}'>Decrement</button>    </p></div>");}}

App.cs

publicclassApp:ReactComponent{publicoverrideobjectRender(){returnnewReactElement($@"<Fragment>    <p style='padding-top: 20px;'>        <Counter />    </p></Fragment>");}}

Index.razor

<ReactSharpBlazorPrerender="true"Element="@_reactElement"></ReactSharpBlazor>@code{    ReactElement _reactElement = new ReactElement($@"<App/>");}

Todo.csIn action

publicclassTodo:ReactComponent{List<string>items=Enumerable.Range(0,10).Select(i=>i.ToString()).ToList();voidAdd(){SetState(()=>{this.items.Add(Guid.NewGuid().ToString());});}voidRemove(stringitem){SetState(()=>{this.items.Remove(item);});}publicoverrideobjectRender(){returnnewReactElement($@"<div>    <h4>Todo:{items.Count}</h4>    <p>        <button type='button' class='btn btn-primary' onclick='{newAction((Add))}'>Add item</button>    </p>{items.Select(i=>newReactElement($"<div>Task -{i} <button onclick='{newAction(()=>Remove(i))}'>X</button></div>"))}</div>");}}

News

ReactSharp 1.0.0

Prerequisites

Installation

Install-Package ReactSharpInstall-Package ReactSharp.Blazor

<scriptsrc="_content/ReactSharp.Blazor/react-sharp.js"></script>

Questions

Contributing

Sponsors & Backers

License

Thank you