Skip to content

SamProf/ReactSharp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React#

ReactSharp - A C# library for building web user interfaces

React alternative to Blazor

Super Experimental - super unstable

NuGet Gitter GitHub Stars GitHub Issues Live Demo MIT Donate Patreon

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: NuGet

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 Gitter.

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.

Thank you

About

C# library for building web user interfaces

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published