Meine lieblings C# 6 Sprachfeatures


Man freut sich immer darüber wenn C# neue Features hinzugefügt werden und hofft das man so viele wie möglich davon auch verwenden wird, denn die meisten vereinfachen einem das Programmieren und sparen Codezeilen ein. Außerdem kann man die neuen Features auch in älteren Projekten verwenden, wichtig ist nur das VS 2015 oder TFS 2015 für das Bauen der Projekte verwendet wird, denn es handelt sich um reine Compiler Features und nicht um Features die durch eine neue .NET Version eingeführt wurden. Aktuell verwende ich die folgenden neuen Features recht häufig, was in vielen Fällen meiner Meinung nach die Lesbarkeit des Codes klar verbessert.

1. String Interpolation anstatt String.Format

Wenn man ein “$” Zeichen vor einen String schreibt den man erstellen möchte kann man im String selbst mit Hilfe von “{varname}” geschweiften Klammern direkt auf Variablen zugreifen. Was wesentlich angenehmer ist wie String.Format, wo man jedes mal nachzählen musste ob man auch den Wert an der richtigen Stelle einfügt.

2. nameof Schlüsselwort

Mit Hilfe des nameof Schlüsselworts, bekommt man die Bezeichnung eines beliebigen Properties zurück was man übergibt. Dies was früher maximal durch Reflexion möglich oder in dem man einen String mit dem Namen selbst angelegt hat. Jetzt reicht dafür ein einfacher Aufruf aus.

3. Direktes Initialisieren von Properties ohne Konstruktor

In vielen einfachen Klassen initialisiere ich die Properties jetzt direkt ohne das ich einen Konstruktor verwende, was die Klasse kleiner macht und wie ich finde übersichtlicher, da man direkt sieht mit welchem Wert in Property initialisiert wird.

4. Elvis Operator “?” in Verkettungen

Die Verwendung des Fragezeichens “?” direkt in Komplexen Abfragen ohne das man zusätzliche “If” Statements benötigt, die prüfen ob der Wert Null ist.

Natürlich gibt es noch mehr features mit C# 6, aber diese verwende ich nur selten. Nur die oben genannten Features habe ich in meiner täglichen Arbeit aktiv mit eingebunden und möchte diese aktuell nicht mehr missen.

Kommerzielle Ui Framworks für Angular 1 / 2 (Telerik, DevExpress, …)


Es gibt zwar eine Menge kostenlose Ui Frameworks für AngularJs, diese beinhalten aber meist nur die Standardkomponenten und z.B. kein richtiges Data Grid. Da ich aber ein richtiges Data Grid benötigte, musste ich mich also nach kommerziellen Lösungen umsehen. Bei den kommerziellen Lösungen habe ich leider keines finden können welches Nativ in AngularJs 1.x geschrieben ist. Außer Ionic, aber dabei handelt es sich um ein pures Mobile Framework. Für die Standardwebanwendungen gibt nur Lösungen die im Kern auf jQuery setzen und dann nach außen hin einen Angular “Wrapper” / Schnittstelle anbieten, so dass man denkt man verwendet native Angular Komponenten. Dafür gibt es inzwischen bei allen Anbietern TypeScript Support, mit Hilfe von passenden Typings für das jeweilige Framework, ist IntelliSense dann auch kein Problem mehr.

Am Ende habe ich nur vier Anbieter finden können, die mir zugesagt haben, die zumindest laut Webseite eine Angular 1 Integration bieten. Dabei handelte es sich um

1. DevExpress mit DevExtreme

Wie schon anfangs erwähnt handelt es sich bei der Angular 1.x Umsetzung um einen Wrapper mit dem alle DevExtreme Controls auch für Angular bereitstehen. Bei DevExtreme handelt es sich um die günstigste Lösung, wenn man nur auf JavaScript Webkomponenten angewiesen ist. Die Dokumentation ist spitze und enthält live Beispiele die man direkt anpassen und ausprobieren kann. Außerdem gibt es einen Themebuilder in dem ich meine Bootstrap 3 Variablen einlesen kann und DevExtreme dann entsprechend meine gewohnten Styles verwendet für Bootstrap 3. Außerdem scheint es ein recht aktives Forum zu geben in dem DevExpress Mitarbeiter zu vielen Fragen die passenden Antworten liefern.

