React.js 14 Tools und Ressourcen für Webentwickler
Das Beliebtheit von React.js ist gewesen schnell wachsend seit Facebook die Bibliothek 2013 erstmals veröffentlicht hat das fünfthäufigste Open-Source-Projekt Auf Github sind auch Stellenanzeigen für React-Entwickler stark auf dem Vormarsch. Reaktion ist eine leichtes JavaScript-Framework zum Erstellen von Benutzeroberflächen - Die prominentesten Beispiele sind Facebook und Instagram.
React bietet ein Alternative für MVC-Frameworks, wie Angular oder Backbone, mit einem einfachere Struktur und ein Fokus auf Leistungsoptimierung. Da React in den kommenden Jahren sicherlich die Webentwicklungslandschaft bestimmen wird, möchten wir Ihnen in diesem Artikel eine Entwickler-Toolkit um Ihnen zu helfen, einen Fuß in den Bereich der React-Entwicklung zu setzen.
Offizielle React.js-Dokumente von Facebook
Facebook bietet Entwicklern eine ausführliche Dokumentation auf der Hauptkonzepte von React. Neben den Dokumenten finden Sie hier auch ein tolles Tutorial wie man ein interaktives Tic-Tac-Toe-Spiel baut mit React und a Diskussionsforum für React-Entwickler. Als die Dokumente sind Open Source, Sie können sie sogar bearbeiten, wenn Sie möchten.
React.js Github Repo
Im React Github-Repo können Sie Schauen Sie sich den Quellcode von React an wann immer du es brauchst Wenn Sie über den aktuellen Entwicklungsstand auf dem Laufenden bleiben möchten, können Sie sich auch das ansehen Probleme, das Meilensteine, und das neueste Pull-Anfragen. Wenn Sie festgefahren sind, kann es auch eine gute Idee sein, das zu studieren Fehlersuchanleitung ein bisschen.
Hallo World Starter Code
Wenn Sie einen schnellen Versuch zu reagieren versuchen möchten, können Sie damit beginnen “Hallo Welt” interaktive Demo auf Codepen. Es enthält alle notwendigen Vermögenswerte und das Startercode auch. Da Babel auch eingeschaltet ist, können Sie verwenden sowohl ECMAScript 6 als auch die JSX-Syntax. Wenn Sie diesen Stift nur gabelten, können Sie fortfahren, ohne die Umgebung selbst einrichten zu müssen.
Reaktiv Starter Kit
Das Reaktiv Starter Kit ist ein isomorphe Web-App-Speicherplatte gebaut aus Node.js, Express, GraphQL, React, und eine Handvoll Web-Entwicklungstools, wie z Webpack, Babel, und Browsersync. Es versorgt dich mit dem der gleiche Frontend-Stack, den Facebook verwendet und ermöglicht es Ihnen, in zu springen Full-Stack-React-Entwicklung ohne zu viel Mühe.
ReactCSS
ReactCSS macht es möglich Inline-CSS-Stile in JavaScript hinzufügen. ReactCSS bietet Unterstützung für React, Redux, React Native (ein Framework zum Erstellen nativer mobiler Apps mit React), Autoprefixing, Hover, Pseudoelemente und Medienabfragen. Sie können schnell installiere es mit npm.
React JSFiddle-Integration (mit und ohne JSX)
Das ist großartig Online-Spielplatz Wenn Sie einen Ort wünschen, an dem Sie React üben können. Es ist gehostet auf JSFiddle, und hat zwei Versionen: eins mit JSX und Eins ohne JSX, Wählen Sie diejenige aus, mit der Sie sich wohler fühlen.
React Style Guide Generator
Sie können schnell Erstellen Sie einen Style Guide für Ihr React-Projekt mit diesem benutzerfreundlichen React Style Guide Generator. Du musst nur fügen Sie eine kleine Dokumentation hinzu zu Ihren Dateien, und der Generator kümmert sich um den Rest. Das Tool wird mit einer ausführlichen Readme-Datei geliefert.
Belle konfigurierbare React-Komponenten
Belle ist ein Komponentenbibliothek reagieren das rüstet dich aus eine Reihe von React-Komponenten Sie möchten möglicherweise in Ihrem Projekt verwenden, z “Taste”, “Karte”, “Spinner”, “Umschalten”, “Bewertung”, verschiedene Formularkomponenten und andere. Die Komponenten funktionieren sowohl auf dem Handy als auch auf dem Desktop, und sie sind anpassbar auch.
Belle ist nicht die einzige React-Komponentenbibliothek Dort gibt es andere großartige auf Github, wie zB Widgets reagieren oder Elementar.
React Storybook UI-Entwicklungsumgebung
Wenn Sie die Komponentenbibliothek einer anderen Person aber nicht verwenden möchten will dein eigenes bauen, es lohnt sich, es zu versuchen Storybook reagieren die ein UI-Entwicklungsumgebung für React-Komponenten. Storybook ermöglicht es Ihnen Komponenten interaktiv entwickeln. Es hat eine ausführliche Dokumentation, und du kannst fangen Sie mit der Entwicklung an in dem Storybook Hub.
Reakt-Bootstrap
Reakt-Bootstrap integriert React mit dem Populären Bootstrap 3 Frontend Framework. Die Entwickler haben Bootstrap-Komponenten grundsätzlich mit React.js neu erstellt. Dies ergibt eine sauberere Codebasis mit weniger Wiederholung und a höhere leistung.
Beachten Sie, dass sich die APIs während der aktiven Entwicklung in der Zukunft ändern. Für die aktueller Stand der Entwicklung, Besuche die Roadmap des Projekts.
Reaktieren Sie Entwicklertools für Chrome
React DevTools für Chrome ist eine Erweiterung der Chrome Developer Tools und ermöglicht dies Überprüfen Sie die Komponentenhierarchie. Es war erstellt von Facebook mit dem Bestreben, die Entwicklergemeinde beim Erstellen neuer React-Apps zu unterstützen. Das kannst du einfach Fügen Sie es als Chrome-Erweiterung hinzu zu Ihrem Browser. Sie können das durchsuchen dazugehöriger Quellcode auch auf Github.
Reaktieren Sie Entwicklertools für Firefox
Dies ist das Firefox-Version von dem selben React Developer Tools von Facebook erstellt. Füge es einfach hinzu als Add-On für Ihren Firefox-Browser, und beginnen Sie sofort, den Hierarchiebaum Ihrer React-App zu untersuchen.
React.js-Paket für Atom
Du kannst hinzufügen Reagieren Sie auf Ihren Atom-Code-Editor mit diesem Atom React-Paket. Es kommt mit Syntaxhervorhebung, Autovervollständigung, Code-Snippets, Konvertierung von HTML in JSX, und einige andere nützliche Funktionen, die die Entwicklung von React erheblich erleichtern können.
React.js Fundamentals - kostenloser Online-Kurs
Es gibt viele ausgezeichnete und recht preiswerte Kurse, wo Sie können lerne react entwicklung, Sie können dies jedoch anmelden React.js Grundlagen Online-Kurs völlig kostenlos. Es besteht aus 12 Lektionen, beginnt mit dem Grundlagen von React, und hat eine schöner Lehrplan das deckt alle wichtigen Dinge ab.
