React#
ReactSharp - A C# library for building web user interfaces
React alternative to Blazor
Super Experimental - super unstable
Demo and Documentation
Examples
Counter.cs
public class Counter : ReactComponent
{
private int value = 0;
void Increment()
{
SetState(() => { value++; });
}
void Decrement()
{
SetState(() => { value--; });
}
public override object Render()
{
return new ReactElement($@"
<div>
<h4>Counter value: {value}</h4>
<p>
<button type='button' class='btn btn-primary' onclick='{new Action(Increment)}'>Increment</button>
<button type='button' class='btn btn-primary' onclick='{new Action((Decrement))}'>Decrement</button>
</p>
</div>
");
}
}App.cs
public class App : ReactComponent
{
public override object Render()
{
return new ReactElement($@"
<Fragment>
<p style='padding-top: 20px;'>
<Counter />
</p>
</Fragment>
");
}
}Index.razor
<ReactSharpBlazor Prerender="true" Element="@_reactElement"></ReactSharpBlazor>
@code
{
ReactElement _reactElement = new ReactElement($@"<App/>");
}Todo.cs In action
public class Todo : ReactComponent
{
List<string> items = Enumerable.Range(0, 10).Select(i => i.ToString()).ToList();
void Add()
{
SetState(() => { this.items.Add(Guid.NewGuid().ToString()); });
}
void Remove(string item)
{
SetState(() => { this.items.Remove(item); });
}
public override object Render()
{
return new ReactElement($@"
<div>
<h4>Todo: {items.Count}</h4>
<p>
<button type='button' class='btn btn-primary' onclick='{new Action((Add))}'>Add item</button>
</p>
{items.Select(i => new ReactElement($"<div>Task - {i} <button onclick='{new Action(() => Remove(i))}'>X</button></div>"))}
</div>
");
}
}News
ReactSharp 1.0.0
- First public release
Prerequisites
Don't know what Blazor is? Read here
Complete all Blazor dependencies.
- .NET Core 3.1
- Visual Studio 2019 with the ASP.NET and web development workload selected.
Installation
Latest version in here:
To Install
Install-Package ReactSharp
Install-Package ReactSharp.Blazor
For client-side and server-side Blazor - add script section to index.html or _Host.cshtml (head section)
<script src="_content/ReactSharp.Blazor/react-sharp.js"></script>Questions
For how-to questions and other non-issues, for now you can use issues or you can use 
Contributing
We'd greatly appreciate any contribution you make. :)
Sponsors & Backers
ReactSharp does not run under the umbrella of any company or anything like that. It is an independent project created in spare time.
If you think that this project helped you or your company in any way, you can consider becoming a backer/sponsor.
License
This project is licensed under the terms of the MIT license.