Da die Grundvoraussetzungen sehr gut waren, habe ich hier auch die Trial Version ausprobiert und meine erste simple Angular 1.x Anwendung mit einer DevExtreme Textbox die an das ngModel gebunden wurde, hat auch nicht länger wie 20 Minuten gedauert (sehr gute Dokumentation). Leider musste ich bereits hier feststellen, das die Implementierung nicht Angular Like umgesetzt wurde. Denn die Eingabe in das Textfeld wurde erst dann in meine lokale Angular Variable zurückgeschrieben wenn ich das Textfeld verlassen habe (also kein “natives” TwoWayModel Binding out of the box). Außerdem konnte ich für die Validierung nicht wie gewohnt über AngularJs gehen und die Form Variablen wie $valid … verwenden, sondern hier muss ein eigener Validator von DevExtreme verwendet werden, was das Zusammenspiel von eigenen Angular Komponenten und DevExtreme quasi “unmöglich” macht. Wenn man also ein Formular mit Validierung bauen möchte, verwendet man am Besten nur DevExtreme Komponenten.

Dann habe ich noch die Autocomplete Textbox ausprobiert und versucht eine Serverseitige Abfrage für die Autocomplete Elemente zu implementieren, was mir nach 4 Stunden nur zum Teil gelungen ist und ich mit der Implementierung nicht wirklich zufrieden war.

Für DevExtreme gibt es aktuell eine Angular 2 Implementierung im CTP Status – zum ausprobieren. Dabei handelt es sich aber ebenfalls um einen Wrapper der wieder auf jQuery zurückgreift. Hier hat man dann aber anscheinend wieder alle gewohnten DevExtreme Funktionen auch in Angular 2 Anwendungen zur Verfügung.

2. Infragistics mit Ignite UI

Hier wird zwar auf der Webseite mit AngularJs geworben, aber es wird nur auf ein GitHub Repository verwiesen, was nur einen Bruchteil der Controls enthält die für das normale Ignite UI mit jQuery zur Verfügung stehen. Außerdem ist die Dokumentation mehr als nur fragwürdig, zumindest für die Angular Implementierung. Auch die angebotene Angular 2 Implementierung hat zumindest Abhängigkeiten auf jQuery und dies hört sich im ersten Moment nicht nach einer nativen Implementierung an.

Aufgrund der “schlechten” Grundvoraussetzungen habe ich hier auch keine Trial Version ausprobiert. Denn das Produkt kam schon aufgrund der schlechten Dokumentation und wenigen Controls für Angular nicht mehr in die nähere Auswahl.

3. Syncfunctions

Auch hier handelt es sich um eine recht große Anzahl an Controls die einem zur Verfügung stehen und für die es einen Angular 1.x und Angular 2 Wrapper gibt. Leider war auch hier die Dokumentation für die AngularJs Integration bzw. jQuery so schlecht, das es keine Live Beispiele gab, sondern nur Code Snippets mit passenden Screenshots dazu. Aufgrund der schlechten Dokumentation habe ich auch hier keine Testversion ausprobiert.

4. Telerik mit Kendo UI

Auch Telerik bietet für die Angular 1 Integration nur einen Wrapper an, dieser ist aber meiner Meinung nach wesentlich besser wie der von DevExtreme. Denn hier bin ich nicht komplett auf die Controls von Kendo UI angewiesen, sondern kann auch problemlos meine eigenen Controls verwenden wenn ich z.B. ein Formular mit Validierung erstellen möchte. Denn die Controls von Kendo UI integrieren sich “fast” nahtlos in die Angular Welt. Wichtig ist hier die passenden Dokumentationsschritte für AngularJS zu lesen, dann versteht man auch die normale Dokumentation etwas besser, wenn man hier teilweise nicht direkt etwas von AngularJs liest. Außerdem ist die Dokumentation sehr gut, es gibt Live Beispiele die man auch direkt bearbeiten kann und sieht was sich ändert. Auch Kendo UI stellt einen Themebuilder zur Verfügung, der zumindest einen rudimentären Support für Bootstrap bereitstellt. Leider wird bei den Icons noch auf das Sprite Image mit Icons von Bootstrap 2 gesetzt. Damit ist der Themebuilder leider nicht so gut wie der von DevExtreme, wenn es um die Bootstrap Integration geht.

