5 praktische Beispiele zum Erlernen des React-Frameworks
Sie haben wahrscheinlich schon von dem beliebten JavaScript-Framework von Facebook gehört – React. Es wird von vielen beliebten Websites verwendet, darunter Facebook selbst und Instagram. In diesem Artikel finden Sie 5 praktische Beispiele, die mit React erstellt wurden und Ihnen einen Vorsprung beim Umgang mit dem Framework verschaffen.
Was ist das Besondere an React?
React basiert auf dem Konzept der Komponenten. Dies steht im Gegensatz zu Frameworks wie Angular und Ember, die bidirektionale Datenbindungen verwenden, um den HTML-Code der Seite zu aktualisieren. Meiner Meinung nach ist React einfacher zu erlernen als Angular und Ember - es ist viel kleiner und spielt gut mit jQuery und anderen Frameworks. Es ist auch extrem schnell, weil es ein virtuelles DOM verwendet und nur die geänderten Teile mit der zugrunde liegenden Seite synchronisiert (der Zugriff auf das DOM ist immer noch der langsamste Teil einer modernen Webanwendung, weshalb das Framework durch Optimierung einen Leistungsschub erhält). ).
Die Kehrseite ist jedoch, dass in React etwas mehr Code erforderlich ist, um die gleichen Dinge zu erreichen, die mit einer Datenbindung einfach zu erreichen sind, wie Sie den folgenden Beispielen entnehmen können. Einen Vergleich finden Sie in unserem Artikel über Angular.
Wie benutzt man es?
Um React zu verwenden, müssen Sie eine einzelne JavaScript-Datei in Ihre Seite einfügen. Facebook stellt freundlicherweise ein CDN zur Verfügung, auf das Sie direkt verlinken können:
<script src="http://fb.me/react-0.10.0.min.js"></script>
Dadurch erhalten Sie Zugriff auf das globale React -Objekt, das eine Reihe nützlicher Methoden enthält, von denen Sie einige in diesen Beispielen sehen können. Die empfohlene Methode zum Schreiben von React-Web-Apps ist die Verwendung einer Sprache namens JSX . Dies ist eine leicht verbesserte Version von JavaScript, mit der Sie React-Komponenten initialisieren können, indem Sie eine HTML-ähnliche Syntax direkt in Ihrem Code verwenden. Es wird zu JavaScript herunterkompiliert, bevor es vom Browser interpretiert wird. JSX ist völlig optional - Sie können reguläres JavaScript verwenden, wenn Sie dies bevorzugen.
Aber genug geredet, sehen wir uns etwas Code an!