Wir bei Xebia lieben es, Wissen zu teilen! Das tun wir unter anderem, indem wir im Sommer 1-tägige Kurse veranstalten. Zusammen mit Frank Visser haben wir beschlossen, eine Schulung über die Full-Stack-Entwicklung mit Node.js, AngularJS und Facebooks React durchzuführen. Das Ziel der Schulung war es, den Studenten zu zeigen, wie man eine einfache Zeiterfassungsanwendung erstellen kann. Diese Anwendung sollte ausschließlich moderne Javascript-Technologien verwenden und gleichzeitig die besten Praktiken für die Einrichtung und Pflege der Anwendung vermitteln.
Was ist React?
React ist eine Javascript-Bibliothek zur Erstellung von Benutzeroberflächen, die von Facebook entwickelt wurde. Es ist ihre Antwort auf das V in MVC. Da sie sich nur um den Teil der Benutzeroberfläche einer Webanwendung kümmert, kann React mit anderen Frameworks (z.B. AngularJS, Backbone.js, ...) für den MC-Teil kombiniert werden. Falls Sie mit der MVC-Architektur nicht vertraut sind: MVC steht für Model-View-Controller und ist ein architektonisches Muster für die Aufteilung Ihrer Software in drei Teile mit dem Ziel, die interne Darstellung von Daten von der Darstellung für den eigentlichen Benutzer der Software zu trennen.
Warum React verwenden?
Es gibt eine ganze Reihe von Javascript MVC-Frameworks, mit denen Sie auch Ihre Ansichten modellieren können. Welche Vorteile hat die Verwendung von React anstelle von z.B. AngularJS?
Was React von anderen Javascript MVC-Frameworks wie AngularJS unterscheidet, ist die Art und Weise, wie React mit UI-Aktualisierungen umgeht. Um eine Web-Benutzeroberfläche dynamisch zu aktualisieren, müssen Sie DOM-Aktualisierungen vornehmen, wenn sich Daten in Ihrer Benutzeroberfläche ändern. Diese DOM-Aktualisierungen sind, verglichen mit dem Lesen von Daten aus dem DOM, teure Operationen, die die Reaktionsfähigkeit Ihrer Anwendung drastisch verlangsamen können, wenn Sie die Anzahl der Aktualisierungen nicht minimieren. React hat einen cleveren Ansatz gewählt, um die Menge der DOM-Aktualisierungen zu minimieren, indem es ein virtuelles DOM (oder Schatten-DOM) diff.
verwendet. Im Gegensatz zum normalen DOM, das aus Knoten besteht, besteht das virtuelle DOM aus leichtgewichtigen Javascript-Objekten, die Ihre verschiedenen React-Komponenten darstellen. Diese Darstellung wird verwendet, um die minimale Anzahl von Schritten zu bestimmen, die erforderlich sind, um vom vorherigen Rendering zum nächsten Rendering zu gelangen. Durch die Verwendung einer Observable, die prüft, ob sich der Zustand geändert hat, verhindert React unnötige erneute Rendervorgänge. Durch den Aufruf der Funktion setState Methode markieren Sie eine Komponente als 'schmutzig', was React im Wesentlichen anweist, die Benutzeroberfläche für diese Komponente zu aktualisieren. Wenn
Was ist der Unterschied zwischen React und AngularJS?
Es ist wichtig zu beachten, dass Sie die Verwendung von React mit anderen Frameworks wie AngularJS für die Erstellung von Benutzeroberflächen perfekt mischen können. Sie können sich natürlich auch dafür entscheiden, React nur für die Benutzeroberfläche zu verwenden und AngularJS für M und C in MVC beizubehalten. Unserer Meinung nach bringt Ihnen die Verwendung von React für einfache Komponenten keinen Vorteil gegenüber AngularJS. Wir glauben, dass die wahre Stärke von React in anspruchsvollen Komponenten liegt, die häufig neu gerendert werden. React übertrifft AngularJS (und viele andere Frameworks), wenn es um UI-Elemente geht, die häufig neu gerendert werden müssen. Das liegt daran, wie React intern mit UI-Aktualisierungen umgeht (siehe oben).
JSX
JSX ist eine Javascript-XML-Syntaxtransformation, die für die Verwendung mit React empfohlen wird. Es handelt sich um eine statisch typisierte objektorientierte Programmiersprache, die für moderne Browser entwickelt wurde. Sie ist schneller, sicherer und einfacher zu verwenden als Javascript selbst. Obwohl JSX und React unabhängige Technologien sind, wurde JSX mit Blick auf React entwickelt. React funktioniert von Haus aus ohne JSX, aber die Verwendung von JSX wird empfohlen. Einige der vielen Gründe für die Verwendung von JSX:
- Es ist einfacher, die Struktur des DOMs zu visualisieren
- Designern fällt es leichter, Änderungen vorzunehmen
- Es ist denjenigen vertraut, die MXML oder XAML verwendet haben.
Wenn Sie sich für JSX entscheiden, müssen Sie das JSX in Javascript kompilieren, bevor Sie Ihre Anwendung ausführen. Später in diesem Artikel werde ich Ihnen zeigen, wie Sie dies mit Hilfe einer Grunt-Aufgabe automatisieren können. Neben Grunt gibt es eine Reihe anderer Build-Tools, die JSX kompilieren können. Um nur einige zu nennen, gibt es Plugins für Gulp, Broccoli oder Mimosa. Eine Beispiel-JSX-Datei für die Erstellung eines einfachen Links sieht wie folgt aus:
[javascript]
/** @jsx React.DOM */
var link = React.DOM.a({href: 'https://facebook.github.io/react'}, 'React');
[/javascript]Vergessen Sie auf keinen Fall den Startkommentar, sonst wird Ihre JSX-Datei von React nicht verarbeitet.
Komponenten
Mit React können Sie UI-Ansichten aus mehreren, wiederverwendbaren Komponenten zusammenstellen. Sie können die verschiedenen Konzepte Ihrer Anwendung trennen, indem Sie modulare Komponenten erstellen und so die gleichen Vorteile wie bei der Verwendung von Funktionen und Klassen erhalten. Sie sollten sich bemühen, die verschiedenen gemeinsamen Elemente in Ihrer Benutzeroberfläche in wiederverwendbare Komponenten aufzuteilen, die es Ihnen ermöglichen, Boilerplate zu reduzieren und sie
[javascript]
/** @jsx React.DOM */
var HelloWorld = React.createClass({
render: function() {
return <div>Hello world!</div>;
}
});
[/javascript]Das Erstellen einer Komponente bedeutet nicht, dass sie automatisch gerendert wird. Sie müssen mit React.renderComponent wie folgt definieren, wo Sie Ihre verschiedenen Komponenten rendern möchten:
[javascript]
React.renderComponent(<HelloWorld />, targetNode);
[/javascript]Indem Sie z.B. document.getElementById oder einen jQuery-Selektor verwenden, zielen Sie auf den DOM-Knoten, an dem React Ihre Komponente rendern soll, und übergeben ihn als Parameter targetNode.
JSX-Kompilierung in Grunt automatisieren
Um die Kompilierung von JSX-Dateien zu automatisieren, müssen Sie das Paket grunt-react mit dem npm-Installer von Node.js installieren: npm install grunt-react --save-dev Nach der Installation des Pakets müssen Sie Ihrer Gruntfile.js eine kleine Konfiguration hinzufügen, damit die Aufgabe weiß, wo sich Ihre JSX-Quelldateien befinden und wo und mit welcher Erweiterung Sie die kompilierten Javascript-Dateien speichern möchten.
[javascript]
react: {
dynamic_mappings: {
files: [
{
expand: true,
src: ['scripts/jsx/*.jsx'],
dest: 'app/build_jsx/',
ext: '.js'
}
]
}
}
[/javascript]Um die Entwicklung zu beschleunigen, können Sie auch das Paket grunt-contrib-watch konfigurieren, um JSX-Dateien im Auge zu behalten. Die Überwachung von JSX-Dateien ermöglicht es Ihnen, die Aufgabe grunt-react immer dann auszuführen, wenn Sie eine JSX-Datei ändern, was zu einer kontinuierlichen Kompilierung von JSX-Dateien führt, während Sie Ihre Anwendung entwickeln. Sie geben einfach die Art der Dateien an, auf die Sie achten möchten, und die Aufgabe, die ausgeführt werden soll, wenn sich eine dieser Dateien ändert:
[javascript]
watch: {
jsx: {
files: ['scripts/jsx/*.jsx'],
tasks: ['react']
}
}
[/javascript]Zu guter Letzt müssen Sie die Aufgabe grunt-react zu einer oder mehreren Ihrer Grunt-Lebenszyklusaufgaben hinzufügen. In unserem Setup haben wir sie zu den Serve- und Build-Aufgaben hinzugefügt.
[javascript]
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'bowerInstall',
<strong>'react',</strong>
'concurrent:server',
'autoprefixer',
'configureProxies:server',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('build', [
'clean:dist',
'bowerInstall',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
<strong>'react',</strong>
'ngmin',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'rev',
'usemin',
'htmlmin'
]);
[/javascript]Fazit
Aufgrund des anderen Ansatzes von React bei der Handhabung von UI-Änderungen ist es äußerst effizient bei der Neudarstellung von UI-Komponenten. Außerdem lässt es sich leicht konfigurieren und in Ihren Build-Lifecycle integrieren.
Was kommt als Nächstes?
Im nächsten Artikel werden wir besprechen, wie Sie React zusammen mit AngularJS verwenden können, wie Sie mit Zuständen in Ihren Komponenten umgehen und wie Sie es vermeiden können, Ihre gesamte Komponentenhierarchie mit Hilfe von Rückrufen zu durchlaufen, wenn Sie den Zustand aktualisieren.
Verfasst von
Marc Rooding
Unsere Ideen
Weitere Blogs
Contact