Da aber auch hier die Grundvoraussetzungen gepasst haben, habe ich die Testversion ausprobiert und hatte bereits nach 20 Minuten meine erste AngularJs Anwendung mit einem DatePicker erstellt. Außerdem war es mir möglich innerhalb von 3 Stunden eine Autocomplete Textbox mit Serverseitiger Abfrage zu erstellen ohne größere Probleme, was mir in DevExtreme nicht gelungen ist.

Auch Kendo UI stellt eine Angular 2 Implementierung seiner Controls zur Verfügung, diese werden aber gerade komplett neu nativ in Angular 2 erstellt und daher gibt es auch erst eine Beta mit nur ein paar Controls. Es gibt aber eine gut einsehbare Timeline und Kommunikation in der gesagt wird wie der aktuelle Releaseplan aussieht.

5. Fazit

Prinzipiell blieben nur zwei Frameworks übrig zwischen denen ich mich entscheiden musste, denn nur bei DevExtreme und Kendo UI waren wirklich sehr gute Dokumentationen vorhanden. Denn die Dokumentation muss bei der puren Anzahl an Einstellungsmöglichkeiten, die für die einzelnen Controls zur Verfügung stehen einfach sehr gut ausfallen, sonst ist man nur auf den Support des Anbieters angewiesen. Da ich aber auch weiterhin eigene AngularJs Controls verwenden wollte, war mir eine möglichst native AngularJs Integration auch sehr wichtig und daher verwende ich aktuell Kendo UI.

Mit der aktuellen Kendo UI Version, habe ich bisher das Grid und das Gantt Chart verwendet und hier merkt man teilweise schon sehr das hier eine jQuery Implementierung vorliegt und keine native AngularJs Implementierung. Trotzdem bin ich mit dem was das Grid bzw. das Gantt Chart kann sehr zufrieden und es gliedert sich soweit auch ganz gut in meine AngularJs Anwendung ein. Außerdem ist der Support bisher auch ganz gut, dieser antwortete in der Regel innerhalb von 2 Tagen, bisher auf jedes Problem was ich hatte und keinen passenden Forumseintrag finden konnte. Bei der Verwendung von “einfachen” Controls wie der Datepicker, denkt man schon “fast” das man eine reine AngularJs Implementierung vorliegen hat. Außerdem bin ich auf die nativen Angular 2 Implementierungen vom Kendo UI gespannt.

HINWEIS: Wer sich für ein kommerzielles UI Framework für AngularJs interessiert, dem würde ich meiner Meinung nach auf jeden fall empfehlen das er DevExtreme und Kendo UI einmal selbst ausprobiert und prüft womit man selbst am besten klar kommt.

Außerdem möchte ich darauf hinweisen, das ich beide Frameworks vorher noch nicht verwendet habe und mir durchaus auch ein Fehler bei der Verwendung von DevExtreme unterlaufen sein kann, warum ich z.B. die Autocomplete Textbox nicht mit meinen Ansprüchen zum Laufen bekommen habe oder das TwoWay Databinding nicht so funktionierte wie von mir erwartet.

Angular 2 Services automatisch aus .NET Controller erstellen mit T4 Template


Ich habe den bereit schon einmal vorgestellten ProxyGenerator erweitert, so das jetzt auch die Generierung von Angular 2 Services aus .NET Controllern möglich ist.

Der .NET Controller wird wie gehabt über jeder Funktion mit dem passenden Attribut versehen “CreateAngular2TsProxy” und als ReturnType wird der jeweilige .NET Rückgabewert der JSON Funktion eingetragen.

Mit Hilfe des T4 Templates “ProxyGeneratorScript.tt” wird dann der folgende Strongly Typed Angular 2 Service erstellt

Das ganze kann im Detail auf der zugehörigen GitHub Seite nachgelesen werden und das Paket selbst kann man per NuGet installieren. Wichtig ist das dafür zusätzlich noch TypeLite zum Erstellen der Passenden TypeScript Interfaces für unsere .NET Typen verwendet wird und damit ist es auch erst möglich das der Service komplett typisiert erstellt werden kann.

Hyper-V Entwickler Maschine mit Windows 10 von Microsoft “einrichten”


Microsoft bietet seit kurzem auch Windows 10 Pro Hyper-V Images als Entwickler Maschinen zum Download an die nicht automatisch ablaufen, sondern die mit Hilfe eines Windows 10 Pro Keys aktiviert werden können. Der Lizenz Key muss nicht direkt beim Einrichten eingegeben werden, damit kann die Maschine auch Problemlos ein paar Tage ohne Lizenz betrieben werden. Der Download vom Hyper-V Image ist 20GB groß und es ist bereits die Visual Studio 2015 Community Edition installiert und noch einige Andere SDKs.

