Support for JSX like syntax (as in TypeScript)

[AlexBoehm]

It would be great to have support for JSX like syntax in C#, similar to
https://www.typescriptlang.org/docs/handbook/jsx.html. Also see https://reactjs.org/docs/introducing-jsx.html.

Background

I have some experience in writing React applications with TypScript. The JSX syntax makes it very comfortable to write HTML like syntax in TypeScript. In TypeScript you can write something like:

interface HelloMessageProps {
    name: string;
}

class HelloMessage extends React.Component<HelloMessageProps, {}> {
    render() {
        return <div>Hello <span className="Name">{this.props.name}</span></div>
    }
}

In JavaScript this becomes somethink like

class HelloMessage extends React.Component{
    render() {
        return React.createElement("div", null,
            "Hello ",
            React.createElement("span", { className: "Name" }, this.props.name));
    }
}

The function createElement is described at https://reactjs.org/docs/react-api.html#createelement.

In .NET there is Blazor now, which has a lot of parallels to React in my opinion. I like the idea of Blazor very much. However, I do not like how Components are declared by using the Razor syntax for different reasons.

Razor code is C# embedded into HTML. It is transformed to C# and wrapped into a class by a tool outside of the C# compiler. Therefore you cannot directly code against this class. You cannot use it, as you can use other classes in C#. A Blazor component does not seem to be a first class citizen as other classes. Thus you can only use und write Blazor components in a specific way. This is a general problem with Razor, which is visible in VS 2017 for example. You cannot search for references within a Razor view, if the view is not open. With a JSX like syntax this would not be a problem, because it would be part of the C# compiler, in my opinion.

JSX is HTML like code embedded into JS. Therefore you still have the full power of the language. The classes, that you are writing, can be used as any other classes as well. This is a huge difference between the Razor/Blazor and the JSX way to me.

Proposal

It would be nice if we had something similar to JSX in C#.

For example, if I would write this in C#

var message = §(<div>Hello<span className="Name">World</span></div>)

this could become something like

var message = CreateElement("div", null,
   "Hello",
    CreateElement("span", new HtmlProps { ClassName = "Name" }, "World")
)

You should also be able to use classes methods like tags in the syntax:

Element HelloMessage(string name) => §(<div>Hello {name}</div>);
var t = §(<div><HelloMessage name="World"/><div>");

and

class GreetingProperties
{
     public string Name {get; set;}
}

class Greeting : Component<GreetingProperties>
{
     render()
     {
          return §(<div>{this.Props.Name}</div>)
     }
}

var t= §(<div><Greeting Name="Foo"/></div>);

The method CreateElement could be provided by different approaches. For example

1. Yould could import these from a static class by using static Microsoft.Blazor.Component
2. You could use a method of a base class
3. You could define a method upfront like

   var CreateElement = Some.Implementation
   

This should be as flexible as possible, to support different scenarios.

This could be used as an alternative to Razor in Blazor or in other projects. I think it would enable a lot of different things for web development.

[HaloFour]

I'd think that there would be much better ways of designing such APIs so that they play well with C#. The team has expressed several times that they're not interested in embedding data formats like XML or JSON directly into the language and I can't imagine that doing so but specifically targeted as a single UI framework would gain much traction.

[Joe4evr]

This could be used as an alternative to Razor in Blazor or in other projects.

If you want to take out the Razor from Blazor then you might as well not even use ASP.NET anymore. The biggest advantage of Blazor is never needing to write JS interop ever again.

[Emzi0767]

Nothing's preventing you from using React if you prefer it. I actually prefer the Razor way of doing things, because it's much cleaner, and provides a more explicit separation between logic and presentation.

[john-h-k]

I have no clue what the § char is, but i really do not want to need to type it to use a feature, because it doesn't appear to be on my full size keyboard....

[jnm2]

@johnkellyoxford It's Alt + numpad 0, 1, 6, 7, on Windows, but only if you have a numpad.

[YairHalberstadt]

@johnkellyoxford It's Alt + numpad 0, 1, 6, 7, on Windows, but only if you have a numpad

Honestly @johnkellyoxford, how on earth didn't you know that? 😉

[3xau1o]

you can use Razor syntax with Blazor : https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor

[ufcpp]

similar to #226 #89