Archiv für den Monat August 2016

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/

AngularJs TypeScript Interceptor Template


AngularJs bietet ein interessantes Konzept um AJAX Requests bzw. Response zu manipulieren oder zu prüfen ob ein Response bestimmte Daten enthält. Das ganze nennt sich HTTP Interceptor. Ich verwende es z.B. für die folgenden Aufgaben in meinen Projekten

  • Prüfen ob im Response eine Meldung enthalten ist die angezeigt werden soll, wenn diese vorhanden ist, existiert im Response JSON immer ein Property mit dem Namen “Message” und dieses wird dann entsprechend ausgewertet und angezeigt ohne das ich an der eigentlichen Funktion wo der Request gestartet wurde in irgendeiner Art eingreifen muss.
  • Prüfen ob der Response fehlerhaft ist und wenn ja auf eine Fehlerseite umleiten und den Fehler entsprechend anzeigen.
  • Bei einem Request den Header manipulieren und noch ein Antiforgery Token hinzufügen
  • Bei einem Request prüfen ob es sich um den IE handelt und hier das Caching für AJAX Requests über die Standard Header deaktivieren

Dies sind nur einige wenige Funktionen wo es sich lohnt auf AngularJS HTTP Interceptoren zu setzen.

Ein passenden Template für einen HTTP Interceptor in TypeScript sieht z.B. folgendermaßen aus.

 

Ein Beispiel wie das ganze in einem Projekt eingebunden werden kann findet Ihr in meinem GitHub Projekt.