Voraussetzungen für den Betrieb von Hyper-V unter Windows 10

Wer Hype-V selbst noch nicht installiert hat, findet es unter “Programme und Features” bei “Windows-Features aktivieren oder deaktivieren” meine Installationseinstellungen sehen z.B. folgendermaßen aus

image

Nachdem man Hyper-V erfolgreich installiert hat, findet man unter Start jetzt auch den “Hyper-V-Manager”.

image

Damit wir später beim Einrichten des Images weniger Probleme haben, muss im Bios für den Prozessor auch die Virtualisierung aktiviert sein, bei meinen bisherigen Rechnern war dies meist standardmäßig im Bios deaktiviert.

Außerdem kam beim Start des Images folgende Fehlermeldung:

Virtual machine [VM Name] could not be started because the hypervisor is not running”

Dafür musste ich auf der Admin Konsole folgenden Befehl eingeben, damit der passende Dienst auch immer gestartet wird.

bcdedit /set hypervisorlaunchtype auto

Damit sollten zumindest die Vorrausetzungen geschaffen sein, damit man das Hyper-V Image auch starten kann.

Einrichten des Hyper-V Images

Nach dem Entpacken des Hyper-V Downloads sieht die Ordern Struktur folgendermaßen aus

image

Jetzt einfach den “Hyper-V-Manager” starten und bei Aktion –> Neu –> Virtueller Computer auswählen und einen passenden Namen für den Computer angeben

image

Die erste Generation wählen und danach angeben wieviel RAM der Rechner haben soll und bei Netzwerk Konfiguration, erst einmal “Nicht verbunden” einstellen (wie wir Zugang zum Internet bekommen wird weiter unten erklärt).

image

Bei der Auswahl der Virtuellen Festplatte, jetzt die VHD auswählen die wir vorher entpackt haben und das ganze fertigstellen.

image

Jetzt kann man zwar Windows starten, aber der Zugang zum Internet muss noch eingerichtet werden. Dafür muss im “Hyper-V-Manager” unter Aktion –> Manager für virtuelle Switches… ausgewählt werden.

 

image

Dann unter “Neuer Virtueller Netzwerkswitch” “Extern” auswählen und den Virtuellen Switch erstellen.

image

und dann einen passenden Namen vergeben und bei “Externes Netzwerk” eure Externe Netzwerkkarte auswählen

image

Jetzt kann man bei den Einstellungen für seinen Virtuellen Rechner

image

Bei Netzwerkkarte den neu angelegten Virtuellen Switch bei mir “LAN Extern” genannt auswählen und man sollte in der VM auch Zugriff auf das Internet haben.

image

So jetzt kann man den Virtuellen Computer starten und muss nur noch ein paar Installationseinstellungen für Windows 10 vornehmen und schon kann man loslegen und Visual Studio auf der Developer Maschine verwenden.

Angular 2.0 Released


Nach einer gefühlten Ewigkeit der Entwicklung, wurde nun endlich die erste Version von Angular 2.0 veröffentlicht. Auf der einen Seite freue ich mich über die neuen Möglichkeiten die einem geboten werden. Auf der anderen Seite stehen aber auch eine menge breaking changes die mit Angular 2.0 daher kommen, vor allem wenn man bisher alles mit Angular 1.x gebaut hat, ist eine Migration nicht so einfach möglich. Hier hoffe ich darauf das ngUpgrade auch das bietet was man bisher darüber lesen konnte.

Mit Angular 2 habe ich mich bisher zwar nur in den Grundzügen auseinander gesetzt und musste leider mit Erschrecken feststellen, das es auch in der RC Phase noch eine Menge Änderungen gab, das selbst einfachste Beispielprojekte nach einem Update nicht mehr funktionierten und man erst einmal schauen musste welches Modul es nicht mehr gibt oder umbenannt wurde, …. Solche Probleme gibt es bei einem Update von Angular 1.x zum Glück nicht. Daher hält sich meine Freude aktuell auch noch in Grenzen und ich werde für den produktiven Einsatz erst einmal noch etwas abwarten bis sich die API “gefestigt” hat und man sich “sicher” ist, dass sich diese nicht dauerhaft wie in der RC Phase ändert.

