Viele ASP.NET MVC-Entwickler, die sich mit den aktuellen Entwicklungen im Bereich Javascript beschäftigen, werden schon mal von React gehört haben. Im Netz finden sich zahlreiche positive Erfahrungsberichte zu der Javascript-Bibliothek. Im Visual Studio 2015 verspricht Microsoft außerdem eine eingebaute React-Unterstützung. Höchste Zeit, sich das Ganze mal etwas näher anzusehen!
Was ist React?
React (oder auch ReactJS) ist eine Javascript-Bibliothek zur Erstellung von Oberflächen und wurde von Facebook entwickelt. Zu beachten ist, dass es sich hierbei eben nicht um ein komplettes MVC-Framework für Javascript handelt, wie beispielsweise beim beliebten Angular.
Es ist nur auf die Ansicht spezialisiert, also das „V“ in MVC. Mit React allein kann man keine kompletten Webanwendungen schreiben. Es bietet keine Datenhaltungsschicht, kein AJAX oder ein Event-System. Wer diese Dinge benötigt, muss sich zusätzliche Bibliotheken ins Boot holen.
Was sind die Vorteile?
Wie React funktioniert und was es bringt, lässt sich am besten anhand eines kleinen Beispiels erklären:
HTML:
...
<body>
<div id="container"></div>
</body>
Javascript:
var AdditionalContent = React.createClass({
getInitialState: function(){
return({showContent: false});
},
toggleShow: function(){
this.setState(
{ showContent: !this.state.showContent });
},
render: function(){
return(
<div>
<button onClick={ this.toggleShow }>
{
this.state.showContent ? "hide" : "show"
}
</button>
{
this.state.showContent ? <p>Content</p> : null
}
</div>
);
}
});
ReactDOM.render(<AdditionalContent />, document.getElementById('container'));Wie man hier sieht, ist der HTML-Teil quasi leer. Es gibt nur ein Element „container“, an das React sein generiertes HTML mittels der Funktion ReactDOM.render hängt. Im Javascript-Code werden dann alle HTML-Elemente, die eine Funktion besitzen, in eine Komponente gepackt (React.createClass). Der Return-Wert der Funktion „render“ beinhaltet dabei den zu generierenden HTML-Teil der Komponente. Man kann Komponenten Eigenschaften mitgeben und sie können einen State (Zustand) besitzen und diesen verändern, wie hier im Beispiel der State „ShowContent“, der anzeigt, ob der Inhalt sichtbar oder unsichtbar ist. Wenn ein State verändert wird, werden automatisch die Render-Funktionen der Komponenten aufgerufen, die diesen State benutzen. Man verändert also nicht mehr direkt den DOM, sondern nur noch die States der React-Komponenten.
React benutzt für das Rendering einen virtuellen DOM, anhand dessen die schnellstmögliche Änderung im DOM berechnet wird und auch nur die Elemente geändert werden, bei denen es nötig ist. React rendert also sehr schnell und der Code bleibt durch das Verpacken der Elemente in Komponenten deutlich übersichtlicher und wartbarer, als bei typischem JQuery-Spaghetticode.
Man muss auch keine Bedenken haben, dass Nutzer nur eine leere HTML-Seite sehen, wenn sie Javascript deaktiviert haben oder dass Suchmachinen-Crawler Probleme mit der Seite haben, denn React lässt sich initial auf dem Server rendern. Diese Funktion sollte man also unbedingt nutzen.
Wie bindet man React in das Visual Studio ein?
Die Möglichkeit, einfach die HTML-Elemente im Javascript-Code unterzubringen, ist dank einer kleinen Javascript-Erweiterung namens JSX möglich. Im Visual Studio 2015 kann man einfach .jsx-Dateien für den React-Code zum Projekt hinzufügen und schon wird einem die entsprechende IntelliSense-Unterstützung geboten. Allein mit IntelliSense kommt man allerdings nicht weit. Die Seite reactjs.net bietet aber zum Glück essentielle Erweiterungen an, die für die Arbeit notwendig sind. Man bekommt die Möglichkeit, .jsx-Dateien über das ASP.Net Bundling einzubinden und im gleichen Schritt zu Javascript kompilieren zu lassen. Und auch das serverseitige Rendering von React wird durch diese Erweiterungen erst ermöglicht.
Wann sollte man React benutzen?
Durch die erhöhte Übersichtlichkeit des Codes und das schnelle Rendering ist React gerade für größere Webseiten interessant. Wer natürlich weitestgehend auf DOM-Updates bei seinen Webseiten verzichtet, der benötigt auch kein React.
Die Einbindung ins Visual Studio funktioniert problemlos und z.B. Chome bietet zusätzlich React Developer Tools zum Debuggen an.
Mittlerweile gibt es sowohl vorgefertigte Komponenten für Standard-Anwendungsfälle, als auch beliebte Frond-End-Frameworks wie Bootstrap für React.
Allerdings gibt es auch noch einige Gebiete, bei denen eine Verbesserung wünschenswert wäre. Animationen sind beispielsweise nur umständlich mit React zu implementieren. Man sollte also vorher abwägen, wo ein Einsatz sinnvoll erscheint.
Sind Sie an einer weiteren Beratung zu React interessiert?
Wollen Sie lieber ein gleich ein komplettes Javascript-Framework benutzen?
Seminar: Angular 2 mit Typescript programmieren
Benötigen Sie erst mal ein Einführung in ASP.NET MVC?