Außerdem fehlt mir persönlich noch eine einfache Lösungen für z.B. HttpInterceptoren in Angular 2, denn diese gibt es hier aktuell “noch” nicht. Dann müssen viele externe Bibliotheken auch entsprechend neu für Angular 2 erstellt oder umgeschrieben werden, wie z.B. “ui-router” oder “ng-bootstrap” die sich aktuell noch in der alpha für Angular 2 befinden.

Außerdem stellt sich die Frage nach dem Mehrwert, um ein Projekt auf Angular 2 umzustellen, denn ich verwende bereits heute TypeScript in meinen Angular 1.x Projekten und habe daher volles IntelliSense. Den einzigen Mehrwert den ich aktuell sehe, ist die Performance in größeren Views, wenn Angular 1.x mit seinen Watchern an seine Grenzen stößt, sollte es mit Angular 2 hier keine Probleme geben.

Wer jetzt immer noch Lust hat sich Angular 2 anzuschauen, für den habe ich einen älteren Blogeintrag auf den neuesten Stand gebracht, wie man Angular 2 in Visual Studio mit ASP.NET 4 einrichtet.

Package Installer Extension für Visual Studio


Inzwischen sollte man auch als .NET Webentwickler mitbekommen haben, das es neben NuGet auch noch npm und weitere Paketmanager gibt. Hier gibt es wie auch bei NuGet eine Konsole, aber meist keine direkte Visual Studio Integration. In den meisten Fällen möchte man aber nur schnell ein Paket installieren und nicht erst in die Doku schauen welche Konsolenbefehle man dafür genau benötigt. Genau hier kommt jetzt die Package Installer Extension zum Einsatz.

image

Mit dem Package Installer kann man Bower, npm, TSD, Typings oder NuGet Pakete sehr einfach und schnell installieren.

Wenn die Visual Studio Extension einmal installiert ist, steht mit einem Rechtsklick auf das Projekt der Menüpunkt “Quick Install Package…” zur Verfügung.

image

Hier öffnet sich dann ein kleines Popup in dem man die Quelle auswählen kann und danach gibt man nur noch den Paketnamen an.

image

Und der Package Installer lädt das passende Paket herunter und legt auch die passende Konfigurationsdatei an wie z.B. “typings.json” oder “package.json”.

React “Hello World” mit Visual Studio 2015 ASP.NET MVC 4 (jsx und tsx)


Als heißer Verfechter von AngularJs, habe ich mir gedacht schaust du auch mal über den Tellerrand und liest dich mal ein wenig in React ein. Denn bei React handelt es sich nicht um ein “komplettes” Framework wie AngularJs sondern eher um die Möglichkeit Performantere DOM Manipulation auszuführen, bei z.B. großen Listen, wo AngularJs so seine Probleme hat und evtl. kann ich beides später effektiv in einem Projekt verwenden.

Da ich aktuell auf ASP.NET MVC 4 Projekte und Visual Studio 2015 angewiesen bin, war dies meine erste Anlaufstelle um ein React Projekt zu erstellen. Dafür habe ich eine einfache MVC Seite erstellt.

React Bibliotheken installieren

Leichter gedacht als getan, denn die NuGet Pakete die ich so gefunden habe, waren alle nicht aktuell. Daher habe ich npm für die Installation der passenden React Pakete verwendet. Dafür muss im Root Verzeichnis des Projekts eine “package.json” Datei angelegt werden.

image

mit dem folgenden Inhalt

 

und dann einfach über die Rechte Maustaste auf der “package.json” => “Restore Packages” ausführen.

image

Danach gibt es einen versteckten Ordner “node_modules” im Rootverzeichnis unseres Projekts, in dem sich auch die zwei Verzeichnisse “react” und “react-dom” befinden.

image

Im jeweiligen “dist” Verzeichnis befindet sich die passende JavaScript Datei für “react.js” und “react-dom.js”. Diese müssen nur noch in der BundleConfig oder direkt in der Seite entsprechend eingebunden werden.

 

Da es sich hier um ein Beispiel handelt, verwende ich die Dateien direkt aus dem “node_modules” Verzeichnis. Wenn es sich um die Produktivumgebung handelt, richte ich vorher noch einen Gulp Task im Visual Studio ein, der die Dateien ins “Scripts” Verzeichnis meiner Anwendung kopiert und verlinke diese dann aus dem Scripts Verzeichnis heraus.

Damit hätten wir schon einmal die React Bibliotheken die wir für unsere Anwendung benötigen.

JSX und TSX Dateien

React selbst verwendet direkt im JavaScript HTML Syntax um seine Komponenten zu erstellen und verwendet dafür JSX (JavaScript Syntax Extension) was es wesentlich einfacher macht komplexe Komponenten direkt in JavaScript zu erstellen. Auch Visual Studio 2015 unterstützt das JSX Format. Für JavaScript muss man Dateien mit der Endung *.jsx anlegen und in TypeScript muss man Dateien mit der Endung *.tsx anlegen.

JavaScript JSX Dateien “kompilieren”

Damit die JavaScript JSX Dateien in normale JavaScript Dateien übersetzt werden können (damit sie auch der Browser versteht), verwendet man in den meisten Beispielen die JavaScript Bibliothek Babel, da ich aber Visual Studio verwende und die Erweiterung “Web Compiler” installiert habe, benötige ich keine extra JavaScript Bibliothek dafür.

image

Denn wenn man mit der rechten Maustaste auf eine JSX Datei geht, dann gibt es hier einen Punkt “Web Compiler” => “Compile file” und die Datei wird übersetzt in JavaScript und die passende JavaScript Datei wird automatisch angelegt und auch noch eine neue Konfigurationsdatei im Rootverzeichnis wird angelegt “compilerconfig.json”, in dieser Datei sind alle Dateinamen enthalten die automatisch bei Änderungen wieder kompiliert werden sollen.

image

image

Damit ist es jetzt möglich React Code zu erstellen, der automatisch beim Speichern übersetzt wird.

 

Jetzt müssen wir nur noch die Kompilierte JavaScript  Datei in der BundleConfig oder direkt im HTML verlinken und ein Element mit der ID “helloWorld” anlegen und schon funktioniert unsere “Hello World” Anwendung für JavaScript (*.JSX) Dateien.

 

TypeScript TSX Dateien und TypeDefinitions

Auch TypeScript in Visual Studio unterstützt das JSX Format, nur wird hier eine Datei mit der Endung *.tsx erstellt. Damit das ganze dann mit React zusammen funktioniert, muss noch in den Projekteinstellungen bei “TypeScript-Build” bei “JSX-Kompilierung in TSX-Dateien” auf “React” gestellt werden.

image

Das Übersetzen von TypeScript in JavaScript übernimmt hier der TypeScript Compiler nach jedem Speichern und der Web Compiler wie bei JavaScript wird hier nicht benötigt.

Damit TypeScript aber auch funktioniert, muss es React kennen und dafür werden TypeDefinition Dateien für React benötigt. Damit sich diese leichter installieren lassen und wir nicht erst eine NPM Konsole benötigen, gibt es das Addon “Package Installer”

image

Nach dem wir den Package Installer installiert haben, gibt es im Submenü in unserem Projekt den Punkt “Quick Install Package…”

image

Im Fenster was dann aufgeht, wählen wir “TSD” aus und geben “react” ein und wiederholen das ganze noch für “react-global”.

image

Jetzt gibt es einen neuen versteckten Ordner “typings” in unserem Projekt und eine “tsd.json” im Rootverzeichnis des Projekt. Ich habe beides dem Projekt hinzugefügt, damit ich diese nicht immer neu abrufen muss auf einem anderen Rechner, soweit ich es aber beurteilen kann ist dies nicht notwendig.

image

Jetzt können wir beginnen und unsere TypeScript Datei anlegen und den passenden React Code zu erstellen. Dafür müssen wir jetzt eine “*.tsx” Datei anlegen z.B. mit folgendem Inhalt

 

Von Vorteil ist wenn man hier eine Referenz auf die “tsd.d.ts” einfügt, denn dann kann man auf Nummer sicher gehen, das Visual Studio die passenden Typings auch findet.

Damit das Beispiel auch funktioniert, muss die Datei wieder in der BundleConfig eingefügt werden und unserer HTML Datei muss noch ein Element mit der ID “example” hinzugefügt werden.

So mit diesem Wissen sollte es jetzt problemlos möglich sein ein Projekt entsprechend für React vorzubereiten. Das Komplette Projekt findet Ihr auch auf meiner GitHub Seite.

Quellen:

https://templecoding.com/blog/2015/12/11/using-react-typescript-webpack-and-visual-studio/

http://staxmanade.com/2015/08/playing-with-typescript-and-jsx/